/* ============================================================
   Pick Me Up — Color tokens
   Three-tier: Primitive → Semantic (light) → Semantic (dark)
   Shadows live here too (they are theme-dependent).
   ============================================================ */

:root {
  /* --- Primitive: Teal (primary family) --- */
  --teal-100: #D7EAE4;
  --teal-300: #6FC2B0;
  --teal-600: #2E7D6B;
  --teal-700: #226B5B;
  --teal-900: #1E322E;

  /* --- Primitive: Coral (accent — use sparingly) --- */
  --coral-200: #F6C9B6;
  --coral-300: #F0A085;
  --coral-400: #E8896B;
  --coral-500: #D96E4F;
  --coral-700: #C2542F;
  --coral-950: #2C2622;

  /* --- Primitive: Neutral (warm) --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F5;
  --neutral-100: #F2EEE8;
  --neutral-200: #E3DED6;
  --neutral-400: #9A9489;
  --neutral-600: #5C6168;
  --neutral-900: #2A2D34;

  /* --- Primitive: Shade (dark-mode surfaces) --- */
  --shade-950:    #14181A;
  --shade-900:    #1E2429;
  --shade-800:    #28313A;
  --shade-border: #2E373D;
  --shade-muted:  #A8AEB2;
  --shade-disabled: #8A9099;
  --shade-text:   #ECEAE4;

  /* --- Primitive: Status --- */
  --status-info:         #2D6CA8;
  --status-info-light:   #7FB2E6;
  --status-warning:      #9A6212;
  --status-warning-light:#E2B85C;
  --status-crisis:       #B3261E;
  --status-crisis-light: #FF6B6B;

  /* --- Semantic (Light — default) --- */
  --color-bg:             var(--neutral-50);
  --color-surface:        var(--neutral-0);
  --color-surface-muted:  var(--neutral-100);
  --color-surface-alt:    var(--neutral-100); /* warm secondary surface: inactive tiles, ghost fill, wells */
  --color-border:         var(--neutral-200);
  --color-text:           var(--neutral-900);
  --color-text-muted:     var(--neutral-600);
  --color-text-disabled:  var(--neutral-400);
  --color-primary:        var(--teal-600);
  --color-primary-strong: var(--teal-700);
  --color-primary-tint:   var(--teal-100);
  --color-accent:         var(--coral-700);
  --color-accent-soft:    var(--coral-200);
  --color-success:        var(--teal-600);
  --color-info:           var(--status-info);
  --color-warning:        var(--status-warning);
  --color-crisis:         var(--status-crisis);
  --on-primary:           #FFFFFF;
  --on-accent:            #FFFFFF;
  --on-crisis:            #FFFFFF;

  /* --- Shadows (warm-tinted, not blue-gray) --- */
  --shadow-sm: 0 1px 3px rgba(40,30,15,.06);
  --shadow-md: 0 4px 14px -4px rgba(40,30,15,.12);
  --shadow-lg: 0 16px 36px -12px rgba(40,30,15,.22);
}

/* --- Dark Mode: OS-level --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             var(--shade-950);
    --color-surface:        var(--shade-900);
    --color-surface-muted:  var(--shade-800);
    --color-surface-alt:    rgba(255,255,255,.07);
    --color-border:         var(--shade-border);
    --color-text:           var(--shade-text);
    --color-text-muted:     var(--shade-muted);
    --color-text-disabled:  var(--shade-disabled);
    --color-primary:        var(--teal-300);
    --color-primary-strong: var(--teal-300);
    --color-primary-tint:   var(--teal-900);
    --color-accent:         var(--coral-300);
    --color-accent-soft:    var(--coral-950);
    --color-success:        var(--teal-300);
    --color-info:           var(--status-info-light);
    --color-warning:        var(--status-warning-light);
    --color-crisis:         var(--status-crisis-light);
    --on-primary: var(--shade-950);
    --on-accent:  var(--shade-950);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 6px 18px -6px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.6);
  }
}

/* --- Light Mode: forced via data attribute (overrides OS dark) --- */
[data-theme="light"] {
  --color-bg:             var(--neutral-50);
  --color-surface:        var(--neutral-0);
  --color-surface-muted:  var(--neutral-100);
  --color-surface-alt:    var(--neutral-100);
  --color-border:         var(--neutral-200);
  --color-text:           var(--neutral-900);
  --color-text-muted:     var(--neutral-600);
  --color-text-disabled:  var(--neutral-400);
  --color-primary:        var(--teal-600);
  --color-primary-strong: var(--teal-700);
  --color-primary-tint:   var(--teal-100);
  --color-accent:         var(--coral-700);
  --color-accent-soft:    var(--coral-200);
  --color-success:        var(--teal-600);
  --color-info:           var(--status-info);
  --color-warning:        var(--status-warning);
  --color-crisis:         var(--status-crisis);
  --on-primary:           #FFFFFF;
  --on-accent:            #FFFFFF;
  --on-crisis:            #FFFFFF;
  --shadow-sm: 0 1px 3px rgba(40,30,15,.06);
  --shadow-md: 0 4px 14px -4px rgba(40,30,15,.12);
  --shadow-lg: 0 16px 36px -12px rgba(40,30,15,.22);
}

/* --- Dark Mode: forced via data attribute --- */
[data-theme="dark"] {
  --color-bg:             var(--shade-950);
  --color-surface:        var(--shade-900);
  --color-surface-muted:  var(--shade-800);
  --color-surface-alt:    rgba(255,255,255,.07);
  --color-border:         var(--shade-border);
  --color-text:           var(--shade-text);
  --color-text-muted:     var(--shade-muted);
  --color-text-disabled:  var(--shade-disabled);
  --color-primary:        var(--teal-300);
  --color-primary-strong: var(--teal-300);
  --color-primary-tint:   var(--teal-900);
  --color-accent:         var(--coral-300);
  --color-accent-soft:    var(--coral-950);
  --color-success:        var(--teal-300);
  --color-info:           var(--status-info-light);
  --color-warning:        var(--status-warning-light);
  --color-crisis:         var(--status-crisis-light);
  --on-primary: var(--shade-950);
  --on-accent:  var(--shade-950);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 40px -12px rgba(0,0,0,.6);
}