/* The only file that knows what ltc looks like. Everything else reads these tokens.
   A sibling of study: near-black and calm, Plus Jakarta Sans, pill buttons, one gradient moment
   (green to blue, like a terminal's prompt), and Geist Mono wherever there's code. */

@layer reset, tokens, base, layout, components, views, utilities;

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(/fonts/plus-jakarta-sans.woff2) format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(/fonts/plus-jakarta-sans-italic.woff2) format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(/fonts/geist-mono.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* ground & surfaces: light | dark */
    --bg:        light-dark(#F6F6F8, #0B0B0E);
    --bg-raise:  light-dark(#FBFBFC, #0F0F13);
    --surface:   light-dark(#FFFFFF, #15151A);
    --surface-2: light-dark(#F0F0F4, #1C1C23);
    --line:      light-dark(#E3E3EA, #24242C);
    --line-2:    light-dark(#D3D3DC, #33333D);
    --line-strong: light-dark(#8A8C96, #6A6A76);  /* a border that's the only sign of a control (3:1) */

    /* ink */
    --fg:    light-dark(#0F1117, #F3F3F6);
    --fg-2:  light-dark(#353844, #C7C7D0);
    --muted: light-dark(#62656F, #8C8C98);
    --faint: light-dark(#868892, #74747F);  /* quiet, but still readable: 3:1 or more */

    /* the one gradient moment: the next lesson, and celebrations, never state */
    --grad-a: light-dark(#0E8F62, #34D399);
    --grad-b: light-dark(#1D63D8, #60A5FA);
    --grad: linear-gradient(90deg, var(--grad-a), var(--grad-b));

    /* state, each with one meaning (light values read at 4.5:1 on every surface) */
    --known:    light-dark(#1A66B5, #5FB6FF);  /* memory strength */
    --learning: light-dark(#6B4FE0, #B79BFF);  /* in progress */
    --due:      light-dark(#A84A0B, #FF8A3D);  /* needs you now */
    --right:    light-dark(#127A42, #3EC97C);  /* correct answers */
    --wrong:    light-dark(#D42A3A, #FF5468);  /* mistakes, never shame */
    --success:  var(--right);                  /* done, met, ready: good news that isn't an answer */
    --reward:   light-dark(#8F6200, #F2C14E);  /* what studying earns: xp, streaks, runs, levels */
    --reward-fill: light-dark(#B87F00, #F2C14E);  /* the same, brighter, for bars and rings (3:1) */

    --btn-bg: var(--fg);
    --btn-fg: var(--bg);
    --focus:  var(--grad-b);
    --glow-a: light-dark(rgb(14 143 98 / .10), rgb(52 211 153 / .13));
    --glow-b: light-dark(rgb(29 99 216 / .10), rgb(96 165 250 / .13));

    /* the two languages, wherever a course or its code is named */
    --lang-python:     light-dark(#2E6DB4, #7AB0F0);
    --lang-javascript: light-dark(#9A7A00, #F0D44E);

    /* code: the editor and every code block (the same colours either way round) */
    --code-bg:   light-dark(#FAFAFC, #101015);
    --code-line: light-dark(#ECECF2, #1E1E26);
    --tk-kw:      light-dark(#B0287A, #FF7AB6);
    --tk-str:     light-dark(#0F7A4B, #7EE2A8);
    --tk-num:     light-dark(#9A5B00, #F7B267);
    --tk-com:     light-dark(#7C7F8A, #6E7080);
    --tk-fn:      light-dark(#1D5FC8, #82B4FF);
    --tk-builtin: light-dark(#6B3FD0, #C3A6FF);
    --tk-const:   light-dark(#9A5B00, #F7B267);
    --tk-op:      light-dark(#5A5D68, #A8AAB6);
    --dot:    light-dark(rgb(15 17 23 / .09), rgb(255 255 255 / .075));
    --shadow-float: 0 24px 64px -28px light-dark(rgb(15 17 23 / .28), rgb(0 0 0 / .8));  /* only on things that float over the page */
    --scrim:  light-dark(rgb(15 17 23 / .4), rgb(0 0 0 / .55));  /* behind dialogs, sheets and panels */
    --track:  var(--line-2);  /* the empty part of every progress bar and meter */

    /* type: one scale, from the sizes in use. A size by its job first (label … panel); a step
       (xs … 3xl) where no job fits. Raw px is left only for big stats and headings, the
       wordmark, glyphs standing in for icons, and the slides' 18px. */
    --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 12px;                  /* a label alone on its line over a heading; small print */
    --fs-sm: 13px;                  /* small controls: small pills, chips, field labels, toggles */
    --fs-md: 15px;                  /* body */
    --fs-lg: 17px;                  /* ledes, big card titles, slide text */
    --fs-xl: 22px;                  /* section headings */
    --fs-2xl: 30px;                 /* a big number */
    --fs-3xl: clamp(34px, 5vw, 52px);  /* page headings */
    --fs-label: 11px;               /* mono labels and small eyebrows; tags and tiny counts */
    --fs-meta: var(--fs-sm);        /* secondary lines under a title, hints, notes */
    --fs-body-sm: 14px;             /* body in cards and rows; buttons, menus, toasts */
    --fs-row: var(--fs-md);         /* row and card titles */
    --fs-panel: var(--fs-lg);       /* panel and dialog titles */
    --fs-field: 16px;               /* fields on a phone: any smaller and iOS zooms in */
    --fs-question: clamp(19px, 2.4vw, 23px);  /* the question, problem or hook being studied */
    --track-label: .04em;           /* mono labels */
    --track-tight: -0.045em;

    /* shape */
    --r-card: 18px;
    --r-tile: 14px;
    --r-input: 12px;
    --r-pill: 999px;
    --r-item: 8px;   /* small things inside a card: nav rows, icon buttons, thumbnails, kbd */

    /* space: card insides and list rows, so text lines up down a page */
    --pad-card: 20px;
    --pad-row: 12px 16px;

    /* motion: confirms what happened, never decorates */
    --ease-liquid: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --t: 360ms;
    --t-fast: 180ms;

    --sidebar-w: 232px;
    --tabbar-h: 58px;
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  @media (prefers-reduced-motion: reduce) {
    :root { --t: 0ms; --t-fast: 0ms; }
  }
}