/* The only file that knows what study looks like. Everything else reads these tokens.
   A sibling of sodalite: near-black and calm, Plus Jakarta Sans, pill buttons, one gradient moment. */

@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);

    /* ink */
    --fg:    light-dark(#0F1117, #F3F3F6);
    --fg-2:  light-dark(#353844, #C7C7D0);
    --muted: light-dark(#62656F, #8C8C98);
    --faint: light-dark(#9EA0AA, #5C5C68);

    /* the one gradient moment, never used for state */
    --grad-a: light-dark(#E23D78, #FF6A9A);
    --grad-b: light-dark(#1D72C8, #5FB6FF);
    --grad: linear-gradient(90deg, var(--grad-a), var(--grad-b));

    /* state, each with one meaning */
    --known:    light-dark(#1D72C8, #5FB6FF);  /* memory strength */
    --learning: light-dark(#6B4FE0, #B79BFF);  /* in progress */
    --due:      light-dark(#BF530D, #FF8A3D);  /* needs you now */
    --right:    light-dark(#178A4C, #3EC97C);  /* correct answers only */
    --wrong:    light-dark(#D42A3A, #FF5468);  /* mistakes, never shame */

    --btn-bg: var(--fg);
    --btn-fg: var(--bg);
    --focus:  var(--grad-b);
    --glow-a: light-dark(rgb(226 61 120 / .10), rgb(255 106 154 / .15));
    --glow-b: light-dark(rgb(29 114 200 / .10), rgb(95 182 255 / .13));
    --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));

    /* type */
    --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;
    --fs-sm: 13.5px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 22px;
    --fs-2xl: 30px;
    --fs-3xl: clamp(34px, 5vw, 52px);
    --track-tight: -0.045em;

    /* shape */
    --r-card: 18px;
    --r-tile: 14px;
    --r-input: 12px;
    --r-pill: 999px;

    /* 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;
  }
  :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; }
  }
}