/* ============================================================
   QUIZORIA SaaS — design tokens

   Deliberately a separate system from the game.

   The game is a television experience: a dark cinematic stage, type that
   scales with the viewport so it reads from three metres away, gold prestige
   lighting. A dashboard is the opposite job. It is read at arm's length, for
   an hour at a time, by a teacher preparing a lesson - so it is light by
   default, quiet, and sized in rem rather than in viewport units.

   What the two share is identity: the same indigo and violet, the same
   champagne gold, the same typefaces. The product should feel like one brand
   in two rooms, not like two products.

   Every colour is declared here and only here, so dark mode is a matter of
   re-declaring twelve values rather than auditing a stylesheet.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- brand ----
     Carried over from the game's violet, lightened until it can sit on white
     and still pass contrast as a button fill. */
  --brand-50:  #f2f0ff;
  --brand-100: #e6e2ff;
  --brand-200: #cfc7ff;
  --brand-300: #ab9cfb;
  --brand-400: #8a72f2;
  --brand-500: #6c4fe3;
  --brand-600: #5a39cf;
  --brand-700: #4a2cad;
  --brand-800: #3c258b;
  --brand-900: #2c1a66;

  /* ---- accent ----
     The stage gold, darkened for light backgrounds. Used sparingly: a plan
     badge, a milestone, an empty-state illustration. Never for a primary
     action - gold on white cannot carry the contrast a button needs. */
  --gold-100: #fff3d4;
  --gold-300: #f3c860;
  --gold-600: #a8761c;

  /* ---- neutrals ----
     Very slightly blue, so they sit with the brand rather than against it. */
  --ink-900: #12142b;
  --ink-800: #1e2145;
  --ink-700: #33375f;
  --ink-600: #4a4f7a;
  --ink-500: #6b7099;
  --ink-400: #9095b8;
  --ink-300: #c2c6dd;
  --ink-200: #e0e3ef;
  --ink-100: #eef0f7;
  --ink-50:  #f7f8fc;

  /* ---- status ---- */
  --ok-50:   #e8f9f1;
  --ok-500:  #12a06a;
  --ok-700:  #0b7048;
  --warn-50: #fef4e3;
  --warn-500:#c07d10;
  --warn-700:#8a5a08;
  --bad-50:  #fdecef;
  --bad-500: #d92c46;
  --bad-700: #9d1b30;
  --info-50: #e9f2fe;
  --info-500:#1f6fdb;

  /* ---- semantic surfaces ---- */
  --bg:            var(--ink-50);
  --bg-raised:     #ffffff;
  --bg-sunken:     var(--ink-100);
  --bg-inset:      var(--ink-100);
  --bg-brand-soft: var(--brand-50);
  --bg-hover:      rgba(108, 79, 227, .06);
  --bg-active:     rgba(108, 79, 227, .11);
  --bg-scrim:      rgba(18, 20, 43, .48);

  --text:        var(--ink-900);
  --text-muted:  var(--ink-600);
  --text-faint:  var(--ink-500);
  --text-invert: #ffffff;
  --text-brand:  var(--brand-700);

  --line:        var(--ink-200);
  --line-strong: var(--ink-300);
  --focus-ring:  var(--brand-500);

  /* ---- typography ----
     Fixed rem, not viewport units. A dashboard that resized with the window
     would make a teacher's careful reading of a question list jump about. */
  --font-ui: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-ar: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-display: 2.125rem;   /* 34px - one per page, at most */
  --fs-h1:      1.625rem;   /* 26px */
  --fs-h2:      1.25rem;    /* 20px */
  --fs-h3:      1.0625rem;  /* 17px */
  --fs-body:    0.9375rem;  /* 15px - the floor for sustained reading */
  --fs-small:   0.8125rem;  /* 13px */
  --fs-micro:   0.75rem;    /* 12px - labels and badges only, never prose */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* ---- spacing ----
     A 4px grid. Every margin and padding in the product is one of these. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* ---- shape ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---- elevation ----
     Shadows are soft and tinted with the ink colour rather than pure black,
     which is what stops a light interface looking grubby. */
  --shadow-sm: 0 1px 2px rgba(18, 20, 43, .06), 0 1px 3px rgba(18, 20, 43, .05);
  --shadow-md: 0 2px 4px rgba(18, 20, 43, .05), 0 6px 16px rgba(18, 20, 43, .07);
  --shadow-lg: 0 8px 24px rgba(18, 20, 43, .10), 0 2px 6px rgba(18, 20, 43, .06);
  --shadow-pop: 0 16px 48px rgba(18, 20, 43, .18);

  /* ---- layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --page-max: 1200px;

  /* ---- motion ----
     Short and few. A dashboard used all day should feel instant; animation
     here exists to explain what moved, not to decorate. */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
}

/* ---- dark mode ----
   Only the semantic layer is redeclared. The palette above is untouched, so
   the two themes cannot drift apart. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg:            #0d0f22;
  --bg-raised:     #161936;
  --bg-sunken:     #0a0c1c;
  --bg-inset:      #1d2145;
  --bg-brand-soft: rgba(108, 79, 227, .16);
  --bg-hover:      rgba(171, 156, 251, .08);
  --bg-active:     rgba(171, 156, 251, .14);
  --bg-scrim:      rgba(4, 5, 12, .66);

  --text:        #eef0fb;
  --text-muted:  #a7adcf;
  --text-faint:  #848ab0;
  --text-invert: #12142b;
  --text-brand:  var(--brand-300);

  --line:        #262b52;
  --line-strong: #363c6e;
  --focus-ring:  var(--brand-300);

  --ok-50:   rgba(18, 160, 106, .16);
  --warn-50: rgba(192, 125, 16, .18);
  --bad-50:  rgba(217, 44, 70, .16);
  --info-50: rgba(31, 111, 219, .16);
  --ok-500:  #3fd598;
  --warn-500:#e0a93c;
  --bad-500: #ff6b81;
  --info-500:#63a4f5;
  --gold-600: var(--gold-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  /* The explicit choice wins in both directions; this is only the default for
     somebody who has never touched the switch. */
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg:            #0d0f22;
    --bg-raised:     #161936;
    --bg-sunken:     #0a0c1c;
    --bg-inset:      #1d2145;
    --bg-brand-soft: rgba(108, 79, 227, .16);
    --bg-hover:      rgba(171, 156, 251, .08);
    --bg-active:     rgba(171, 156, 251, .14);
    --bg-scrim:      rgba(4, 5, 12, .66);

    --text:        #eef0fb;
    --text-muted:  #a7adcf;
    --text-faint:  #848ab0;
    --text-invert: #12142b;
    --text-brand:  var(--brand-300);

    --line:        #262b52;
    --line-strong: #363c6e;
    --focus-ring:  var(--brand-300);

    --ok-50:   rgba(18, 160, 106, .16);
    --warn-50: rgba(192, 125, 16, .18);
    --bad-50:  rgba(217, 44, 70, .16);
    --info-50: rgba(31, 111, 219, .16);
    --ok-500:  #3fd598;
    --warn-500:#e0a93c;
    --bad-500: #ff6b81;
    --info-500:#63a4f5;
    --gold-600: var(--gold-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
    --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
  }
}