/* ==========================================================================
   Hearth AI - Design Tokens
   Calm, warm, premium. NOT Duolingo-clownish. NOT corporate-sterile.
   ========================================================================== */

:root {
  /* ---------- Color: Brand ---------- */

  /* Deep teal — the central hearth color. Trust, depth, growth. */
  --color-primary-50:  #E6F4F1;
  --color-primary-100: #C2E5DD;
  --color-primary-200: #94D0C3;
  --color-primary-300: #5FB8A6;
  --color-primary-400: #34A089;
  --color-primary-500: #0E7C66;  /* Brand primary */
  --color-primary-600: #0A6452;
  --color-primary-700: #074D40;
  --color-primary-800: #05362D;
  --color-primary-900: #021F1A;

  /* Terracotta — the ember accent. Warmth, intimacy, energy. */
  --color-accent-50:  #FBEDE6;
  --color-accent-100: #F5D2BE;
  --color-accent-200: #EDB191;
  --color-accent-300: #E08D63;
  --color-accent-400: #D9683A;  /* Brand accent */
  --color-accent-500: #C25A2E;
  --color-accent-600: #9C4723;
  --color-accent-700: #763519;
  --color-accent-800: #502310;
  --color-accent-900: #2A1208;

  /* Warm neutrals — paper, linen, stone */
  --color-paper-50:  #FAF7F2;   /* Page bg, light */
  --color-paper-100: #F4F0E8;
  --color-paper-200: #E8E1D4;
  --color-paper-300: #D5CBB7;
  --color-paper-400: #B8AB91;
  --color-paper-500: #948871;
  --color-paper-600: #736A57;
  --color-paper-700: #544E3F;
  --color-paper-800: #383327;
  --color-paper-900: #1C1913;

  /* ---------- Color: Semantic ---------- */

  --color-bg:           var(--color-paper-50);
  --color-bg-elevated:  #FFFFFF;
  --color-bg-soft:      var(--color-paper-100);
  --color-bg-inverse:   var(--color-primary-800);

  --color-text:         var(--color-paper-900);
  --color-text-soft:    var(--color-paper-700);
  --color-text-muted:   var(--color-paper-500);
  --color-text-inverse: var(--color-paper-50);
  --color-text-link:    var(--color-primary-600);

  --color-border:        var(--color-paper-200);
  --color-border-strong: var(--color-paper-300);
  --color-border-focus:  var(--color-primary-500);

  /* Semantic states — not loud, not alarming */
  --color-success:     #2E7D4F;
  --color-success-bg:  #E8F5EC;
  --color-warning:     #C58A1A;
  --color-warning-bg:  #FBF1DE;
  --color-danger:      #B8331A;   /* Brick red, used sparingly */
  --color-danger-bg:   #F8E5DF;
  --color-info:        var(--color-primary-500);
  --color-info-bg:     var(--color-primary-50);

  /* Crisis color — used ONLY for crisis resources screen.
     Distinct from generic danger. A warm amber, not alarm-red. */
  --color-crisis:        #C58A1A;
  --color-crisis-bg:     #FBF1DE;
  --color-crisis-text:   #6B4A0F;

  /* ---------- Typography ---------- */

  --font-family-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  --font-family-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-family-serif: 'Source Serif Pro', 'Lora', Georgia, serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  --font-family-arabic: 'Noto Naskh Arabic', 'Amiri', serif;

  /* Multilingual font fallbacks */
  --font-family-bahasa: var(--font-family-sans);
  --font-family-thai:   'Noto Sans Thai', var(--font-family-sans);
  --font-family-viet:   'Be Vietnam Pro', var(--font-family-sans);
  --font-family-fil:    var(--font-family-sans);
  --font-family-malay:  var(--font-family-sans);

  /* Font sizes — modular scale 1.250 (major third) */
  --font-size-2xs: 0.6875rem;  /* 11px */
  --font-size-xs:  0.75rem;    /* 12px */
  --font-size-sm:  0.875rem;   /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:  1.125rem;   /* 18px */
  --font-size-lg:  1.25rem;    /* 20px */
  --font-size-xl:  1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;   /* 30px */
  --font-size-3xl: 2.25rem;    /* 36px */
  --font-size-4xl: 3rem;       /* 48px */
  --font-size-5xl: 3.75rem;    /* 60px */

  /* Line heights */
  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Font weights */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Letter spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;
  --letter-spacing-caps:   0.08em;

  /* ---------- Spacing ---------- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-12: 6rem;      /* 96px */
  --space-16: 8rem;      /* 128px */

  /* ---------- Radius ---------- */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   32px;
  --radius-full:  9999px;

  /* ---------- Shadow ---------- */
  --shadow-xs:    0 1px 2px rgba(28, 25, 19, 0.04);
  --shadow-sm:    0 2px 4px rgba(28, 25, 19, 0.06), 0 1px 2px rgba(28, 25, 19, 0.04);
  --shadow-md:    0 4px 12px rgba(28, 25, 19, 0.08), 0 2px 4px rgba(28, 25, 19, 0.04);
  --shadow-lg:    0 8px 24px rgba(28, 25, 19, 0.10), 0 4px 8px rgba(28, 25, 19, 0.06);
  --shadow-xl:    0 16px 48px rgba(28, 25, 19, 0.12), 0 8px 16px rgba(28, 25, 19, 0.08);
  --shadow-2xl:   0 24px 64px rgba(28, 25, 19, 0.16);
  --shadow-inner: inset 0 2px 4px rgba(28, 25, 19, 0.06);

  /* Warm glow — for Ember / hot CTAs */
  --shadow-ember:    0 0 24px rgba(217, 104, 58, 0.25);
  --shadow-ember-lg: 0 0 48px rgba(217, 104, 58, 0.35);
  --shadow-hearth:   0 0 24px rgba(14, 124, 102, 0.20);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 0.6, 0.2);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;
  --duration-mystic:  1500ms;

  /* ---------- Layout ---------- */
  --container-narrow:  480px;
  --container-default: 640px;
  --container-wide:    960px;
  --container-max:     1200px;

  --header-height: 64px;
  --tab-bar-height: 72px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0);

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-sticky:  10;
  --z-overlay: 20;
  --z-modal:   30;
  --z-toast:   40;
  --z-crisis:  50;  /* Cannot be obscured */

  /* ---------- Ember state colors ---------- */
  /* The mascot Ember has 4 visible states, each tied to a color */
  --ember-dim:         var(--color-paper-400);
  --ember-glowing:     var(--color-accent-300);
  --ember-meditative:  var(--color-primary-400);
  --ember-golden:      var(--color-accent-400);
}

/* Dark mode (optional v1.1, but token-ready) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          #1A1814;
    --color-bg-elevated: #25221C;
    --color-bg-soft:     #211E18;
    --color-text:        #F4F0E8;
    --color-text-soft:   #C5BBA6;
    --color-text-muted:  #948871;
    --color-border:      #383327;
    --color-border-strong: #544E3F;
  }
}