/**
 * timeslot.ie — Design Tokens
 *
 * Dublin Slate palette (#1B4D5C petrol primary, #C2803D copper accent)
 * Corporate Trust preset with warm professionalism.
 *
 * Light/dark mode via prefers-color-scheme.
 * High-contrast and reduced-motion accessibility support.
 *
 * Spacing: 4px base unit
 * Typography: system-ui stack, 15px body
 * Touch targets: 44px minimum
 * Contrast: WCAG 2.2 AA (4.5:1 normal text, 3:1 large text)
 *
 * BREAKPOINTS (reference):
 *   480px, 640px, 700px, 768px, 800px, 900px, 1024px
 */

/* ======================================================================
   LIGHT THEME (Default)
   ====================================================================== */
:root {
  /* -- Primary: Petrol -- */
  --ts-primary: #1B4D5C;
  --ts-primary-hover: #153F4C;
  --ts-primary-active: #0F3340;
  --ts-primary-light: #E8F0F3;
  --ts-primary-surface: #E8F0F3;
  --ts-on-primary: #FFFFFF;

  /* -- Accent: Copper -- */
  --ts-accent: #956028;
  --ts-accent-hover: #7A4F21;
  --ts-accent-light: #FDF5EC;

  /* -- Background & Surfaces -- */
  --ts-bg: #FAFAF7;
  --ts-bg-alt: #F5F3EE;
  --ts-surface: #FFFFFF;
  --ts-surface-raised: #F5F3EE;
  --ts-bg-elevated: #FFFFFF;

  /* -- Text -- */
  --ts-text-strong: #1A2332;
  --ts-text-primary: #1A2332;
  --ts-text-secondary: #4A5568;
  --ts-text-muted: #5C6B7A;
  --ts-text-inverse: #FFFFFF;
  --ts-text-disabled: #94A3B8;
  --ts-text-link: #1B4D5C;
  --ts-text-link-hover: #153F4C;

  /* -- Borders -- */
  --ts-border: #DDD8D0;
  --ts-border-strong: #C4BDB3;
  --ts-border-subtle: #EDE9E3;

  /* -- Semantic: Success -- */
  --ts-success: #2D7D46;
  --ts-success-light: #EDF7F0;
  --ts-success-surface: #EDF7F0;
  --ts-success-text: #1E5631;

  /* -- Semantic: Warning -- */
  --ts-warning: #C08B1D;
  --ts-warning-light: #FFF8E7;
  --ts-warning-surface: #FFF8E7;
  --ts-warning-text: #7A5A12;

  /* -- Semantic: Danger / Error -- */
  --ts-danger: #C53030;
  --ts-danger-hover: #A82828;
  --ts-danger-light: #FFF0F0;
  --ts-danger-surface: #FFF0F0;
  --ts-danger-text: #991B1B;
  --ts-error: var(--ts-danger);

  /* -- Semantic: Info -- */
  --ts-info: #1B4D5C;
  --ts-info-light: #E8F0F3;
  --ts-info-surface: #E8F0F3;
  --ts-info-text: #153F4C;

  /* -- Focus & Link -- */
  --ts-focus: #1B4D5C;
  --ts-focus-ring: 0 0 0 2px var(--ts-bg), 0 0 0 4px var(--ts-focus);
  --ts-focus-ring-offset: 2px;
  --ts-focus-ring-width: 2px;
  --ts-focus-ring-color: var(--ts-focus);
  --ts-link: #1B4D5C;

  /* -- Overlay -- */
  --ts-overlay: rgba(26, 35, 50, 0.5);
  --ts-overlay-heavy: rgba(26, 35, 50, 0.7);

  /* -- Shadows -- */
  --ts-shadow-xs: 0 1px 2px rgba(26, 35, 50, 0.04);
  --ts-shadow-sm: 0 1px 3px rgba(26, 35, 50, 0.06);
  --ts-shadow-md: 0 2px 8px rgba(26, 35, 50, 0.08);
  --ts-shadow-lg: 0 4px 16px rgba(26, 35, 50, 0.10);
  --ts-shadow-xl: 0 8px 24px rgba(26, 35, 50, 0.12);

  /* -- Spacing Scale (4px base) -- */
  --ts-space-1: 4px;
  --ts-space-2: 8px;
  --ts-space-3: 12px;
  --ts-space-4: 16px;
  --ts-space-5: 20px;
  --ts-space-6: 24px;
  --ts-space-8: 32px;
  --ts-space-10: 40px;
  --ts-space-12: 48px;
  --ts-space-16: 64px;
  --ts-space-20: 80px;
  --ts-space-24: 96px;
  --ts-space-32: 128px;
  --ts-space-40: 160px;
  --ts-space-48: 192px;
  --ts-space-64: 256px;

  /* -- Typography -- */
  --ts-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ts-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ts-font-mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
  --ts-font-size-xs: 0.75rem;
  --ts-font-size-sm: 0.875rem;
  --ts-font-size-base: 0.9375rem;
  --ts-font-size-lg: 1.0625rem;
  --ts-font-size-xl: 1.25rem;
  --ts-font-size-2xl: 1.5rem;
  --ts-font-size-3xl: 1.75rem;
  --ts-font-size-4xl: 2.375rem;
  --ts-font-size-5xl: 3rem;
  --ts-font-weight-normal: 400;
  --ts-font-weight-medium: 500;
  --ts-font-weight-semibold: 600;
  --ts-font-weight-bold: 700;
  --ts-font-weight-extrabold: 800;
  --ts-line-height-tight: 1.2;
  --ts-line-height-normal: 1.65;
  --ts-line-height-relaxed: 1.75;
  --ts-letter-spacing-tight: -0.02em;
  --ts-letter-spacing-normal: 0;
  --ts-letter-spacing-wide: 0.04em;
  --ts-letter-spacing-wider: 0.08em;

  /* -- Border Radius -- */
  --ts-radius-sm: 4px;
  --ts-radius-md: 6px;
  --ts-radius-lg: 8px;
  --ts-radius-xl: 12px;
  --ts-radius-full: 9999px;

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

  /* -- Z-Index Scale -- */
  --ts-z-base: 0;
  --ts-z-dropdown: 100;
  --ts-z-sticky: 200;
  --ts-z-modal-backdrop: 300;
  --ts-z-modal: 400;
  --ts-z-toast: 500;
  --ts-z-cookie-banner: 600;

  /* -- Touch Target -- */
  --ts-touch-target-min: 44px;

  /* -- Container Widths -- */
  --ts-content-width: 1140px;
  --ts-narrow-width: 780px;
  --ts-legal-width: 72ch;
  --ts-header-height: 64px;
  --ts-max-width: 1140px;
  --ts-container-sm: 640px;
  --ts-container-md: 768px;
  --ts-container-lg: 1024px;
  --ts-container-xl: 1200px;
}

