/* ─────────────────────────────────────────────────────────────────────────
 * Apple HIG Design Tokens — Light Theme (default)
 * All semantic values reference these primitives so dark mode only needs
 * to override the semantic layer, not every individual rule.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Typography */
  --sf-pro: -apple-system, "SF Pro Display", "SF Pro Text",
            BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --sf-mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* System accent colours */
  --blue:   #007AFF;
  --green:  #34C759;
  --red:    #FF3B30;
  --orange: #FF9500;
  --yellow: #FFCC00;
  --purple: #AF52DE;
  --teal:   #5AC8FA;
  --indigo: #5856D6;
  --pink:   #FF2D55;

  /* Grey scale */
  --gray:  #8E8E93;
  --gray2: #AEAEB2;
  --gray3: #C7C7CC;
  --gray4: #D1D1D6;
  --gray5: #E5E5EA;
  --gray6: #F2F2F7;

  /* ── Semantic: Light ── */
  --label:           #000;
  --secondary-label: rgba(60, 60, 67, .6);
  --tertiary-label:  rgba(60, 60, 67, .3);
  --placeholder:     rgba(60, 60, 67, .3);

  --bg:          #F2F2F7;
  --bg2:         #FFFFFF;
  --bg3:         #F2F2F7;
  --grouped-bg:  #F2F2F7;
  --grouped-bg2: #FFFFFF;

  --separator: rgba(60, 60, 67, .18);
  --fill:      rgba(120, 120, 128, .20);
  --fill2:     rgba(120, 120, 128, .16);
  --fill3:     rgba(118, 118, 128, .12);

  /* Navbar glass */
  --navbar-bg: rgba(255, 255, 255, .72);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Layout */
  --navbar-h:  52px;
  --sidebar-w: 260px;
  --panel-w:   300px;
  --content-max: 780px;
}

/* ── Dark theme overrides ── */
[data-theme="dark"] {
  --label:           #FFF;
  --secondary-label: rgba(235, 235, 245, .6);
  --tertiary-label:  rgba(235, 235, 245, .3);
  --placeholder:     rgba(235, 235, 245, .3);

  --bg:          #000;
  --bg2:         #1C1C1E;
  --bg3:         #2C2C2E;
  --grouped-bg:  #000;
  --grouped-bg2: #1C1C1E;

  --separator: rgba(84, 84, 88, .6);
  --fill:      rgba(120, 120, 128, .36);
  --fill2:     rgba(120, 120, 128, .32);
  --fill3:     rgba(118, 118, 128, .24);

  --navbar-bg: rgba(28, 28, 30, .72);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.24);
  --shadow-md: 0 4px 16px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.24);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.48), 0 2px 8px rgba(0,0,0,.32);
}

/* Respect OS preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --label:           #FFF;
    --secondary-label: rgba(235, 235, 245, .6);
    --tertiary-label:  rgba(235, 235, 245, .3);
    --placeholder:     rgba(235, 235, 245, .3);
    --bg:          #000;
    --bg2:         #1C1C1E;
    --bg3:         #2C2C2E;
    --grouped-bg:  #000;
    --grouped-bg2: #1C1C1E;
    --separator: rgba(84, 84, 88, .6);
    --fill:      rgba(120, 120, 128, .36);
    --fill2:     rgba(120, 120, 128, .32);
    --fill3:     rgba(118, 118, 128, .24);
    --navbar-bg: rgba(28, 28, 30, .72);
  }
}