/* ==========================================================================
   SUPERLOOM – Design Tokens
   Single source of truth. Edit here to change anything globally.

   Size scale (Major Third ratio, base 1rem = 16px):
   --size-xs    0.75rem   12px
   --size-sm    1rem      16px
   --size-md    1.333rem  21px
   --size-lg    1.777rem  28px
   --size-xl    2.369rem  38px
   --size-2xl   2.763rem  44px
   --size-3xl   3.157rem  51px
   --size-4xl   4.209rem  67px
   --size-5xl   5.61rem   90px
   --size-6xl   7.48rem  120px
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Size scale
     Used for both spacing and type sizes.
     Never add one-off values – always use a scale step.
  -------------------------------------------------------------------------- */
  --size-xs:   0.75rem;
  --size-sm:   1rem;
  --size-md:   1.333rem;
  --size-lg:   1.777rem;
  --size-xl:   2.369rem;
  --size-2xl:  2.763rem;
  --size-3xl:  3.157rem;
  --size-4xl:  4.209rem;
  --size-5xl:  5.61rem;
  --size-6xl:  7.48rem;


  /* --------------------------------------------------------------------------
     Line heights
     Named by percentage for clarity.
     Tied to font+size combinations in components, not to semantic roles.
  -------------------------------------------------------------------------- */
  --leading-100: 1;     /* 100% – large headlines, display    */
  --leading-110: 1.1;   /* 110% – card text, medium headlines */
  --leading-115: 1.15;  /* 115% – logo, eyebrow labels        */
  --leading-120: 1.2;   /* 120% – semibold labels             */
  --leading-125: 1.25;  /* 125% – body copy                   */


  /* --------------------------------------------------------------------------
     Colours
     Contrast ratios against --color-bg (#FBFBF9):
     WCAG AA requires 4.5:1 normal text, 3:1 large text / UI.
  -------------------------------------------------------------------------- */
  --color-bg:      #F2F0EC;  /* base background                       */
  --color-text:    #202020;  /* 16.1:1 – AAA all sizes                */
  --color-card:    #EAE4DA;  /* currently card background             */
  --color-border:  #D4D1D1;  /* subtle borders                        */
  --color-meta:    #595959;  /* 7.3:1 – AA all sizes                  */
  /* Note: original #8A8A85 = 3.15:1, fails AA. Corrected to #595959  */


  /* --------------------------------------------------------------------------
     Focus – WCAG 2.1 SC 2.4.11
  -------------------------------------------------------------------------- */
  --color-focus:  #202020;
  --focus-width:  3px;
  --focus-offset: 3px;


  /* --------------------------------------------------------------------------
     Typography – font families
  -------------------------------------------------------------------------- */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inclusive Sans', system-ui, sans-serif;
  --font-mono:  'Departure Mono', 'Courier New', monospace;


  /* --------------------------------------------------------------------------
     Fraunces variable axes – applied wherever Fraunces is used.
     weight 300, SOFT 0 (sharp), WONK 1 (quirky alternates on)
  -------------------------------------------------------------------------- */
  --fraunces-axes: 'wght' 300, 'SOFT' 0, 'WONK' 1;


  /* --------------------------------------------------------------------------
     Layout
  -------------------------------------------------------------------------- */
  --container-max: 1390px;

  /* Horizontal page margin – both sides, all breakpoints */
  --margin-page: var(--size-xl);  /* 2.369rem */

  /* Grid gutters – same scale, capped at --size-md */
  --grid-gap: var(--size-md);    /* 1.333rem / ~21px */


  /* --------------------------------------------------------------------------
     Transitions – placeholders for motion layer (not active in MVP)
  -------------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);

}