/*
 * ═══════════════════════════════════════════════
 *  Theme Tokens  —  Premium Silver / Grey Theme
 * ═══════════════════════════════════════════════
 *
 *  WCAG 2.1 AA compliant contrast ratios
 *  Light mode: 4.5:1+ for normal text, 3:1+ for large text
 *  Dark mode:  4.5:1+ for normal text, 3:1+ for large text
 *
 *  :root        = light mode
 *  .dark        = dark mode
 *  @media print = print mode (optional)
 * ═══════════════════════════════════════════════
 */

:root {
  /* ─── Background & Surface ─── */
  --color-bg: #F2F2F5;
  --color-card: #FFFFFF;
  --color-system-background: #FFFFFF;
  --color-elevated: #FFFFFF;

  /* ─── Brand ─── */
  --color-primary: #5C5C5C;
  --color-silver-gradient: linear-gradient(to bottom,rgba(0,0,0,0.25) 0%, #e6e6e6 100%);
  --color-primary-light: #EBEBEB;
  --color-primary-dark: #3A3A3A;
  --color-accent: #2563EB;           /* Subtle blue accent for interactive elements */

  /* ─── Semantic ─── */
  --color-destructive: #DC2626;    /* 5.4:1 on white, 4.6:1 on #F2F2F5 */
  --color-success: #059669;        /* 5.2:1 on white */
  --color-warning: #D97706;        /* 3.7:1 on white (large text ok) */
  --color-info: #2563EB;

  /* ─── Text ─── */
  --color-label: #111111;          /* 15.8:1 on white — strong headings */
  --color-secondary-label: #374151; /* 7.4:1 on white — body text */
  --color-tertiary-label: #6B7280;  /* 4.6:1 on white — captions, meta */
  --color-quaternary-label: #9CA3AF; /* 2.4:1 — disabled, placeholders only */

  /* ─── Borders ─── */
  --color-separator: #E5E7EB;
  --color-opaque-separator: #D1D5DB;
  --color-fill: #E5E7EB;
  --color-input-background: #FFFFFF;
  --color-input-border: #D1D5DB;
  --color-input-border-focus: #2563EB;

  /* ─── Landing Hero ─── */
  --color-landing-hero-text: #111111;
  --color-landing-hero-subtext: #374151;

  /* ─── Typography ─── */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* ─── Transitions ─── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Dark Mode ─── */
.dark {
  /* ─── Background & Surface ─── */
  --color-bg: #0F0F12;
  --color-card-solid: #18181B;
  --color-card: #18181BA0;
  --color-system-background: #000000;
  --color-elevated: #1F1F23;

  /* ─── Brand ─── */
  /*--color-primary: #E5E5E5;*/
  --color-primary: #BFA27A;
  --color-primary-light: #27272A;
  --color-primary-dark: #FFFFFF;
  --color-accent: #60A5FA;           /* Brighter blue for dark mode */

  /* ─── Semantic ─── */
  --color-destructive: #EF4444;    /* 5.1:1 on #18181B */
  --color-success: #34D399;        /* 6.2:1 on #18181B */
  --color-warning: #FBBF24;
  --color-info: #60A5FA;

  /* ─── Text ─── */
  --color-label: #FAFAFA;          /* 15.5:1 on #18181B */
  --color-secondary-label: #E4E4E7; /* 11.2:1 on #18181B */
  --color-tertiary-label: #A1A1AA;  /* 5.4:1 on #18181B */
  --color-quaternary-label: #71717A; /* 3.1:1 — disabled, placeholders */

  /* ─── Borders ─── */
  --color-separator: #27272A;
  --color-opaque-separator: #3F3F46;
  --color-fill: #27272A;
  --color-input-background: #18181B;
  --color-input-border: #3F3F46;
  --color-input-border-focus: #60A5FA;

  /* ─── Landing Hero ─── */
  --color-landing-hero-text: #FAFAFA;
  --color-landing-hero-subtext: #71717A;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* ─── Print Mode ─── */
@media print {
  :root, .dark {
    --color-bg: #FFFFFF;
    --color-card: #FFFFFF;
    --color-label: #000000;
    --color-secondary-label: #333333;
    --color-tertiary-label: #666666;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}
.grouped-item {
    background-color: var(--color-card-solid);
}
.zinc-toggle-knob {
    border-radius: var(--radius-sm);
}