/**
 * Da'at Tec Design System — Design Tokens
 * Supports dark + light themes via [data-theme]
 */

:root {
  /* ——— Accents (shared) ——— */
  --color-accent: #E5B93C;
  --color-accent-light: #F0C95A;
  --color-accent-dark: #C49A22;
  --color-accent-secondary: #5B8DEF;

  /* ——— Typography ——— */
  --font-display:
    "Syne",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  --font-sans:
    "Manrope",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-mono:
    "SF Mono",
    "Cascadia Code",
    "Segoe UI Mono",
    Consolas,
    monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;
  --text-5xl: 4.25rem;
  --text-6xl: 5.5rem;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ——— Spacing ——— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* ——— Layout ——— */
  --container-max: 74rem;
  --container-narrow: 44rem;
  --container-wide: 84rem;
  --container-padding: 1.5rem;

  --header-height: 4.75rem;
  --header-height-scrolled: 4.25rem;

  /* ——— Radius ——— */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  --border-width: 1px;

  /* ——— Motion ——— */
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 450ms;
  --duration-slower: 700ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ——— Z-index ——— */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ——— Dark theme (default) ——— */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #06080D;
  --color-primary-light: #0C1018;
  --color-primary-muted: #151B26;

  --color-accent-soft: rgba(229, 185, 60, 0.12);
  --color-accent-secondary-soft: rgba(91, 141, 239, 0.14);

  --color-background: #06080D;
  --color-surface: #0C1018;
  --color-surface-elevated: #121821;
  --color-surface-hover: #181F2B;
  --color-surface-dark: #03050A;
  --color-surface-light: #F4F6F9;
  --color-surface-light-muted: #E8ECF2;

  --color-text: #F3F5F8;
  --color-text-muted: #9AA3B5;
  --color-text-subtle: #6B7385;
  --color-text-inverse: #0A0E14;
  --color-text-inverse-muted: #4B5565;
  --color-text-on-light: #10141C;
  --color-text-on-light-muted: #5B6472;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-light: #D8DEE8;

  --color-success: #3DDC97;
  --color-success-bg: rgba(61, 220, 151, 0.12);
  --color-error: #FF6B6B;
  --color-error-bg: rgba(255, 107, 107, 0.12);
  --color-focus: #E5B93C;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 60px rgba(229, 185, 60, 0.15);
  --shadow-focus: 0 0 0 3px rgba(229, 185, 60, 0.35);

  --header-bg: rgba(6, 8, 13, 0.55);
  --header-bg-scrolled: rgba(6, 8, 13, 0.88);
  --nav-mobile-bg: rgba(6, 8, 13, 0.97);
  --overlay-soft: rgba(255, 255, 255, 0.03);
  --overlay-medium: rgba(255, 255, 255, 0.05);
  --grid-line: rgba(255, 255, 255, 0.035);
  --hero-glow-gold: rgba(229, 185, 60, 0.16);
  --hero-glow-blue: rgba(91, 141, 239, 0.12);
  --btn-ghost-bg: rgba(255, 255, 255, 0.04);
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.08);
  --form-bg: rgba(255, 255, 255, 0.03);
  --form-bg-focus: rgba(255, 255, 255, 0.05);
  --platform-bar-bg: rgba(0, 0, 0, 0.25);
  --platform-rail-bg: rgba(0, 0, 0, 0.18);
  --logo-footer-bg: rgba(255, 255, 255, 0.96);
  --hero-bg: #06080D;
  --hero-title-gradient: linear-gradient(105deg, var(--color-accent-light) 0%, #fff 40%, #9ec0ff 100%);
  --footer-text: #9AA3B5;
  --footer-heading: #F3F5F8;
  --theme-icon-sun-display: none;
  --theme-icon-moon-display: block;
}

/* ——— Light theme ——— */
[data-theme="light"] {
  color-scheme: light;

  --color-primary: #0B1220;
  --color-primary-light: #152033;
  --color-primary-muted: #243044;

  --color-accent-soft: rgba(196, 154, 34, 0.12);
  --color-accent-secondary-soft: rgba(37, 99, 235, 0.1);

  --color-background: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-hover: #F3F5F8;
  --color-surface-dark: #0B1220;
  --color-surface-light: #FFFFFF;
  --color-surface-light-muted: #EEF1F5;

  --color-text: #10141C;
  --color-text-muted: #5B6472;
  --color-text-subtle: #8B93A3;
  --color-text-inverse: #F7F8FA;
  --color-text-inverse-muted: #9AA3B5;
  --color-text-on-light: #10141C;
  --color-text-on-light-muted: #5B6472;

  --color-border: #E4E7EC;
  --color-border-strong: #D0D5DD;
  --color-border-subtle: #EEF1F5;
  --color-border-light: #D0D5DD;

  --color-success: #027A48;
  --color-success-bg: #ECFDF3;
  --color-error: #B42318;
  --color-error-bg: #FEF3F2;
  --color-focus: #C49A22;

  --shadow-xs: 0 1px 2px rgba(16, 20, 28, 0.05);
  --shadow-sm: 0 8px 24px rgba(16, 20, 28, 0.06);
  --shadow-md: 0 18px 40px rgba(16, 20, 28, 0.08);
  --shadow-lg: 0 28px 60px rgba(16, 20, 28, 0.12);
  --shadow-glow: 0 0 48px rgba(229, 185, 60, 0.12);
  --shadow-focus: 0 0 0 3px rgba(196, 154, 34, 0.28);

  --header-bg: rgba(247, 248, 250, 0.72);
  --header-bg-scrolled: rgba(255, 255, 255, 0.92);
  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
  --overlay-soft: rgba(11, 18, 32, 0.03);
  --overlay-medium: rgba(11, 18, 32, 0.05);
  --grid-line: rgba(11, 18, 32, 0.05);
  --hero-glow-gold: rgba(229, 185, 60, 0.18);
  --hero-glow-blue: rgba(91, 141, 239, 0.1);
  --btn-ghost-bg: rgba(11, 18, 32, 0.03);
  --btn-ghost-bg-hover: rgba(11, 18, 32, 0.06);
  --form-bg: #FFFFFF;
  --form-bg-focus: #FFFFFF;
  --platform-bar-bg: rgba(11, 18, 32, 0.04);
  --platform-rail-bg: rgba(11, 18, 32, 0.03);
  --logo-footer-bg: rgba(255, 255, 255, 0.96);
  --hero-bg: #F7F8FA;
  --hero-title-gradient: linear-gradient(105deg, #C49A22 0%, #10141C 42%, #2563EB 100%);
  --footer-text: #9AA3B5;
  --footer-heading: #F3F5F8;
  --theme-icon-sun-display: block;
  --theme-icon-moon-display: none;
}