/* Chinchalla design tokens - the machine-readable half of the design system.
   Single source of truth for colour, type, shape and motion. Consumed by:
     apps/web   -> app/assets/css/tokens.css          (mapped to Tailwind in main.css)
     apps/auth  -> themes/chinchalla/login/resources/css/tokens.css
   Those are copies: edit THIS file, then run design/scripts/sync-tokens.sh.
   Decisions and their stability live in DESIGN-SYSTEM.md.

   Status: working (2026-10-05) - first palette for Chinchalla land, derived from the
   character reference art: plum ink, parchment paper, royal violet, dragon green, gold. */

:root {
  /* Brand (working) - royal violet with a dragon-green accent */
  --brand:        #4D3FAE;   /* primary actions; white on it 8.0:1 */
  --brand-hover:  #3D3190;
  --brand-soft:   #ECE8FB;   /* tinted backgrounds, selected states */
  --accent:       #2F7A4A;   /* secondary emphasis, links on paper (4.9:1) */
  --accent-soft:  #E8F5EC;

  /* Surfaces - parchment paper */
  --paper:        #FBF7F0;   /* page background */
  --surface:      #FFFFFF;   /* cards, panels */
  --surface-sunk: #F3EAD9;   /* wells, inactive tiles */

  /* Text - plum ink, the same ink the characters' eyes use */
  --ink:          #3A2A3F;   /* body text (12.4:1 on paper) */
  --muted:        #6E5A72;   /* secondary text; AA on paper, surface and sunk */
  --ink-on-brand: #FFFFFF;

  /* Lines */
  --rule:         rgba(58, 42, 63, 0.14);
  --rule-strong:  rgba(58, 42, 63, 0.28);
  --focus-ring:   #2F5FB3;

  /* Feedback - game and form states. Never rely on colour alone: pair with icon or text.
     --success is darker than --accent so the two never read as the same green. */
  --success:      #236B3E;   /* correct answer, level complete */
  --success-soft: #E3F3E6;
  --warning:      #9A5B0C;   /* hint used, time running low */
  --warning-soft: #FDF0D5;
  --danger:       #B8323F;   /* wrong answer, destructive action */
  --danger-soft:  #FBE3E5;
  --info:         #2F5FB3;
  --info-soft:    #E3EDFA;

  /* Rewards (working) - stars, badges, streaks. The fills are too light to stand alone
     on paper, so a reward icon always carries its -line outline (each clears 3:1). */
  --reward-gold:        #F2C14E;
  --reward-gold-line:   #A5832F;
  --reward-silver:      #CCD5E0;
  --reward-silver-line: #6B7684;
  --reward-bronze:      #C9824A;
  --reward-bronze-line: #915E35;

  /* World (working) - scene backgrounds: skies by time of day (plus the battle sky), hills, castle stone */
  --sky-dawn:   #F1E8F8;
  --sky-day:    #E3F0F9;
  --sky-dusk:   #FCEFE2;
  --sky-night:  #2C2442;
  --sky-ember:  #F8D5BE;   /* battle sky: the fire dragon's scenes */
  --hill-far:   #BFE3A8;
  --hill-near:  #9FD18C;
  --stone:      #CCD5E0;
  --stone-line: #7D8590;

  /* Art (working) - the illustration palette. Every fill has a -line outline at
     fill x 0.72 (RGB). SVG assets carry these as hex literals: a change here means
     re-deriving the art (see design/assets/ASSETS.md). */
  --art-skin-1: #FBE3CF;  --art-skin-1-line: #B5A395;
  --art-skin-2: #F8D9BF;  --art-skin-2-line: #B29C89;
  --art-skin-3: #DCA57C;  --art-skin-3-line: #9E7759;
  --art-skin-4: #B07A52;  --art-skin-4-line: #7F583B;
  --art-skin-5: #7D5136;  --art-skin-5-line: #5A3A27;

  --art-hair-brown:  #3D2619;  --art-hair-brown-line:  #2B1B12;
  --art-hair-auburn: #B4523A;  --art-hair-auburn-line: #813B29;
  --art-hair-blonde: #F2C14E;  --art-hair-blonde-line: #AE8B38;
  --art-hair-black:  #2A2228;  --art-hair-black-line:  #1E181D;
  --art-hair-night:  #2C2442;  --art-hair-night-line:  #1F192F;

  --art-gold:   #F2C14E;  --art-gold-line:   #AE8B38;
  --art-steel:  #CCD5E0;  --art-steel-line:  #9399A1;
  --art-iron:   #8D97A5;  --art-iron-line:   #666D77;
  --art-bronze: #C9824A;  --art-bronze-line: #915E35;

  --art-ruby:     #E0475B;  --art-ruby-line:     #A13342;
  --art-sapphire: #5B8CE6;  --art-sapphire-line: #4265A6;
  --art-emerald:  #47B97D;  --art-emerald-line:  #33855A;
  --art-amethyst: #9370D8;  --art-amethyst-line: #6A519C;

  --art-rose:     #EF7AA1;  --art-rose-line:     #AC5874;  --art-rose-light:     #F9B9CF;
  --art-marigold: #F5A62A;  --art-marigold-line: #B0781E;  --art-marigold-light: #FFD581;
  --art-royal:    #6A5AD0;  --art-royal-line:    #4C4196;
  --art-crimson:  #D9505A;  --art-crimson-line:  #9C3A41;
  --art-forest:   #3FA363;  --art-forest-line:   #2D7547;
  --art-leather:  #7A4B2A;  --art-leather-line:  #58361E;
  --art-linen:    #F7ECD0;  --art-linen-line:    #B2AA96;

  --art-dragon-green: #66C774;  --art-dragon-green-line: #498F54;
  --art-dragon-belly: #F6E6A8;  --art-dragon-belly-line: #B1A679;
  --art-dragon-wing:  #F6A560;  --art-dragon-wing-line:  #B17745;
  --art-dragon-sky:   #62C3DB;  --art-dragon-sky-line:   #468C9E;
  --art-dragon-blush: #FFDCEA;  --art-dragon-blush-line: #B89EA8;

  /* The fire dragon (final boss). Its own reds, so the sword panda's crimson scarf never reads as "dragon".
     Belly reuses --art-dragon-belly; the flame core reuses --art-marigold-light. */
  --art-dragon-fire:  #C9302C;  --art-dragon-fire-line:  #912320;   /* scales */
  --art-dragon-ember: #6B2737;  --art-dragon-ember-line: #4D1C28;   /* wings, horns, spikes, brows */
  --art-flame:        #FF7B2E;  --art-flame-line:        #B85921;   /* fire breath */

  --art-panda-rust:  #C8553D;  --art-panda-rust-line:  #903D2C;   /* red panda fur */
  --art-panda-cream: #F6E9D6;  --art-panda-cream-line: #B1A89A;   /* face mask, ear rims, tail rings */
  --art-panda-dark:  #4A2C24;  --art-panda-dark-line:  #35201A;   /* legs, tear marks, ear insides */

  --art-shade: #3A2A3F;   /* shading is ink laid over the fill at 0.12 opacity, never a new hex */
  --art-eye:   #3A2A3F;   /* same as --ink */
  --art-blush: #F4A0AE;   /* cheeks, drawn at 0.6 opacity */
  --art-mouth: #A34A5C;

  /* Typography (working) - Fredoka for display, Andika (built for early readers:
     single-storey a, distinct I l 1) for body. Loaded from Google Fonts on design pages. */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body:    "Andika", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.125rem;   /* 18px - never smaller for body copy; the youngest players read here */
  --text-lg:   1.375rem;
  --text-xl:   1.625rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-display: clamp(3rem, 9vw, 5.5rem);   /* cover and title screens only */
  --leading-body: 1.6;

  /* Shape */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(58, 42, 63, 0.06), 0 4px 12px rgba(58, 42, 63, 0.06);
  --shadow-lift: 0 8px 24px rgba(58, 42, 63, 0.12);

  /* Spacing - 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Interaction */
  --tap-min: 44px;          /* minimum touch target */

  /* Motion - feedback should feel immediate; celebrations may linger.
     --dur-idle and --dur-ambient drive looping scene life (a dragon bob, drifting clouds). */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sway:   cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
  --dur-idle:    2.4s;
  --dur-ambient: 60s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-idle: 0ms;
    --dur-ambient: 0ms;
  }
}