/*
 * Aleota Finance design tokens
 *
 * Every colour, font, size and spacing value lives here. Components and
 * templates only reference these variables, so re-skinning the whole system
 * means editing this one file.
 *
 * PALETTE SOURCE: the Aleota "gable" logo (brand/logo/).
 *   Navy roof  #0B1F3A   Teal door  #14C9B4   Teal wordmark  #14A99A
 *   On dark:   white roof, bright-teal door #2DE3CD
 * Extended shades (text teal, mint, slates) are derived from those and
 * contrast-checked against WCAG 2.1 AA.
 */

:root {
  /* ---------- Palette (raw colours) ---------- */
  --palette-navy: #0B1F3A;         /* logo roof: text, dark sections */
  --palette-navy-soft: #1E3354;    /* secondary text on light */
  --palette-slate: #5A6B80;        /* muted text (5.5:1 on white) */
  --palette-mist: #A9B8CC;         /* muted text on navy (8.2:1) */
  --palette-white: #FFFFFF;        /* page background */
  --palette-cloud: #F4F8F9;        /* alt sections */
  --palette-line: #E2E8EE;         /* borders, dividers */

  --palette-teal: #14C9B4;         /* logo door: THE accent (CTAs, highlights) */
  --palette-teal-hover: #10B3A0;
  --palette-teal-brand: #14A99A;   /* logo wordmark: logo use only, too light for text */
  --palette-teal-deep: #0B7A70;    /* teal as text on light (5.2:1 on white) */
  --palette-teal-bright: #2DE3CD;  /* logo door on dark: accent on navy */
  --palette-mint: #E3F8F4;         /* soft teal surfaces */

  --palette-star: #F5A524;         /* review stars only */

  /* ---------- Semantic colours (use these in components) ---------- */
  --color-bg: var(--palette-white);
  --color-bg-alt: var(--palette-cloud);
  --color-surface: var(--palette-white);
  --color-surface-dark: var(--palette-navy);
  --color-border: var(--palette-line);

  --color-text: var(--palette-navy);
  --color-text-secondary: var(--palette-navy-soft);
  --color-text-muted: var(--palette-slate);
  --color-text-on-dark: var(--palette-white);
  --color-text-muted-on-dark: var(--palette-mist);

  --color-accent: var(--palette-teal);
  --color-accent-hover: var(--palette-teal-hover);
  --color-accent-text: var(--palette-teal-deep);
  --color-accent-soft: var(--palette-mint);
  --color-on-accent: var(--palette-navy);  /* never white on teal: 2.1:1 fails */
  --color-highlight-on-dark: var(--palette-teal-bright);
  --color-accent-glow: rgb(20 201 180 / 0.30);

  --color-positive: var(--palette-teal-deep);
  --color-positive-soft: var(--palette-mint);

  --color-focus: var(--palette-navy);
  --color-nav-bg: rgb(255 255 255 / 0.9);

  /* ---------- Typography ---------- */
  /* Sora = the logo typeface (headings, wordmark). Inter = body copy. */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Fluid type scale: mobile -> desktop */
  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);     /* 40 -> 64 */
  --text-h1: clamp(2rem, 1.5rem + 2vw, 3rem);              /* 32 -> 48 */
  --text-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);     /* 26 -> 36 */
  --text-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);      /* 20 -> 24 */
  --text-lg: 1.125rem;                                      /* 18 */
  --text-base: 1rem;                                        /* 16 */
  --text-sm: 0.875rem;                                      /* 14 */
  --text-xs: 0.75rem;                                       /* 12 */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  --section-pad: clamp(3.5rem, 2rem + 6vw, 6rem);
  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ---------- Shape & depth ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(11 31 58 / 0.06), 0 1px 3px rgb(11 31 58 / 0.04);
  --shadow-md: 0 4px 12px rgb(11 31 58 / 0.06), 0 2px 4px rgb(11 31 58 / 0.04);
  --shadow-lg: 0 18px 40px rgb(11 31 58 / 0.10), 0 4px 10px rgb(11 31 58 / 0.05);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

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