/**
 * SCT Brand Design Tokens
 * Source: Strategic Creative Technology Brand Guideline v001 (03/06/2026)
 */

:root {
  /* ── Primary RGB Palette ── */
  --color-purple: rgb(95, 48, 117);
  --color-purple-hex: #5f3075;

  --color-lt-gray: rgb(165, 195, 210);
  --color-lt-gray-hex: #a5c3d2;

  --color-orange: rgb(245, 130, 32);
  --color-orange-hex: #f58220;

  --color-blue: rgb(52, 195, 210);
  --color-blue-hex: #34c3d2;

  --color-black: rgb(0, 0, 0);
  --color-black-hex: #000000;

  --color-gray: rgb(116, 138, 150);
  --color-gray-hex: #748a96;

  /* ── Semantic Aliases ── */
  --color-primary: var(--color-purple);
  --color-accent: var(--color-orange);
  --color-accent-alt: var(--color-blue);
  --color-surface: #ffffff;
  --color-surface-muted: rgb(248, 250, 252);
  --color-surface-tint: rgba(165, 195, 210, 0.18);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-gray);
  --color-text-inverse: #ffffff;
  --color-border: rgba(116, 138, 150, 0.25);
  --color-border-strong: rgba(95, 48, 117, 0.2);

  /* ── Typography Families ── */
  /* Metropolis: headings & sub-headings (brand guideline) */
  --font-heading: "Metropolis", "Arial", sans-serif;
  /* Arial: body copy (loaded from assets/fonts/) */
  --font-body: "Arial", sans-serif;

  /* ── Typography Scale (brand guideline pt → web rem) ── */
  /* 10pt body · 14pt sub-head · 20pt headings */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px — approx 10pt */
  --text-base: 1rem;     /* 16px — accessible web body */
  --text-md: 1.125rem;   /* 18px — approx 14pt sub-head */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.667rem;   /* ~26.7px — approx 20pt headings */
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;
  --text-hero: clamp(2.5rem, 5vw, 4rem);

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.14em;

  /* ── 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;

  /* ── Layout ── */
  --container-max: 72rem;
  --container-narrow: 48rem;
  --header-height: 4.5rem;

  /* ── Effects ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(95, 48, 117, 0.08);
  --shadow-lg: 0 12px 40px rgba(95, 48, 117, 0.12);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}