/* ═══════════════════════════════════════════════════════
   LAYER 1 — Primitive palette
   Raw values only. Never reference these in component styles.
   ═══════════════════════════════════════════════════════ */
:root {
  /* Cream scale */
  --p-cream-50:  #fffdf9;
  --p-cream-100: #f6f3ec;
  --p-cream-200: #ece5d8;
  --p-cream-300: #eae3d6;
  --p-cream-400: #e7e0d2;

  /* Navy scale */
  --p-navy-100: #a6b0b8;
  --p-navy-200: #9aa3ab;
  --p-navy-300: #8a7e6d;
  --p-navy-400: #6b7884;
  --p-navy-500: #4a5862;
  --p-navy-600: #2b3741;
  --p-navy-700: #1b2730;

  /* Orange scale */
  --p-orange-100: #f2e7d7;
  --p-orange-200: #b08a55;
  --p-orange-300: #c66a2e;
  --p-orange-400: #a4641f;

  /* Dark theme primitives */
  --p-dark-bg:       #0f1a23;
  --p-dark-surface:  #16242f;
  --p-dark-deep:     #0c151c;
  --p-dark-text-1:   #e8edf1;
  --p-dark-text-2:   #c7d2db;
  --p-dark-text-3:   #8a99a6;
  --p-dark-text-4:   #7e8d99;
  --p-dark-orange:   #e08742;
  --p-dark-orange-l: #f0a567;
}

/* ═══════════════════════════════════════════════════════
   LAYER 2 — Semantic tokens (light theme / Direction A — Calm)
   Components always reference these, never Layer 1 directly.
   ═══════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --color-bg:      var(--p-cream-100);
  --color-surface: var(--p-cream-50);

  /* Borders & dividers */
  --color-border:    var(--p-cream-200);
  --color-separator: var(--p-cream-300);
  --color-track:     var(--p-cream-400);

  /* Text */
  --color-text-primary:   var(--p-navy-700);
  --color-text-secondary: var(--p-navy-400);
  --color-text-tertiary:  var(--p-navy-300);
  --color-text-muted:     var(--p-navy-200);
  --color-text-task:      var(--p-navy-600);
  --color-text-quote:     var(--p-navy-500);

  /* Accent — orange is brand-reserved: active state, completion, brand only */
  --color-accent:       var(--p-orange-300);
  --color-accent-dark:  var(--p-orange-400);
  --color-accent-light: var(--p-orange-100);
  --color-accent-muted: var(--p-orange-200);

  /* Navigation */
  --color-nav-bg:       var(--p-cream-50);
  --color-nav-border:   var(--p-cream-200);
  --color-nav-active:   var(--p-orange-300);
  --color-nav-inactive: var(--p-navy-100);
  --color-avatar-bg:    var(--p-navy-700);

  /* Elevation */
  --shadow-card:  0 22px 60px rgba(20, 30, 40, 0.16);
  --shadow-modal: 0 8px 32px rgba(20, 30, 40, 0.18);

  /* Shape */
  --radius-card:   12px;
  --radius-pill:   20px;
  --radius-screen: 16px;
}

/* ═══════════════════════════════════════════════════════
   LAYER 2 — Dark theme overrides
   Dark mode is deferred for V1 — palette defined here for
   completeness but not actively used until M? (TBD).
   ═══════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg:      var(--p-dark-bg);
  --color-surface: var(--p-dark-surface);

  /* Borders & dividers */
  --color-border:    rgba(255, 255, 255, 0.06);
  --color-separator: rgba(255, 255, 255, 0.05);
  --color-track:     #1e2f3b;

  /* Text */
  --color-text-primary:   var(--p-dark-text-1);
  --color-text-secondary: var(--p-dark-text-3);
  --color-text-tertiary:  var(--p-dark-text-4);
  --color-text-muted:     #6b7884;
  --color-text-task:      var(--p-dark-text-2);
  --color-text-quote:     var(--p-dark-text-3);

  /* Accent */
  --color-accent:       var(--p-dark-orange);
  --color-accent-dark:  var(--p-dark-orange-l);
  --color-accent-light: rgba(224, 135, 66, 0.14);
  --color-accent-muted: rgba(224, 135, 66, 0.35);

  /* Navigation */
  --color-nav-bg:       var(--p-dark-deep);
  --color-nav-border:   rgba(255, 255, 255, 0.06);
  --color-nav-active:   var(--p-dark-orange-l);
  --color-nav-inactive: var(--p-dark-text-4);
  --color-avatar-bg:    var(--p-dark-orange);

  /* Elevation */
  --shadow-card:  0 22px 60px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Shape — unchanged */
  --radius-card:   12px;
  --radius-pill:   20px;
  --radius-screen: 16px;
}

/* System preference fallback (before user explicitly chooses) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:      var(--p-dark-bg);
    --color-surface: var(--p-dark-surface);
    --color-border:    rgba(255, 255, 255, 0.06);
    --color-separator: rgba(255, 255, 255, 0.05);
    --color-track:     #1e2f3b;
    --color-text-primary:   var(--p-dark-text-1);
    --color-text-secondary: var(--p-dark-text-3);
    --color-text-tertiary:  var(--p-dark-text-4);
    --color-text-muted:     #6b7884;
    --color-text-task:      var(--p-dark-text-2);
    --color-text-quote:     var(--p-dark-text-3);
    --color-accent:       var(--p-dark-orange);
    --color-accent-dark:  var(--p-dark-orange-l);
    --color-accent-light: rgba(224, 135, 66, 0.14);
    --color-accent-muted: rgba(224, 135, 66, 0.35);
    --color-nav-bg:       var(--p-dark-deep);
    --color-nav-border:   rgba(255, 255, 255, 0.06);
    --color-nav-active:   var(--p-dark-orange-l);
    --color-nav-inactive: var(--p-dark-text-4);
    --color-avatar-bg:    var(--p-dark-orange);
    --shadow-card:  0 22px 60px rgba(0, 0, 0, 0.32);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
}