/* Spelling Gems — Design System Tokens
   Generated from documents/requirements/02_VISUAL_SYSTEM.md
   Never use raw hex values in other CSS files — always reference these custom properties. */

:root {
  /* ── Foundation palette ────────────────────────────────── */
  --bg-base:           #FBF9F4;  /* Primary background. Warm off-white, paper-like. */
  --bg-elevated:       #FFFFFF;  /* Cards, modals, elevated surfaces. */
  --ink-primary:       #1A1A2E;  /* Primary text. Near-black with blue undertone. */
  --ink-secondary:     #4A4A5E;  /* Secondary text, labels. */
  --ink-muted:         #8A8A9A;  /* Disabled states, meta text. */
  --divider:           #E8E4DC;  /* Soft greys for dividers, borders. */
  --divider-strong:    #D4CFC4;  /* Stronger dividers when needed. */

  /* ── Jewel accents (core gem colours) ──────────────────────── */
  --ruby:              #D11149;  /* Energy, hot streaks, soft warning. */
  --sapphire:          #1B4D8C;  /* Primary actions, trust, focus, Blink's default. */
  --emerald:           #10803A;  /* Success, correct answers, growth. */
  --amethyst:          #7B3FA9;  /* Special / seasonal items. */
  --topaz:             #F5A623;  /* Gems currency, rewards. */
  --diamond:           #E8F4F8;  /* Legendary tier. */

  /* ── Jewel tints (lighter, backgrounds) ──────────────────────– */
  --ruby-tint:         #F4C9D2;   /* Ruby background fill, hover states. */
  --sapphire-tint:     #C5D6E8;   /* Sapphire background fill, hover states. */
  --emerald-tint:      #B8DDC4;   /* Emerald background fill, hover states. */
  --amethyst-tint:     #D4BFE5;   /* Amethyst background fill, hover states. */
  --topaz-tint:        #FBE0B3;   /* Topaz background fill, hover states. */
  --diamond-tint:      #F5FAFC;   /* Diamond background fill, hover states. */

  /* ── Jewel shades (darker, pressed states) ─────────────────── */
  --ruby-shade:        #A50D38;   /* Ruby pressed state, darker text. */
  --sapphire-shade:    #143A6B;   /* Sapphire pressed state, darker text. */
  --emerald-shade:     #0C6A30;   /* Emerald pressed state, darker text. */
  --amethyst-shade:    #5C2F80;   /* Amethyst pressed state, darker text. */
  --topaz-shade:       #C68419;   /* Topaz pressed state, darker text. */
  --diamond-shade:     #B8D0D8;   /* Diamond pressed state, darker text. */

  /* ── Motion — easing curves ────────────────────────────────── */
  --ease-snappy:       cubic-bezier(0.4, 0, 0.2, 1);      /* UI feedback, taps, hovers. */
  --ease-bouncy:       cubic-bezier(0.34, 1.56, 0.64, 1); /* Reward animations. */
  --ease-floaty:       cubic-bezier(0.4, 0, 0.6, 1);      /* Blink's idle motion, ambient. */

  /* Alias for 06_PROMPT_PATTERNS.md compatibility — same curve as --ease-snappy.
     --ease-snappy is canonical per 02_VISUAL_SYSTEM.md §4. */
  --ease-standard:     var(--ease-snappy);

  /* ── Motion — durations ────────────────────────────────────── */
  --dur-micro:         100ms;   /* Tap acknowledgement. */
  --dur-ui:            200ms;   /* Button states, hovers. */
  --dur-transition:    350ms;   /* Page / view transitions. */
  --dur-reward:        600ms;   /* Reward celebrations. */

  /* Aliases for 06_PROMPT_PATTERNS.md compatibility — --dur-* is canonical */
  --duration-instant:  100ms;
  --duration-fast:     200ms;
  --duration-normal:   350ms;
  --duration-slow:     600ms;

  /* ── Typography — families ─────────────────────────────────── */
  --font-display:      'Fredoka', sans-serif;   /* Display, headlines, Blink dialogue. */
  --font-body:         'Nunito', sans-serif;    /* Body, labels, UI copy, system messages. */

  /* ── Typography — scale (modular 1.25) ────────────────────── */
  --type-display:      48px;     /* Hero, full-page titles. */
  --type-h1:           38px;     /* Page title. */
  --type-h2:           28px;     /* Section heading. */
  --type-h3:           22px;     /* Card title. */
  --type-body-lg:      18px;     /* Large body text. */
  --type-body:         16px;     /* Default body text. */
  --type-label:        14px;     /* Labels, captions. */
  --type-small:        12px;     /* Meta, small text. */
  --type-blink-dialog: 20px;     /* Blink's dialogue bubbles. */

  /* ── Shape — border radius ────────────────────────────────── */
  /* Purpose-named tokens — canonical per 02_VISUAL_SYSTEM.md §2 and
     04_ASSET_LIBRARY.md §4. Prefer these in new code. */
  --radius-input:      10px;     /* Input fields. */
  --radius-button:     12px;     /* Buttons (spec value — see note below). */
  --radius-card:       16px;     /* Cards. */
  --radius-modal:      20px;     /* Modals. */
  --radius-panel:      24px;     /* Panels, large surfaces. */
  --radius-pill:       999px;    /* Pill badges, tags, current production buttons. */

  /* T-shirt aliases — kept for backward compatibility with existing CSS.
     Map to the same values as the purpose tokens above. */
  --radius-sm:         var(--radius-input);   /* 10px */
  --radius-md:         var(--radius-card);    /* 16px — note: this used to mean "buttons OR cards"; buttons now use --radius-button */
  --radius-lg:         var(--radius-modal);   /* 20px */
  --radius-xl:         var(--radius-panel);   /* 24px */

  /* Production note: current .btn rules use --radius-pill (999px), not --radius-button (12px).
     The 12px spec value is a planned future state; switching is a deliberate visual change,
     to be made separately. See 04_ASSET_LIBRARY.md §4. */

  /* ── Spacing scale ────────────────────────────────────────── */
  --space-xs:          6px;
  --space-sm:          12px;
  --space-md:          20px;
  --space-lg:          32px;
  --space-xl:          48px;

  /* ── Surface / glass treatments (light background) ──────── */
  --surface-card:      var(--bg-elevated);
  --surface-raised:    rgba(255,255,255,0.85);
  --glass-bg:          rgba(255,255,255,0.72);
  --glass-border:      var(--divider);
  --glass-shadow:      0 4px 24px rgba(26,26,46,0.10);

  /* ── Semantic aliases ────────────────────────────────────── */
  --color-error:       var(--ruby);
  --color-error-tint:  var(--ruby-tint);
  --color-success:     var(--emerald);
  --color-warning:     var(--topaz);
  --color-primary:     var(--sapphire);
  --color-primary-tint: var(--sapphire-tint);
  --color-gold:        var(--topaz);
  --color-gold-dark:   var(--topaz-shade);
}