/*
  Novo Passage — Design Tokens
  "Desert Oasis" palette + "Warm & Grounded" type pairing (Fraunces / Inter).

  RULE: this is the ONLY file in the project allowed to contain a hex code.
  Any hex code found in a page file is a bug — reference a variable instead.

  ---------------------------------------------------------------------------
  WCAG CONTRAST NOTES (checked against the two page backgrounds we actually
  use: --color-bg-page and --color-bg-surface). AA normal text needs 4.5:1;
  AA large text (>=24px, or >=18.66px bold) needs 3:1.

  --color-text-primary   on --color-bg-page     -> 14.9:1  PASS (AAA)
  --color-text-primary   on --color-bg-surface   -> 12.9:1  PASS (AAA)
  --color-text-secondary on --color-bg-page     ->  2.9:1  FAIL — DECORATIVE ONLY.
                                                              Do not use for
                                                              body copy or any
                                                              text under 24px.
                                                              Use --color-text-
                                                              muted instead for
                                                              any real subhead
                                                              or lede copy.
  --color-text-secondary on --color-bg-surface   ->  2.5:1  FAIL — DECORATIVE ONLY.
  --color-text-muted on --color-bg-page          ->  5.76:1  PASS (AA). Use for
                                                              subheads, ledes,
                                                              and any secondary
                                                              copy that must
                                                              actually be read.
  --color-text-muted on --color-bg-surface       ->  4.97:1  PASS (AA).
  --color-accent-warm (terracotta) on bg-page    ->  4.17:1  FAIL for body text,
                                                              PASSES for large/
                                                              bold headings only
                                                              (>=24px, or bold
                                                              >=18.66px).
  --color-accent-warm on bg-surface              ->  3.60:1  same as above —
                                                              large/bold only.
  white text on --color-accent-warm (button bg)  ->  4.56:1  PASS (AA normal).
  --color-accent-oasis (vivid blue) on bg-page   ->  3.30:1  FAIL for text —
                                                              use only as a
                                                              background,
                                                              border, icon
                                                              fill, or large/
                                                              bold decorative
                                                              accent. Never as
                                                              small text on
                                                              light backgrounds.
  white text on --color-accent-oasis             ->  3.61:1  FAILS AA normal
                                                              text (needs 4.5).
                                                              Only acceptable
                                                              for large/bold
                                                              (>=18.66px bold).
  --color-text-primary on --color-accent-oasis   ->  4.52:1  PASS (AA normal).
                                                              THIS is the
                                                              correct CTA
                                                              button treatment:
                                                              oasis blue
                                                              background + near
                                                              -black text, not
                                                              white text.
  white text on --color-accent-oasis-deep        ->  5.68:1  PASS (AA normal).
                                                              Use this darker
                                                              variant instead
                                                              of --color-
                                                              accent-oasis
                                                              whenever white
                                                              text on blue is
                                                              needed at any
                                                              size.
  ---------------------------------------------------------------------------
*/

:root {
  /* ---- Color: base palette ("Desert Oasis") ---- */
  --color-ink: #241F1C;              /* near-black warm brown — primary text */
  --color-bg-page: #FAF4EC;          /* cream — page background */
  --color-bg-surface: #EFE3D3;       /* sand — card / surface background */
  --color-text-secondary: #9C8F7E;   /* warm taupe — DECORATIVE ONLY, see notes above */
  --color-text-muted: #6B5E4F;       /* darker warm taupe — passes AA, use for real subhead/lede copy */
  --color-accent-warm: #C1552F;      /* terracotta — secondary accent: headers, dividers, warmth */
  --color-accent-oasis: #1C8FC9;     /* oasis blue — reserved almost exclusively for the CTA and one hero highlight. Never decorative, never repeated more than once or twice per page. */
  --color-accent-oasis-deep: #0F6E97;/* darker blue — use when white text on blue is required at any size */
  --color-white: #FFFFFF;

  /* ---- Color: semantic aliases ---- */
  --color-text-primary: var(--color-ink);
  --color-cta-bg: var(--color-accent-oasis);
  --color-cta-text: var(--color-ink);   /* see contrast notes: dark text on oasis blue, not white */
  --color-cta-bg-hover: var(--color-accent-oasis-deep);
  --color-cta-text-hover: var(--color-white);
  --color-border: var(--color-accent-warm);

  /* ---- Type families ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type scale ---- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-4xl: 3.5rem;    /* 56px — hero headline */

  /* ---- Line height ---- */
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Font weight ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

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

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadow (for tactility/depth per the design brief) ---- */
  --shadow-sm: 0 2px 8px rgba(36, 31, 28, 0.08);
  --shadow-md: 0 4px 16px rgba(36, 31, 28, 0.10);
}