/* ============================================================
   DESIGN TOKENS — iOS / macOS System Colors
   Referência: Apple HIG (Human Interface Guidelines)
   - systemBackground hierarchy (primary / secondary / tertiary)
   - label hierarchy (primary / secondary / tertiary / quaternary)
   - systemFill / opaqueSeparator / System Materials
   ============================================================ */

:root {
  /* ---- Font (iOS / macOS system stack) ---- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  /* ============================================================
     LIGHT THEME — iOS Light System Colors (default)
     ============================================================ */

  /* ---- System Tint Colors (Light) ---- */
  --accent:          #007AFF;   /* systemBlue */
  --accent-rgb:      0, 122, 255;
  --accent-hover:    #006CE6;
  --accent-ring:     rgba(var(--accent-rgb), 0.4);
  --on-accent:       #ffffff;   /* texto/ícones sobre --accent */
  --on-accent-rgb:   255, 255, 255;
  --on-accent-soft:  rgba(255, 255, 255, 0.78);
  --color-green:     #34C759;   /* systemGreen */
  --color-green-rgb: 52, 199, 89;
  --color-red:       #FF3B30;   /* systemRed */
  --color-red-rgb:   255, 59, 48;
  --color-yellow:    #FFCC00;   /* systemYellow */
  --color-yellow-rgb:255, 204, 0;
  --color-orange:    #FF9500;   /* systemOrange */
  --color-orange-rgb:255, 149, 0;
  --color-purple:    #AF52DE;   /* systemPurple */
  --color-purple-rgb:175, 82, 222;
  --color-indigo:    #5856D6;   /* systemIndigo */
  --color-indigo-rgb:88, 86, 214;
  --color-pink:      #FF2D55;   /* systemPink */
  --color-pink-rgb:  255, 45, 85;
  --color-teal:      #30B0C7;   /* systemTeal */
  --color-teal-rgb:  48, 176, 199;

  /* ---- Background hierarchy (Light) ---- */
  /* systemBackground:           #FFFFFF
     secondarySystemBackground:  #F2F2F7
     tertiarySystemBackground:   #FFFFFF                             */
  --bg-color:         #F2F2F7;                 /* systemGroupedBackground */
  --bg-elevated:      #FFFFFF;                 /* elevated surface */

  /* ---- Materials / Glass (Light) ---- */
  --glass-bg-window:  rgba(255, 255, 255, 0.58);
  --glass-bg-sidebar: rgba(242, 242, 247, 0.62);
  --glass-bg-card:    rgba(255, 255, 255, 0.68);
  --glass-bg-toolbar: rgba(249, 249, 249, 0.66);

  --glass-border-outer: rgba(0, 0, 0, 0.14);
  --glass-border-inner: rgba(0, 0, 0, 0.09);
  --glass-highlight:    inset 0 1px 0 rgba(0, 0, 0, 0.05);
  --glass-shine-mid:    rgba(0, 0, 0, 0.09);
  --glass-shadow:       0 18px 50px rgba(0, 0, 0, 0.10), 0 2px 10px rgba(0, 0, 0, 0.05);
  --glass-blur:         blur(32px) saturate(190%);

  /* ---- Label hierarchy (Light) ---- */
  /* label:           #000000
     secondaryLabel:  rgba(60, 60, 67, 0.60)
     tertiaryLabel:   rgba(60, 60, 67, 0.30)
     quaternaryLabel: rgba(60, 60, 67, 0.18)                         */
  --text-primary:    #000000;
  --text-secondary:  rgba(60, 60, 67, 0.60);
  --text-tertiary:   rgba(60, 60, 67, 0.30);
  --text-quaternary: rgba(60, 60, 67, 0.18);

  /* ---- systemFill hierarchy (Light) ---- */
  /* systemFill:            rgba(120,120,128,0.20)
     secondarySystemFill:   rgba(120,120,128,0.16)
     tertiarySystemFill:    rgba(118,118,128,0.12)
     quaternarySystemFill:  rgba(116,116,128,0.08)                   */
  --control-bg:       rgba(255, 255, 255, 0.72);
  --control-bg-hover: rgba(255, 255, 255, 0.92);
  --control-border:   rgba(0, 0, 0, 0.14);
  --control-shadow:   0 1px 2px rgba(0, 0, 0, 0.06);
  --fill-primary:     rgba(120, 120, 128, 0.20);
  --fill-secondary:   rgba(120, 120, 128, 0.16);
  --fill-tertiary:    rgba(118, 118, 128, 0.12);

  /* ---- Separators (Light) ---- */
  /* separator:       rgba(60,60,67,0.29)
     opaqueSeparator: #C6C6C8                                        */
  --row-hover: rgba(0, 0, 0, 0.05);
  --divider:   rgba(60, 60, 67, 0.18);
  --divider-opaque: #C6C6C8;

  /* ---- Badges ---- */
  --badge-success-bg:  rgba(var(--color-green-rgb), 0.15);
  --badge-warning-bg:  rgba(var(--color-yellow-rgb), 0.18);
  --badge-error-bg:    rgba(var(--color-red-rgb), 0.15);
  --badge-info-bg:     rgba(var(--accent-rgb), 0.12);
  --badge-promo-bg:    rgba(var(--color-purple-rgb), 0.15);

  /* ---- Scrollbar ---- */
  --scrollbar-thumb:       rgba(0, 0, 0, 0.22);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.38);

  /* ---- Motion ---- */
  --ease-spring:  cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Ambient aura (backdrop blobs) — preto sóbrio no light ---- */
  --aura-blob-1: radial-gradient(closest-side, rgba(0, 0, 0, 0.10), transparent 70%);
  --aura-blob-2: radial-gradient(closest-side, rgba(0, 0, 0, 0.07), transparent 70%);
  --aura-blob-3: radial-gradient(closest-side, rgba(0, 0, 0, 0.05), transparent 70%);

  /* ---- Z-index layers ---- */
  --z-sidebar:        100;
  --z-toolbar:        200;
  --z-dropdown:       500;
  --z-modal:          900;
  --z-toast:         1000;
  --z-popup:         1100;
  --z-loading:       9999;
  /* Video player (local ao player, não compete com modal) */
  --z-video-overlay:   20;
  --z-video-controls:  50;

  /* ---- Glass blur hierarchy ---- */
  /* low  → dropdowns, tooltips (elementos flutuantes pequenos) */
  /* mid  → cards, list items (superfícies de conteúdo)        */
  /* (--glass-blur) → modais, sidebar, overlays (mais elevado) */
  --glass-blur-low: blur(20px) saturate(180%);
  --glass-blur-mid: blur(28px) saturate(190%);

  /* ---- Surface token ---- */
  /* background padrão de superfícies card-like que não usam glass-bg diretamente */
  --surface: var(--glass-bg-card);

  /* ---- List item tokens ---- */
  --list-item-padding: 12px 16px;
  --list-item-radius:  10px;
  --list-item-gap:     12px;
}

