/* gyk.dk Design Tokens
   Source of truth: docs/design-system.md
   Theme: Light (default) + Dark override */

:root {
  /* Surface hierarchy */
  --surface-container-lowest: #ffffff;
  --surface-bright: #f7f9fb;
  --surface: #f7f9fb;
  --background: #f7f9fb;
  --surface-container-low: #f0f4f7;
  --surface-container: #e8eff3;
  --surface-container-high: #e1e9ee;
  --surface-container-highest: #d9e4ea;
  --surface-variant: #d9e4ea;
  --surface-dim: #cfdce3;

  /* Primary (neutral charcoal) */
  --primary: #5d5e61;
  --on-primary: #f7f7fa;
  --primary-dim: #515255;
  --primary-container: #e2e2e5;
  --on-primary-container: #505254;
  --on-primary-fixed: #3e3f42;
  --on-primary-fixed-variant: #5a5c5e;
  --primary-fixed: #e2e2e5;
  --primary-fixed-dim: #d4d4d7;

  /* Secondary (green / success) */
  --secondary: #006d4b;
  --on-secondary: #e6ffef;
  --secondary-dim: #005f41;
  --secondary-container: #85f8c4;
  --on-secondary-container: #005e40;
  --secondary-fixed: #85f8c4;
  --secondary-fixed-dim: #76eab6;
  --on-secondary-fixed: #004931;
  --on-secondary-fixed-variant: #006948;

  /* Tertiary (blue / accent) */
  --tertiary: #0053dc;
  --on-tertiary: #faf8ff;
  --tertiary-dim: #0049c2;
  --tertiary-container: #3e76fe;
  --on-tertiary-container: #000000;
  --on-tertiary-fixed: #ffffff;
  --on-tertiary-fixed-variant: #f9f7ff;
  --tertiary-fixed: #3e76fe;
  --tertiary-fixed-dim: #2d68f0;

  /* Error (red / destructive) */
  --error: #9f403d;
  --on-error: #fff7f6;
  --error-dim: #4e0309;
  --error-container: #fe8983;
  --on-error-container: #752121;

  /* Text hierarchy */
  --on-surface: #2a3439;
  --on-background: #2a3439;
  --on-surface-variant: #566166;
  --outline: #717c82;
  --outline-variant: #a9b4b9;

  /* Inverse / special */
  --inverse-surface: #0b0f10;
  --inverse-primary: #f9f9fc;
  --inverse-on-surface: #9a9d9f;
  --surface-tint: #5d5e61;

  /* Typography */
  --font-headline: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Inter', sans-serif;

  /* Border radius scale */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Shadow scale */
  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.02);
  --shadow-card: 0 12px 32px rgba(42, 52, 57, 0.04);
  --shadow-elevated: 0 12px 32px rgba(42, 52, 57, 0.08);
  --shadow-cta: 0 24px 48px rgba(0, 0, 0, 0.06);
  --shadow-fab: 0 12px 32px rgba(42, 52, 57, 0.2);
  --shadow-bottom-nav: 0 -12px 32px rgba(42, 52, 57, 0.04);

  /* Ghost border */
  --ghost-border: 1px solid rgba(169, 180, 185, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --surface-container-lowest: #1a1c1e;
  --surface-bright: #1e2124;
  --surface: #121416;
  --background: #121416;
  --surface-container-low: #1e2124;
  --surface-container: #252829;
  --surface-container-high: #2e3234;
  --surface-container-highest: #393d3f;
  --surface-variant: #393d3f;
  --surface-dim: #121416;

  --primary: #c5c6c9;
  --on-primary: #2e2f31;
  --primary-dim: #b0b1b4;
  --primary-container: #454648;
  --on-primary-container: #d4d4d7;

  --secondary: #6bdba5;
  --on-secondary: #003825;
  --secondary-container: #005238;
  --on-secondary-container: #85f8c4;

  --tertiary: #b1c5ff;
  --on-tertiary: #002d6e;
  --tertiary-container: #0040a0;
  --on-tertiary-container: #dbe1ff;

  --error: #ffb4ab;
  --on-error: #561e19;
  --error-container: #73332d;
  --on-error-container: #ffdad6;

  --on-surface: #e1e3e5;
  --on-background: #e1e3e5;
  --on-surface-variant: #bfc8cd;
  --outline: #899499;
  --outline-variant: #3f494e;

  --inverse-surface: #e1e3e5;
  --inverse-primary: #5d5e61;

  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.2);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.3);
  --shadow-fab: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-bottom-nav: 0 -12px 32px rgba(0, 0, 0, 0.2);

  --ghost-border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Auto theme: follow system preference */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --surface-container-lowest: #1a1c1e;
    --surface-bright: #1e2124;
    --surface: #121416;
    --background: #121416;
    --surface-container-low: #1e2124;
    --surface-container: #252829;
    --surface-container-high: #2e3234;
    --surface-container-highest: #393d3f;
    --surface-variant: #393d3f;
    --surface-dim: #121416;

    --primary: #c5c6c9;
    --on-primary: #2e2f31;
    --primary-dim: #b0b1b4;
    --primary-container: #454648;
    --on-primary-container: #d4d4d7;

    --secondary: #6bdba5;
    --on-secondary: #003825;
    --secondary-container: #005238;
    --on-secondary-container: #85f8c4;

    --tertiary: #b1c5ff;
    --on-tertiary: #002d6e;
    --tertiary-container: #0040a0;
    --on-tertiary-container: #dbe1ff;

    --error: #ffb4ab;
    --on-error: #561e19;
    --error-container: #73332d;
    --on-error-container: #ffdad6;

    --on-surface: #e1e3e5;
    --on-background: #e1e3e5;
    --on-surface-variant: #bfc8cd;
    --outline: #899499;
    --outline-variant: #3f494e;

    --inverse-surface: #e1e3e5;
    --inverse-primary: #5d5e61;

    --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.2);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-fab: 0 12px 32px rgba(0, 0, 0, 0.4);
    --shadow-bottom-nav: 0 -12px 32px rgba(0, 0, 0, 0.2);

    --ghost-border: 1px solid rgba(255, 255, 255, 0.08);
  }
}