/* ======================================================================
   DARK THEME
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --ts-primary: #5BA3B5;
    --ts-primary-hover: #7BBFCF;
    --ts-primary-active: #4A8FA0;
    --ts-primary-light: #1A2E35;
    --ts-primary-surface: #1A2E35;
    --ts-on-primary: #0E1B22;

    --ts-accent: #D4985A;
    --ts-accent-hover: #E0A96A;
    --ts-accent-light: #2A2318;

    --ts-bg: #141820;
    --ts-bg-alt: #1C2230;
    --ts-surface: #1C2230;
    --ts-surface-raised: #242B3A;
    --ts-bg-elevated: #242B3A;

    --ts-text-strong: #E8ECF1;
    --ts-text-primary: #E8ECF1;
    --ts-text-secondary: #A0ADBF;
    --ts-text-muted: #7B8A9E;
    --ts-text-inverse: #141820;
    --ts-text-disabled: #4A5568;
    --ts-text-link: #5BA3B5;
    --ts-text-link-hover: #7BBFCF;

    --ts-border: #2E3648;
    --ts-border-strong: #3D4758;
    --ts-border-subtle: #242B3A;

    --ts-success: #4CAF6A;
    --ts-success-light: #1A2E20;
    --ts-success-surface: #1A2E20;
    --ts-success-text: #86EFAC;

    --ts-warning: #D4A03A;
    --ts-warning-light: #2A2518;
    --ts-warning-surface: #2A2518;
    --ts-warning-text: #FDE68A;

    --ts-danger: #E05555;
    --ts-danger-hover: #C53030;
    --ts-danger-light: #2E1A1A;
    --ts-danger-surface: #2E1A1A;
    --ts-danger-text: #FCA5A5;
    --ts-error: var(--ts-danger);

    --ts-info: #5BA3B5;
    --ts-info-light: #1A2E35;
    --ts-info-surface: #1A2E35;
    --ts-info-text: #7BBFCF;

    --ts-focus: #5BA3B5;
    --ts-focus-ring: 0 0 0 2px var(--ts-bg), 0 0 0 4px var(--ts-focus);
    --ts-focus-ring-color: var(--ts-focus);
    --ts-link: #5BA3B5;

    --ts-overlay: rgba(0, 0, 0, 0.6);
    --ts-overlay-heavy: rgba(0, 0, 0, 0.8);

    --ts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --ts-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
    --ts-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);
    --ts-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

/* ======================================================================
   HIGH CONTRAST MODE
   ====================================================================== */
@media (prefers-contrast: more) {
  :root {
    --ts-border: #94A3B8;
    --ts-border-strong: #475569;
    --ts-text-secondary: #334155;
    --ts-text-muted: #475569;
  }
}

/* ======================================================================
   REDUCED MOTION
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ts-transition-fast: 0ms;
    --ts-transition-normal: 0ms;
    --ts-transition-slow: 0ms;
  }
}