/* ============================================================================
   tokens.css — Design_Token_System (single source of visual truth)
   ----------------------------------------------------------------------------
   Every visual value (color, type, spacing, radius, elevation, motion,
   breakpoint, tuning knob) is declared here as a :root custom property.
   The View (styles.css) references ONLY these tokens — no hard-coded visual
   literals live outside this file. (R4.1, R4.2)

   Placeholder brand colors are chosen to satisfy WCAG contrast (R4.7, R11.1)
   and the framework 3-color rule (R4.4, R6.1): one primary, one accent, and
   one neutral family. Do NOT add component/layout styles here.
   ============================================================================ */

:root {
  /* ---- COLOR (3-color rule: one primary, one accent, one neutral family) ---- */
  --color-primary:      #14243B; /* PLACEHOLDER deep midnight navy — prestige/authority */
  --color-accent:       #8A5E34; /* PLACEHOLDER warm brass — CTAs, links, labels */
  --color-accent-soft:  #C9A063; /* lighter brass — decorative use ON dark primary only */
  --color-bg:           #FBF9F5; /* warm ivory — neutral background */
  --color-bg-alt:       #F1ECE3; /* warm sand — alternating sections */
  --color-surface:      #FFFFFF; /* cards */
  --color-text:         #1F2733; /* ink — body text */
  --color-text-muted:   #565F6D; /* muted labels/captions */
  --color-ink-inverse:  #FBF9F5; /* text on dark primary */
  --color-border:       #E2DACE;
  --color-error:        #B3261E; /* validation errors */
  --color-success:      #146C43; /* success confirmation */
  --focus-ring:         var(--color-accent);       /* on light surfaces */
  --focus-ring-inverse: var(--color-accent-soft);  /* on dark primary */

  /* ---- TYPE SCALE (2 families max — R6.2) ---- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero:    clamp(2.5rem, 6vw, 5rem);
  --fs-h2:      clamp(1.75rem, 4vw, 3rem);
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-body:    1.0625rem;   /* 17px, never below 16px (R13.2) */
  --fs-small:   0.875rem;
  --lh-body:    1.7;
  --lh-heading: 1.15;
  --tracking-heading: -0.01em;
  --tracking-caps:    0.1em;

  /* ---- SPACING SCALE ---- */
  --space-xs: 0.5rem; --space-sm: 1rem;  --space-md: 2rem;
  --space-lg: 4rem;   --space-xl: 6rem;  --space-xxl: 8rem;
  --section-pad-desktop: 5rem;  /* 80px — R6.3 */
  --section-pad-mobile:  3rem;  /* 48px — R6.4 */
  --measure: 700px;             /* max body-text line length — R6.5 */
  --container-max: 1200px;

  /* ---- RADIUS / ELEVATION ---- */
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(20,36,59,0.08);
  --shadow-md: 0 8px 24px rgba(20,36,59,0.10);
  --shadow-lg: 0 20px 48px rgba(20,36,59,0.14);

  /* ---- MOTION (R14.1) ---- */
  --motion-fast: 0.2s; --motion-base: 0.4s; --motion-slow: 0.6s;
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- BREAKPOINTS (referenced in media queries — R13.5, R7.5) ---- */
  --bp-mobile-max: 767px;   /* mobile < 768 */
  --bp-tablet-max: 1023px;  /* tablet 768–1023; desktop >= 1024 */

  /* ---- TUNING KNOBS (self-serve, one-location edits — R4.5) ---- */
  --logo-height:    40px;
  --header-offset:  0px;    /* nudge header vertical position */
  --header-pad-y:   1.25rem;
}