/* ============================================================
   Tutoría360 — Design Tokens (drop-in)
   Pega este archivo en css/ y enlázalo ANTES de css/styles.css,
   o copia este bloque :root al inicio de css/styles.css.
   Fredoka (display) requiere el <link> de Google Fonts (ver README).
   ============================================================ */

/* ---- from tokens/colors.css ---- */
/* ============================================================
   Tutoría360 · Color tokens
   Base palette extracted from css/styles.css + admin/dashboard.html
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --t360-teal:        #2F5B5B;   /* primary brand — headers, links, headings */
  --t360-teal-dark:   #234545;   /* pressed / deep teal, label text */
  --t360-teal-tint:   #3a7068;   /* gradient partner for teal bands */
  --t360-orange:      #E8743B;   /* accent / primary CTA */
  --t360-orange-dark: #c95a25;   /* orange gradient bottom / pressed */
  --t360-orange-tint: #FFE9D5;   /* soft orange surface (badges) */

  /* ---- Neutrals ---- */
  --t360-ink:         #243131;   /* default body text */
  --t360-muted:       #6b7575;   /* secondary text */
  --t360-lock:        #9aa0a0;   /* disabled / locked */
  --t360-line:        #e3e7e4;   /* hairline borders on cards */
  --t360-line-2:      #dfe3e0;   /* input borders */
  --t360-cream:       #F4F1EA;   /* app background (warm) */
  --t360-cloud:       #EEF1F0;   /* dashboard background (cool) */
  --t360-card:        #ffffff;   /* card / surface */
  --t360-paper:       #fffefb;   /* floating map card (warm white) */

  /* ---- Semantic status ---- */
  --t360-ok:          #2E8B57;   /* success / dominated */
  --t360-ok-tint:     #f0faf3;   /* success surface */
  --t360-warn:        #E8A13B;   /* warning / running low */
  --t360-bad:         #D8553C;   /* danger / expired */
  --t360-blue:        #3B7DD8;   /* info / data accent */
  --t360-purple:      #7A5BD8;   /* secondary data accent / passport */
  --t360-gold:        #E8B43B;   /* medals, stars earned */

  /* ---- Subject (materia) colors — from teacher dashboard ---- */
  --mat-matematicas:    #5D9CEC;
  --mat-lenguaje:       #AC92EC;
  --mat-ciencias:       #48CFAD;
  --mat-ingles:         #FC8A7D;
  --mat-socioemocional: #FFCE54;
  --mat-geografia:      #4FC1E9;
  --mat-historia:       #EC87C0;
  --mat-pensamiento:    #A0D468;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-bg:            var(--t360-cream);
  --color-bg-admin:      var(--t360-cloud);
  --color-surface:       var(--t360-card);
  --color-surface-warm:  var(--t360-paper);
  --color-text:          var(--t360-ink);
  --color-text-muted:    var(--t360-muted);
  --color-text-onbrand:  #ffffff;
  --color-border:        var(--t360-line);
  --color-border-input:  var(--t360-line-2);

  --color-primary:       var(--t360-teal);
  --color-primary-press: var(--t360-teal-dark);
  --color-accent:        var(--t360-orange);
  --color-accent-press:  var(--t360-orange-dark);

  --color-success:       var(--t360-ok);
  --color-warning:       var(--t360-warn);
  --color-danger:        var(--t360-bad);
  --color-info:          var(--t360-blue);

  /* ---- Brand gradients ---- */
  --grad-teal:   linear-gradient(160deg, #2F5B5B, #3a7068);   /* @kind color */
  --grad-orange: linear-gradient(#e8743b, #c95a25);           /* @kind color */
  --grad-sky:    linear-gradient(180deg, #bfe3f5 0%, #8fd0ee 55%, #6fc1e6 100%); /* @kind color */
  --grad-gold:   linear-gradient(90deg, #ffd36b, #f0a93b);    /* @kind color */
}

/* ---- from tokens/typography.css ---- */
/* ============================================================
   Tutoría360 · Typography tokens
   Source: kid app uses Arial/Helvetica; admin uses the system UI
   stack. We keep a clean system sans for body/UI (faithful to
   source) and add a rounded display face (Fredoka) for the
   kid-facing, playful headings — see fonts.css.
   ============================================================ */
:root {
  /* ---- Families ---- */
  /* Body / UI — faithful to the codebase (system sans, Arial fallback) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Arial, Helvetica, sans-serif;
  /* Display — rounded, friendly; used on kid-app headings & numbers.
     RECOMMENDED ENHANCEMENT (original ships Arial only). */
  --font-display: "Fredoka", var(--font-sans);

  /* The wordmark (TUTORÍA360) is rendered as SVG text in
     assets/logo-tutoria360.svg — set in Arial Narrow bold there, so no
     CSS font token is needed for it. */

  /* ---- Type scale (rem, 16px base) ---- */
  --text-2xs:  0.66rem;   /* nav labels, micro caps */
  --text-xs:   0.72rem;   /* table head, tags, fine print */
  --text-sm:   0.82rem;   /* secondary / muted body */
  --text-base: 1rem;      /* body */
  --text-md:   1.1rem;    /* lead / brand line */
  --text-lg:   1.25rem;   /* card titles */
  --text-xl:   1.6rem;    /* KPI values, section heads */
  --text-2xl:  2rem;      /* page titles */
  --text-3xl:  2.6rem;    /* hero / festive */

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  600;
  --weight-bold:    700;
  --weight-black:   800;   /* dashboard KPIs, emphatic labels */
  --weight-heavy:   900;   /* toasts, big celebratory numbers */

  /* ---- Line heights ---- */
  --leading-tight: 1.15;
  --leading-snug:  1.22;
  --leading-base:  1.45;

  /* ---- Letter spacing ---- */
  --tracking-caps: 0.3px;  /* uppercase micro-labels */

  /* ---- Semantic aliases ---- */
  --text-body:       var(--text-base);
  --text-heading:    var(--text-lg);
  --text-display:    var(--text-2xl);
}

/* ---- from tokens/spacing.css ---- */
/* ============================================================
   Tutoría360 · Spacing, radii & layout tokens
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base rhythm) ---- */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  20px;
  --space-9:  24px;
  --space-10: 28px;
  --space-12: 34px;

  /* ---- Corner radii ---- */
  --radius-xs:   8px;    /* tags, small inputs */
  --radius-sm:   10px;   /* buttons, inputs */
  --radius-md:   12px;   /* compact cards */
  --radius-lg:   14px;   /* default card */
  --radius-xl:   18px;   /* login card, large surfaces */
  --radius-2xl:  24px;   /* hero panels, map scene */
  --radius-pill: 999px;  /* chips, toasts, nav bar */

  /* ---- Container widths ---- */
  --width-app:    1000px;  /* kid app main column */
  --width-admin:  1240px;  /* dashboard */
  --width-login:  420px;   /* login / form card */
  --width-prose:  900px;   /* teacher dashboard / docs */

  /* ---- Border widths ---- */
  --border-hair:  1px;
  --border-card:  2px;     /* the brand's signature 2px card border */
  --border-emph:  2.5px;   /* speech bubble / emphasis */
}

/* ---- from tokens/effects.css ---- */
/* ============================================================
   Tutoría360 · Elevation, shadows & motion
   ============================================================ */
:root {
  /* ---- Shadows (very soft, low-opacity — the brand stays light) ---- */
  --shadow-xs:   0 2px 5px #0001;                  /* list rows */
  --shadow-sm:   0 2px 10px #0000000f;             /* dashboard panels */
  --shadow-card: 0 6px 16px #0b3a5530;             /* floating map cards */
  --shadow-md:   0 8px 24px #0b3a5540;             /* bottom nav, popovers */
  --shadow-lg:   0 8px 30px #0001;                 /* login card */
  --shadow-pop:  0 12px 30px rgba(20,60,80,.28);   /* toast / overlay */
  --shadow-modal:0 24px 60px rgba(0,0,0,.35);      /* intro / dialog */

  /* 3D "pressable" button — solid offset under the fill */
  --shadow-press:   0 3px 0 #0002;
  --shadow-press-cta: 0 8px 20px rgba(232,116,59,.45);

  /* Inset relief used on the sky map scene */
  --shadow-inset-map: inset 0 4px 18px #0b4a6a22;

  /* ---- Focus ring ---- */
  --ring-accent: 0 0 0 3px #E8743B44;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.2, .7, .3, 1);      /* @kind other */
  /* signature pop/spring easing */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);  /* @kind other */
  --dur-fast:    .12s;                             /* @kind other */
  --dur-base:    .15s;                             /* @kind other */
  --dur-slow:    .28s;                             /* @kind other */
}