/* tokens.css — Band of Merry shared design tokens */
/* Link this file from every page BEFORE base.css and any component stylesheet */

:root {
  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* 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-32: 8rem;

  /* Fonts */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body: 'Josefin Sans', 'Jost', sans-serif;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
}

/* ===== LIGHT MODE ===== */
:root, [data-theme="light"] {
  --color-bg: #F9F7F4;
  --color-surface: #F2F0EB;
  --color-surface-2: #EAE7E0;
  --color-surface-offset: #E3DFD7;
  --color-divider: #D8D4CE;
  --color-border: #CCC8C0;

  --color-text: #1A1A1A;
  --color-text-muted: #5A5750;
  --color-text-faint: #A5A19B;
  --color-text-inverse: #F9F7F4;

  --color-primary: #C9A84C;
  --color-primary-hover: #B8972F;
  --color-primary-active: #9A7E22;

  --color-secondary: #2E7D8A;
  --color-secondary-hover: #236570;

  --color-accent: #8B1A1A;

  /* Spring colours */
  --color-spring-green: #4A7C59;
  --color-spring-green-light: #6B9E7A;
  --color-spring-green-faint: rgba(74, 124, 89, 0.08);
  --color-spring-sage: #8FA68E;
  --color-spring-blush: #C4837A;
  --color-spring-cream: #F5EDE0;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 60 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 60 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 60 / 0.12);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --color-bg: #141210;
  --color-surface: #1C1A17;
  --color-surface-2: #242220;
  --color-surface-offset: #2C2A27;
  --color-divider: #38352F;
  --color-border: #45423B;

  --color-text: #E8E6E2;
  --color-text-muted: #9A9893;
  --color-text-faint: #6B6964;
  --color-text-inverse: #141210;

  --color-primary: #D4B35C;
  --color-primary-hover: #E0C06E;
  --color-primary-active: #C9A84C;

  --color-secondary: #3A9EAD;
  --color-secondary-hover: #4FB3C2;

  --color-accent: #C04040;

  /* Spring colours — dark mode */
  --color-spring-green: #6B9E7A;
  --color-spring-green-light: #8BBF9A;
  --color-spring-green-faint: rgba(107, 158, 122, 0.1);
  --color-spring-sage: #7A9A79;
  --color-spring-blush: #D4978F;
  --color-spring-cream: #2A2620;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #141210;
    --color-surface: #1C1A17;
    --color-surface-2: #242220;
    --color-surface-offset: #2C2A27;
    --color-divider: #38352F;
    --color-border: #45423B;
    --color-text: #E8E6E2;
    --color-text-muted: #9A9893;
    --color-text-faint: #6B6964;
    --color-text-inverse: #141210;
    --color-primary: #D4B35C;
    --color-primary-hover: #E0C06E;
    --color-primary-active: #C9A84C;
    --color-secondary: #3A9EAD;
    --color-secondary-hover: #4FB3C2;
    --color-accent: #C04040;
    --color-spring-green: #6B9E7A;
    --color-spring-green-light: #8BBF9A;
    --color-spring-green-faint: rgba(107, 158, 122, 0.1);
    --color-spring-sage: #7A9A79;
    --color-spring-blush: #D4978F;
    --color-spring-cream: #2A2620;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}