/* ═══════════════════════════════════════════════
   PORTERS APP — DESIGN TOKENS
   Single source of truth for all visual values.
   Add new tokens here, never inline.
═══════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg:           #f5f5f7;
  --bg-card:      #ffffff;
  --bg-sidebar:   rgba(255,255,255,0.78);
  --bg-input:     #ffffff;
  --bg-hover:     rgba(0,0,0,0.04);
  --bg-pressed:   rgba(0,0,0,0.08);

  /* Borders */
  --border:       #d2d2d7;
  --border-light: rgba(0,0,0,0.06);

  /* Text */
  --text:         #1d1d1f;
  --text-2:       #6e6e73;
  --text-3:       #aeaeb2;

  /* Brand — teal gradient from logo */
  --teal-hi:      #2dd4bf;
  --teal-lo:      #0d9488;
  --teal-grad:    linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%);
  --teal-soft:    rgba(13,148,136,0.08);
  --teal-border:  rgba(13,148,136,0.22);
  --teal-text:    #0d7a6e;

  /* Status — Apple system palette */
  --green:        #28cd41;
  --green-bg:     rgba(40,205,65,.08);
  --green-border: rgba(40,205,65,.25);
  --amber:        #f59e0b;
  --amber-bg:     rgba(245,158,11,.08);
  --amber-border: rgba(245,158,11,.25);
  --red:          #ef4444;
  --red-bg:     rgba(239,68,68,.08);
  --red-border:   rgba(239,68,68,.25);

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.08);
  --shadow-panel: -24px 0 48px rgba(0,0,0,.10);

  /* Geometry */
  --r:        10px;
  --r-lg:     14px;
  --r-xl:     18px;

  /* Layout */
  --sidebar-w: 232px;
  --panel-w:   460px;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg:           #0f1115;
  --bg-card:      #1c1c1e;
  --bg-sidebar:   rgba(24,24,27,0.85);
  --bg-input:     #2c2c2e;
  --bg-hover:     rgba(255,255,255,0.06);
  --bg-pressed:   rgba(255,255,255,0.10);

  --border:       rgba(255,255,255,0.09);
  --border-light: rgba(255,255,255,0.05);

  --text:         #f2f2f7;
  --text-2:       #98989d;
  --text-3:       #48484a;

  --teal-soft:    rgba(45,212,191,0.10);
  --teal-border:  rgba(45,212,191,0.28);
  --teal-text:    #2dd4bf;

  --green-bg:     rgba(40,205,65,.12);
  --green-border: rgba(40,205,65,.30);
  --amber-bg:     rgba(245,158,11,.12);
  --amber-border: rgba(245,158,11,.30);
  --red-bg:       rgba(239,68,68,.12);
  --red-border:   rgba(239,68,68,.30);

  --shadow-card:  0 1px 3px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.10);
  --shadow-panel: -24px 0 48px rgba(0,0,0,.40);
}