/* Little Twiglets — Colour system
   Base palette taken verbatim from the brand colour sheet, plus tints/shades
   derived in oklch to stay in the same warm, nursery-friendly family. */

:root{
  /* ---- Base brand palette (verbatim from brand sheet) ---- */
  --lt-tangerine: #f28e16;   /* robin's breast — primary accent */
  --lt-gold:      #d6ae18;   /* robin's body — secondary / sunshine */
  --lt-leaf:      #c3edb2;   /* soft leaf green — signature background */
  --lt-sage:      #929d72;   /* muted sage — calm supporting green */
  --lt-cocoa:     #3f170e;   /* deepest brown — primary ink */
  --lt-bark:      #665343;   /* warm mid brown — wing/tail */
  --lt-twig:      #614914;   /* dark olive brown — twiggy legs */

  /* ---- Tangerine ramp ---- */
  --lt-tangerine-50:  oklch(0.97 0.03 65);
  --lt-tangerine-100: oklch(0.93 0.06 65);
  --lt-tangerine-200: oklch(0.87 0.10 63);
  --lt-tangerine-300: oklch(0.80 0.14 60);
  --lt-tangerine-500: #f28e16;
  --lt-tangerine-600: oklch(0.63 0.15 56);
  --lt-tangerine-700: oklch(0.52 0.13 52);

  /* ---- Gold ramp ---- */
  --lt-gold-50:  oklch(0.97 0.03 92);
  --lt-gold-100: oklch(0.93 0.06 92);
  --lt-gold-200: oklch(0.88 0.09 92);
  --lt-gold-500: #d6ae18;
  --lt-gold-600: oklch(0.66 0.12 88);
  --lt-gold-700: #614914;

  /* ---- Leaf / green ramp ---- */
  --lt-leaf-50:  oklch(0.98 0.02 140);
  --lt-leaf-100: oklch(0.96 0.04 140);
  --lt-leaf-200: #c3edb2;
  --lt-leaf-300: oklch(0.84 0.09 138);
  --lt-sage-400: #929d72;
  --lt-sage-600: oklch(0.55 0.05 120);

  /* ---- Warm neutrals (cream → cocoa) ---- */
  --lt-cream:   oklch(0.985 0.012 78);   /* page background */
  --lt-sand:    oklch(0.955 0.020 78);   /* subtle surface */
  --lt-oat:     oklch(0.912 0.024 76);   /* borders / dividers */
  --lt-stone:   oklch(0.70 0.02 70);     /* muted lines */
  --lt-bark-500: #665343;
  --lt-cocoa-500: #3f170e;

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--lt-cream);
  --color-bg-alt:        var(--lt-sand);
  --color-bg-leaf:       var(--lt-leaf);
  --surface-card:        #ffffff;
  --surface-sunken:      var(--lt-sand);
  --surface-inverse:     var(--lt-cocoa);

  --text-heading:        var(--lt-cocoa);
  --text-body:           var(--lt-bark);
  --text-muted:          var(--lt-stone);
  --text-on-accent:      #ffffff;
  --text-on-leaf:        var(--lt-cocoa);
  --text-on-gold:        var(--lt-cocoa);

  --color-primary:       var(--lt-tangerine);
  --color-primary-hover: var(--lt-tangerine-600);
  --color-primary-press: var(--lt-tangerine-700);
  --color-secondary:     var(--lt-gold);
  --color-accent-green:  var(--lt-sage);

  --border-subtle:       var(--lt-oat);
  --border-strong:       var(--lt-stone);
  --border-focus:        var(--lt-tangerine);

  /* Semantic status (kept in-family, warm & gentle) */
  --status-success:      var(--lt-sage-600);
  --status-success-bg:   var(--lt-leaf-100);
  --status-warning:      var(--lt-gold-600);
  --status-warning-bg:   var(--lt-gold-50);
  --status-info:         var(--lt-bark);
  --status-info-bg:      var(--lt-sand);
}