/* ==========================================================================
   brettdavis.ai - Design Tokens
   The single source of truth. Every colour, size, and duration in the site
   derives from a variable defined here. Change it here, it changes everywhere.
   ========================================================================== */

:root {

  /* ---- Colour -----------------------------------------------------------
     Four colours only. The accent is used with extreme restraint:
     interactive states, one keyword per page, the wordmark dot. */
  --color-bg:        #FAFAFA;
  --color-ink:       #111111;
  --color-secondary: #666666;
  --color-accent:    #6CC24A;

  /* Derived tints - never introduce new hues, only opacity of the above */
  --color-hairline:  rgba(17, 17, 17, 0.10);   /* rules & borders */
  --color-hairline-strong: rgba(17, 17, 17, 0.22);
  --color-ink-faint: rgba(17, 17, 17, 0.04);   /* hover washes */
  --color-accent-soft: rgba(108, 194, 74, 0.12);

  /* ---- Typography --------------------------------------------------------
     Inter Tight for display, Inter for body. Loaded via Google Fonts with
     font-display: swap. System fallbacks keep first paint honest. */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid type scale - clamps between phone and large desktop.
     Display sizes are deliberately oversized; this site speaks in headlines. */
  --text-hero:    clamp(3.25rem, 11vw, 9.5rem);    /* the name */
  --text-display: clamp(2.25rem, 5.5vw, 4.5rem);   /* page titles */
  --text-h2:      clamp(1.75rem, 3.5vw, 3rem);     /* section titles */
  --text-h3:      clamp(1.25rem, 2vw, 1.625rem);   /* card titles */
  --text-lede:    clamp(1.125rem, 1.6vw, 1.375rem);/* standfirst copy */
  --text-body:    1.0625rem;                        /* 17px reading size */
  --text-small:   0.875rem;
  --text-micro:   0.75rem;                          /* labels, eyebrows */

  --leading-tight: 1.02;   /* hero */
  --leading-display: 1.08;
  --leading-body: 1.65;

  --tracking-tight: -0.03em; /* large display type tightens */
  --tracking-micro: 0.14em;  /* uppercase labels open up */

  /* ---- Spacing ------------------------------------------------------------
     An 8px base scale. Section rhythm is generous by design - the brief
     says "everything should breathe", so it does. */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  3rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  8rem;
  --space-section: clamp(5rem, 12vw, 10rem);

  /* ---- Layout ------------------------------------------------------------ */
  --width-max:   1280px;   /* outer container */
  --width-prose: 42rem;    /* long-form reading measure (~68ch) */
  --gutter:      clamp(1.25rem, 4vw, 3rem);

  /* ---- Motion -------------------------------------------------------------
     One easing curve, two durations. Subtle by mandate. */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-slow: 700ms;
}