/*
 * Design tokens. Every size, colour and spacing in the interface comes from here.
 * Type scale (root 16px): nothing in the interface is smaller than --fs-xs (13px).
 * --color-primary is a fill colour (yellow); text that must read as "primary" uses --color-accent-text,
 * because pure yellow on white does not meet WCAG AA.
 */
@layer tokens {
  :root {
    color-scheme: light;

    --font-sans: Poppins, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --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;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --shadow-1: 0 2px 10px rgb(26 26 26 / 0.05);
    --shadow-2: 0 14px 40px rgb(26 26 26 / 0.12);
    --shadow-primary: 0 6px 16px rgb(255 214 10 / 0.35);
    --tap-min: 44px;
    --sidebar-width: 248px;
    --content-max: 1280px;

    /* Light theme: every text pair meets WCAG AA. */
    --color-bg: #f2f1ec;
    --color-surface: #ffffff;
    --color-surface-2: #f7f6f1;
    --color-text: #1a1a1a;
    --color-text-muted: #636363;
    --color-border: #ebe9e1;
    --color-border-strong: #c9c6bc;
    --color-primary: #ffd60a;
    --color-primary-hover: #f5c800;
    --color-primary-soft: #fff6cc;
    --color-on-primary: #1a1a1a;
    --color-accent-text: #7a5f00;
    --color-success: #16733f;
    --color-success-soft: #e3f5ea;
    --color-warning: #8a5a00;
    --color-warning-soft: #fff1d1;
    --color-danger: #c4282d;
    --color-danger-soft: #fde8e8;
    --color-on-strong: #ffffff;
    --color-info: #2457c5;
    --color-info-soft: #e6eefc;
    --color-focus: #1a1a1a;
    --color-nav-bg: #ffffff;
    --color-nav-text: #636363;
    --color-nav-text-strong: #1a1a1a;
    --color-nav-hover: #f7f6f1;
    --color-nav-active: #ffd60a;
    --color-on-nav-active: #1a1a1a;
    --color-hero-bg: #ffd60a;
    --color-on-hero: #1a1a1a;
    --color-hero-ring: rgb(255 255 255 / 0.35);
    --color-logo-plate: #ffffff;
    --color-hero-ring-dark: rgb(26 26 26 / 0.08);
    --color-overlay: rgb(20 20 20 / 0.55);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --color-bg: #121212;
      --color-surface: #1c1c1c;
      --color-surface-2: #262626;
      --color-text: #f2f2f2;
      --color-text-muted: #b0b0b0;
      --color-border: #2e2e2e;
      --color-border-strong: #4a4a4a;
      --color-primary-soft: #3a3210;
      --color-accent-text: #ffd60a;
      --color-success: #6fd39a;
      --color-success-soft: #173a26;
      --color-warning: #f0c060;
      --color-warning-soft: #3a2f14;
      --color-danger: #ff8b85;
      --color-danger-soft: #42201f;
      --color-info: #8db3f5;
      --color-info-soft: #1b2a44;
      --color-focus: #ffd60a;
      --color-nav-bg: #1c1c1c;
      --color-nav-text: #b0b0b0;
      --color-nav-text-strong: #f2f2f2;
      --color-nav-hover: #262626;
      --color-overlay: rgb(0 0 0 / 0.65);
      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow-2: 0 10px 30px rgb(0 0 0 / 0.5);
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #121212;
    --color-surface: #1c1c1c;
    --color-surface-2: #262626;
    --color-text: #f2f2f2;
    --color-text-muted: #b0b0b0;
    --color-border: #2e2e2e;
    --color-border-strong: #4a4a4a;
    --color-primary-soft: #3a3210;
    --color-accent-text: #ffd60a;
    --color-success: #6fd39a;
    --color-success-soft: #173a26;
    --color-warning: #f0c060;
    --color-warning-soft: #3a2f14;
    --color-danger: #ff8b85;
    --color-danger-soft: #42201f;
    --color-info: #8db3f5;
    --color-info-soft: #1b2a44;
    --color-focus: #ffd60a;
    --color-nav-bg: #1c1c1c;
    --color-nav-text: #b0b0b0;
    --color-nav-text-strong: #f2f2f2;
    --color-nav-hover: #262626;
    --color-overlay: rgb(0 0 0 / 0.65);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 10px 30px rgb(0 0 0 / 0.5);
  }
}