/* Import generated design tokens - single source of truth */
@import './generated/tokens-spacing.css';
@import './generated/tokens-radius.css';
@import './generated/tokens-colors.css';

/* CSS Cascade Layers for organized specificity management */
@layer tokens, base, components, pages, utilities;

@layer tokens {
:root {
  color-scheme: light dark;

  /* Backward compatibility aliases for legacy names */
  --color-blue: var(--color-dusk-blue);
  --color-blue-strong: var(--color-dusk-blue-strong);

  /* Surface & text - derived from generated primitives */
  --color-bg: var(--color-off-white);
  --color-surface: #faf5ee;
  --color-surface-raised: #fdf8f2;
  --color-surface-overlay: rgba(255, 255, 255, 0.92);
  --color-text: var(--color-charcoal);
  --color-text-strong: #1c1b1a;
  --color-text-inverse: var(--color-white);
  --color-muted: rgba(58, 58, 58, 0.8);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-strong: rgba(0, 0, 0, 0.12);

  /* Semantic alpha colours - not generated (require transparency) */
  --color-overlay-dark: rgba(17, 27, 31, 0.45);
  --color-overlay-light: rgba(255, 255, 255, 0.9);
  --color-border-blue-alpha: rgba(107, 140, 153, 0.3);
  --color-border-blue-light: rgba(107, 140, 153, 0.12);
  --color-bg-white-alpha-90: rgba(255, 255, 255, 0.9);
  --color-bg-white-alpha-92: rgba(255, 255, 255, 0.92);
  --color-bg-white-alpha-97: rgba(255, 255, 255, 0.97);
  --color-bg-white-full: rgba(255, 255, 255, 1);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
  --color-coral-alpha-12: rgba(229, 115, 92, 0.12);
  --color-coral-alpha-15: rgba(229, 115, 92, 0.15);
  --color-coral-alpha-20: rgba(229, 115, 92, 0.2);
  --color-coral-alpha-30: rgba(229, 115, 92, 0.3);
  --color-coral-alpha-50: rgba(229, 115, 92, 0.5);
  --color-coral-alpha-80: rgba(229, 115, 92, 0.8);
  --color-error-alpha-12: rgba(211, 47, 47, 0.12);

  /* Layout - not generated (web-specific) */
  --content-max-width: 70rem;
  --content-max-width-wide: 80rem;

  /* Spacing - see generated tokens-spacing.css for base tokens, legacy aliases below */
  --spacing-2xs: var(--spacing-xxs);
  --spacing-2xl: var(--spacing-xxl);
  --spacing-3xl: var(--spacing-xxxl);
  --spacing-hero: clamp(3.25rem, 7vw, 4.5rem);

  /* Typography - not generated (web-specific) */
  --font-family-base: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Radii - see generated tokens-radius.css, non-generated pills */
  --radius-pill: 999px;

  /* Shadows - not generated (web-specific composite values) */
  --shadow-subtle: 0 1px 2px rgba(17, 27, 31, 0.08);
  --shadow-default: 0 2px 8px rgba(17, 27, 31, 0.12);
  --shadow-elevated: 0 16px 32px rgba(17, 27, 31, 0.14);

  /* Motion - not generated (web-specific animation) */
  --motion-duration-xs: 120ms;
  --motion-duration-sm: 160ms;
  --motion-duration-md: 240ms;
  --motion-duration-lg: 360ms;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Layers - not generated (web-specific z-index) */
  --z-base: 0;
  --z-elevated: 10;
  --z-overlay: 999;
  --z-header: 1000;
  --z-dropdown: 1001;
  --z-modal: 1002;
}

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #1f1e1c;
  --color-surface: #25231f;
  --color-surface-raised: #2d2a24;
  --color-surface-overlay: rgba(33, 31, 28, 0.92);
  --color-text: #f0e8da;
  --color-text-strong: #ffffff;
  --color-text-inverse: #1f1e1c;
  --color-muted: rgba(240, 232, 218, 0.7);
  --color-border: rgba(240, 232, 218, 0.14);
  --color-border-strong: rgba(240, 232, 218, 0.22);
  --shadow-subtle: 0 1px 2px rgba(12, 12, 12, 0.55);
  --shadow-default: 0 2px 12px rgba(12, 12, 12, 0.55);
  --shadow-elevated: 0 24px 48px rgba(12, 12, 12, 0.6);
  --color-overlay-dark: rgba(12, 12, 12, 0.6);
  --color-border-blue-alpha: rgba(155, 181, 193, 0.3);
  --color-border-blue-light: rgba(155, 181, 193, 0.16);
  --color-bg-white-alpha-90: rgba(33, 31, 28, 0.9);
  --color-bg-white-alpha-92: rgba(33, 31, 28, 0.92);
  --color-bg-white-alpha-97: rgba(33, 31, 28, 0.97);
  --color-bg-white-full: rgba(33, 31, 28, 1);
  --color-white-alpha-20: rgba(240, 232, 218, 0.2);
  --color-white-alpha-30: rgba(240, 232, 218, 0.26);
  --color-coral-alpha-12: rgba(255, 181, 162, 0.16);
  --color-coral-alpha-15: rgba(255, 181, 162, 0.20);
  --color-coral-alpha-20: rgba(255, 181, 162, 0.24);
  --color-coral-alpha-30: rgba(255, 181, 162, 0.34);
  --color-coral-alpha-50: rgba(255, 181, 162, 0.5);
  --color-coral-alpha-80: rgba(255, 181, 162, 0.75);
  --color-error-alpha-12: rgba(211, 47, 47, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-bg: #1f1e1c;
    --color-surface: #25231f;
    --color-surface-raised: #2d2a24;
    --color-surface-overlay: rgba(33, 31, 28, 0.92);
    --color-text: #f0e8da;
    --color-text-strong: #ffffff;
    --color-text-inverse: #1f1e1c;
    --color-muted: rgba(240, 232, 218, 0.7);
    --color-border: rgba(240, 232, 218, 0.14);
    --color-border-strong: rgba(240, 232, 218, 0.22);
    --shadow-subtle: 0 1px 2px rgba(12, 12, 12, 0.55);
    --shadow-default: 0 2px 12px rgba(12, 12, 12, 0.55);
    --shadow-elevated: 0 24px 48px rgba(12, 12, 12, 0.6);
    --color-overlay-dark: rgba(12, 12, 12, 0.6);
    --color-border-blue-alpha: rgba(155, 181, 193, 0.3);
    --color-border-blue-light: rgba(155, 181, 193, 0.16);
    --color-bg-white-alpha-90: rgba(33, 31, 28, 0.9);
    --color-bg-white-alpha-92: rgba(33, 31, 28, 0.92);
    --color-bg-white-alpha-97: rgba(33, 31, 28, 0.97);
    --color-bg-white-full: rgba(33, 31, 28, 1);
    --color-coral-alpha-12: rgba(255, 181, 162, 0.16);
    --color-coral-alpha-15: rgba(255, 181, 162, 0.20);
    --color-coral-alpha-20: rgba(255, 181, 162, 0.24);
    --color-error-alpha-12: rgba(211, 47, 47, 0.26);
  }
}
} /* End @layer tokens */