/* ============================================================
   DARK THEME — iOS Dark Mode (OLED-friendly)
   Background hierarchy empilhada sobre preto puro, como em
   Settings.app / Notes.app / Mail.app no iOS.
   ============================================================ */

:root[data-theme="dark"] {
  /* ---- System Tint Colors (Dark — variantes luminosas) ---- */
  --accent:          #0A84FF;   /* systemBlue / Dark */
  --accent-rgb:      10, 132, 255;
  --accent-hover:    #409CFF;
  --accent-ring:     rgba(var(--accent-rgb), 0.45);
  --on-accent:       #ffffff;
  --on-accent-rgb:   255, 255, 255;
  --on-accent-soft:  rgba(255, 255, 255, 0.82);
  --color-green:     #30D158;   /* systemGreen / Dark */
  --color-green-rgb: 48, 209, 88;
  --color-red:       #FF453A;   /* systemRed / Dark */
  --color-red-rgb:   255, 69, 58;
  --color-yellow:    #FFD60A;   /* systemYellow / Dark */
  --color-yellow-rgb:255, 214, 10;
  --color-orange:    #FF9F0A;   /* systemOrange / Dark */
  --color-orange-rgb:255, 159, 10;
  --color-purple:    #BF5AF2;   /* systemPurple / Dark */
  --color-purple-rgb:191, 90, 242;
  --color-indigo:    #5E5CE6;   /* systemIndigo / Dark */
  --color-indigo-rgb:94, 92, 230;
  --color-pink:      #FF375F;   /* systemPink / Dark */
  --color-pink-rgb:  255, 55, 95;
  --color-teal:      #40C8E0;   /* systemTeal / Dark */
  --color-teal-rgb:  64, 200, 224;

  /* ---- Background hierarchy (Dark) ---- */
  /* systemBackground:           #000000 (OLED puro)
     secondarySystemBackground:  #1C1C1E
     tertiarySystemBackground:   #2C2C2E                             */
  --bg-color:         #000000;                 /* systemBackground */
  --bg-elevated:      #1C1C1E;                 /* secondarySystemBackground */

  /* ---- Materials / Glass (Dark) — OLED-first ----
     Superfícies bem escuras para um look unificado sobre #000.
     Hierarquia preservada: sidebar (mais escura) < window/toolbar < card. */
  --glass-bg-window:  rgba(20, 20, 22, 0.66);
  --glass-bg-sidebar: rgba(10, 10, 12, 0.72);
  --glass-bg-card:    rgba(28, 28, 30, 0.62);
  --glass-bg-toolbar: rgba(20, 20, 22, 0.62);

  /* ---- Borders + highlights ---- */
  --glass-border-outer: rgba(255, 255, 255, 0.09);
  --glass-border-inner: rgba(255, 255, 255, 0.045);
  --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shine-mid:    rgba(255, 255, 255, 0.14);
  --glass-shadow:       0 28px 80px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.30);

  /* ---- Label hierarchy (Dark) ---- */
  /* label:           #FFFFFF
     secondaryLabel:  rgba(235,235,245,0.60)
     tertiaryLabel:   rgba(235,235,245,0.30)
     quaternaryLabel: rgba(235,235,245,0.18)                         */
  --text-primary:    #FFFFFF;
  --text-secondary:  rgba(235, 235, 245, 0.60);
  --text-tertiary:   rgba(235, 235, 245, 0.30);
  --text-quaternary: rgba(235, 235, 245, 0.18);

  /* ---- systemFill hierarchy (Dark) ---- */
  /* systemFill:            rgba(120,120,128,0.36)
     secondarySystemFill:   rgba(120,120,128,0.32)
     tertiarySystemFill:    rgba(118,118,128,0.24)
     quaternarySystemFill:  rgba(118,118,128,0.18)                   */
  --control-bg:       rgba(118, 118, 128, 0.18);
  --control-bg-hover: rgba(118, 118, 128, 0.30);
  --control-border:   rgba(255, 255, 255, 0.08);
  --control-shadow:   0 1px 3px rgba(0, 0, 0, 0.32);
  --fill-primary:     rgba(120, 120, 128, 0.36);
  --fill-secondary:   rgba(120, 120, 128, 0.32);
  --fill-tertiary:    rgba(118, 118, 128, 0.24);

  /* ---- Separators (Dark) ---- */
  /* separator:       rgba(84,84,88,0.60)
     opaqueSeparator: #38383A                                        */
  --row-hover: rgba(255, 255, 255, 0.05);
  --divider:   rgba(84, 84, 88, 0.32);
  --divider-opaque: #2C2C2E;

  /* ---- Badges (Dark = tons saturados) ---- */
  --badge-success-bg:  rgba(var(--color-green-rgb), 0.22);
  --badge-warning-bg:  rgba(var(--color-yellow-rgb), 0.22);
  --badge-error-bg:    rgba(var(--color-red-rgb), 0.22);
  --badge-info-bg:     rgba(var(--accent-rgb), 0.22);
  --badge-promo-bg:    rgba(var(--color-purple-rgb), 0.22);

  /* ---- Scrollbar ---- */
  --scrollbar-thumb:       rgba(255, 255, 255, 0.24);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.42);

  /* ---- Ambient aura (Dark) — branco sóbrio sobre o preto ---- */
  --aura-blob-1: radial-gradient(closest-side, rgba(255, 255, 255, 0.10), transparent 70%);
  --aura-blob-2: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent 70%);
  --aura-blob-3: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent 70%);
}

