/* ============================================================
   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);
  --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.72);
  --glass-bg-sidebar: rgba(242, 242, 247, 0.78);
  --glass-bg-card:    rgba(255, 255, 255, 0.85);
  --glass-bg-toolbar: rgba(249, 249, 249, 0.82);

  --glass-border-outer: rgba(0, 0, 0, 0.10);
  --glass-border-inner: rgba(0, 0, 0, 0.06);
  --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --glass-shine-mid:    rgba(255, 255, 255, 0.72);
  --glass-shadow:       0 12px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  --glass-blur:         blur(24px) saturate(180%);

  /* ---- 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.98);
  --control-bg-hover: #FFFFFF;
  --control-border:   rgba(0, 0, 0, 0.12);
  --control-shadow:   0 1px 2px rgba(0, 0, 0, 0.05);
  --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.04);
  --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);

  /* ---- Z-index layers ---- */
  --z-sidebar:   100;
  --z-toolbar:   200;
  --z-dropdown:  500;
  --z-modal:     900;
  --z-toast:    1000;
  --z-popup:    1100;
}

/* ============================================================
   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);
  --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(14, 14, 16, 0.92);  /* → ~#0E0E10 */
  --glass-bg-sidebar: rgba(6, 6, 8, 0.94);     /* quase preto absoluto */
  --glass-bg-card:    rgba(22, 22, 24, 0.92);  /* → ~#161618 */
  --glass-bg-toolbar: rgba(14, 14, 16, 0.90);

  /* ---- Borders + highlights ---- */
  --glass-border-outer: rgba(255, 255, 255, 0.18);
  --glass-border-inner: rgba(255, 255, 255, 0.08);
  --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-shine-mid:    rgba(255, 255, 255, 0.22);
  --glass-shadow:       0 24px 70px rgba(0, 0, 0, 0.70), 0 6px 20px rgba(0, 0, 0, 0.38);

  /* ---- 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.24);
  --control-bg-hover: rgba(118, 118, 128, 0.40);
  --control-border:   rgba(255, 255, 255, 0.14);
  --control-shadow:   0 1px 3px rgba(0, 0, 0, 0.45);
  --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.08);
  --divider:   rgba(84, 84, 88, 0.60);
  --divider-opaque: #38383A;

  /* ---- 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);
}