/*
  ArchLens design tokens - SY Design Studio brand system.
  Change values here to re-theme the whole application.
*/
:root {
  /* Surfaces */
  --color-bg: #FAFAF8;
  --color-bg-elevated: #F1F0EC;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1F0EC;
  --color-border: rgba(58, 58, 58, 0.15);
  --color-border-strong: rgba(30, 30, 30, 0.2);

  /* Text */
  --color-text: #1E1E1E;
  --color-text-muted: rgba(30, 30, 30, 0.7);
  --color-text-faint: rgba(30, 30, 30, 0.5);

  /* Accent (brand orange, #E18000 = RGB 225,128,0).
     Contrast rules (WCAG AA):
     - #E18000 on white is ~2.9:1 - decorative/large elements only, never body text.
     - --color-on-accent (#1E1E1E on #E18000) is ~5.9:1 - passes AA, used on filled buttons.
     - --color-accent-text (#A85F00) is >=4.5:1 on white - the only orange for text/links. */
  --color-accent: #E18000;
  --color-accent-hover: #C97300;
  --color-accent-strong: #B36600;
  --color-accent-text: #A85F00;
  --color-accent-soft: rgba(225, 128, 0, 0.1);
  --color-accent-muted: rgba(225, 128, 0, 0.35);
  --color-on-accent: #1E1E1E;

  /* Dark sections (footer, CTA banners) */
  --color-dark-bg: #1E1E1E;
  --color-dark-text: #FAFAF8;
  --color-dark-text-muted: rgba(250, 250, 248, 0.7);
  --color-dark-text-faint: rgba(250, 250, 248, 0.6);
  --color-dark-border: rgba(250, 250, 248, 0.4);
  --color-dark-surface-hover: rgba(250, 250, 248, 0.08);

  /* Status */
  --color-success: #2F7A49;
  --color-success-bg: rgba(47, 122, 73, 0.12);
  --color-warning: #8A6A1C;
  --color-warning-bg: rgba(138, 106, 28, 0.12);
  --color-error: #A1362C;
  --color-error-bg: rgba(161, 54, 44, 0.1);
  --color-info: #2C6693;
  --color-info-bg: rgba(44, 102, 147, 0.1);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Space Grotesk", var(--font-sans);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-2xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --font-size-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.125rem);
  --font-size-4xl: clamp(1.75rem, 1.1rem + 3.2vw, 2.75rem);
  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-chip: 10px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(30, 30, 30, 0.05);
  --shadow-md: 0 8px 16px rgba(30, 30, 30, 0.06);
  --shadow-lg: 0 12px 24px rgba(30, 30, 30, 0.08);

  /* Layout */
  --sidebar-width: 260px;
  --topbar-height: 64px;
  --container-max: 1200px;
  --content-max: 800px;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}