/* ============================================================
   PALETTE: ZINC (monocromática, cool gray — escala Tailwind zinc)
   Sobrescreve tokens do default (iOS) quando data-palette="zinc".
   Cores semânticas (red/green/yellow...) permanecem inalteradas
   para preservar significado de badges/estados.
   ============================================================ */

:root[data-palette="zinc"] {
  /* ---- Accent monocromático (preto grafite) ---- */
  --accent:          #27272a;   /* zinc-800 */
  --accent-rgb:      39, 39, 42;
  --accent-hover:    #18181b;   /* zinc-900 */
  --accent-ring:     rgba(39, 39, 42, 0.35);
  --on-accent:       #fafafa;   /* zinc-50 sobre accent escuro */
  --on-accent-rgb:   250, 250, 250;
  --on-accent-soft:  rgba(250, 250, 250, 0.78);

  /* ---- Backgrounds ---- */
  --bg-color:        #fafafa;   /* zinc-50  */
  --bg-elevated:     #ffffff;

  /* ---- Materials / Glass ---- */
  --glass-bg-window:  rgba(244, 244, 245, 0.70);   /* zinc-100 */
  --glass-bg-sidebar: rgba(228, 228, 231, 0.72);   /* zinc-200 */
  --glass-bg-card:    rgba(255, 255, 255, 0.72);
  --glass-bg-toolbar: rgba(250, 250, 250, 0.70);

  --glass-border-outer: rgba(24, 24, 27, 0.16);
  --glass-border-inner: rgba(24, 24, 27, 0.10);
  --glass-highlight:    inset 0 1px 0 rgba(24, 24, 27, 0.05);
  --glass-shine-mid:    rgba(24, 24, 27, 0.10);
  --glass-shadow:       0 18px 50px rgba(9, 9, 11, 0.08), 0 2px 10px rgba(9, 9, 11, 0.04);

  /* ---- Labels ---- */
  --text-primary:    #09090b;                    /* zinc-950 */
  --text-secondary:  rgba(24, 24, 27, 0.62);
  --text-tertiary:   rgba(24, 24, 27, 0.38);
  --text-quaternary: rgba(24, 24, 27, 0.20);

  /* ---- Fills ---- */
  --control-bg:       rgba(244, 244, 245, 0.85);
  --control-bg-hover: rgba(228, 228, 231, 0.95);
  --control-border:   rgba(24, 24, 27, 0.14);
  --control-shadow:   0 1px 2px rgba(9, 9, 11, 0.05);
  --fill-primary:     rgba(82, 82, 91, 0.18);     /* zinc-600 */
  --fill-secondary:   rgba(82, 82, 91, 0.14);
  --fill-tertiary:    rgba(82, 82, 91, 0.10);

  /* ---- Separators ---- */
  --row-hover:      rgba(24, 24, 27, 0.05);
  --divider:        rgba(24, 24, 27, 0.10);
  --divider-opaque: #e4e4e7;                      /* zinc-200 */

  /* ---- Badges (info/promo em zinc; red/green/yellow mantêm padrão) ---- */
  --badge-info-bg:  rgba(39, 39, 42, 0.10);
  --badge-promo-bg: rgba(82, 82, 91, 0.14);

  /* ---- Scrollbar ---- */
  --scrollbar-thumb:       rgba(24, 24, 27, 0.22);
  --scrollbar-thumb-hover: rgba(24, 24, 27, 0.40);

  /* ---- Aura ---- */
  --aura-blob-1: radial-gradient(closest-side, rgba(24, 24, 27, 0.10), transparent 70%);
  --aura-blob-2: radial-gradient(closest-side, rgba(24, 24, 27, 0.07), transparent 70%);
  --aura-blob-3: radial-gradient(closest-side, rgba(24, 24, 27, 0.05), transparent 70%);
}

:root[data-palette="zinc"][data-theme="dark"] {
  /* ---- Accent monocromático (branco gelo) ---- */
  --accent:          #e4e4e7;   /* zinc-200 */
  --accent-rgb:      228, 228, 231;
  --accent-hover:    #f4f4f5;   /* zinc-100 */
  --accent-ring:     rgba(228, 228, 231, 0.35);
  --on-accent:       #09090b;   /* zinc-950 sobre accent claro */
  --on-accent-rgb:   9, 9, 11;
  --on-accent-soft:  rgba(9, 9, 11, 0.78);

  /* ---- Backgrounds ---- */
  --bg-color:        #09090b;   /* zinc-950 */
  --bg-elevated:     #18181b;   /* zinc-900 */

  /* ---- Materials / Glass ---- */
  --glass-bg-window:  rgba(24, 24, 27, 0.66);     /* zinc-900 */
  --glass-bg-sidebar: rgba(9, 9, 11, 0.72);       /* zinc-950 */
  --glass-bg-card:    rgba(39, 39, 42, 0.62);     /* zinc-800 */
  --glass-bg-toolbar: rgba(24, 24, 27, 0.62);

  --glass-border-outer: rgba(244, 244, 245, 0.09);
  --glass-border-inner: rgba(244, 244, 245, 0.045);
  --glass-highlight:    inset 0 1px 0 rgba(244, 244, 245, 0.06);
  --glass-shine-mid:    rgba(244, 244, 245, 0.12);
  --glass-shadow:       0 28px 80px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.30);

  /* ---- Labels ---- */
  --text-primary:    #fafafa;                     /* zinc-50 */
  --text-secondary:  rgba(244, 244, 245, 0.60);
  --text-tertiary:   rgba(244, 244, 245, 0.32);
  --text-quaternary: rgba(244, 244, 245, 0.18);

  /* ---- Fills ---- */
  --control-bg:       rgba(63, 63, 70, 0.50);     /* zinc-700 */
  --control-bg-hover: rgba(82, 82, 91, 0.60);     /* zinc-600 */
  --control-border:   rgba(244, 244, 245, 0.08);
  --control-shadow:   0 1px 3px rgba(0, 0, 0, 0.32);
  --fill-primary:     rgba(161, 161, 170, 0.28);  /* zinc-400 */
  --fill-secondary:   rgba(161, 161, 170, 0.22);
  --fill-tertiary:    rgba(161, 161, 170, 0.16);

  /* ---- Separators ---- */
  --row-hover:      rgba(244, 244, 245, 0.05);
  --divider:        rgba(244, 244, 245, 0.12);
  --divider-opaque: #27272a;                      /* zinc-800 */

  /* ---- Badges ---- */
  --badge-info-bg:  rgba(228, 228, 231, 0.14);
  --badge-promo-bg: rgba(161, 161, 170, 0.20);

  /* ---- Scrollbar ---- */
  --scrollbar-thumb:       rgba(244, 244, 245, 0.22);
  --scrollbar-thumb-hover: rgba(244, 244, 245, 0.40);

  /* ---- Aura ---- */
  --aura-blob-1: radial-gradient(closest-side, rgba(244, 244, 245, 0.08), transparent 70%);
  --aura-blob-2: radial-gradient(closest-side, rgba(244, 244, 245, 0.05), transparent 70%);
  --aura-blob-3: radial-gradient(closest-side, rgba(244, 244, 245, 0.03), transparent 70%);
}