/**
 * Design tokens — single source of truth.
 *
 * Extracted 1:1 from design/src/*.dc.html. Every value here is a value the
 * mockups actually use; nothing was rounded or "improved".
 *
 * Scale naming: numeric tokens carry their own px value (--space-28 = 28px,
 * --fs-15-5 = 15.5px). The design's rhythm is deliberately granular (28 distinct
 * spacing steps), so a t-shirt scale would either lose values or drift away
 * from 1:1. Self-documenting names keep both.
 *
 * @package Geras_Custom
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. PRIMITIVES — colour
	 * ------------------------------------------------------------- */

	/* Cocoa — brand dark, headings, footer. */
	--c-cocoa-900: #472A25;
	--c-cocoa-700: #5A3733;
	--c-cocoa-500: #7A5A54;
	--c-cocoa-400: #6D5B55;

	/* Honey — the brand accent. */
	--c-honey-300: #FED746;
	--c-honey-500: #F5C100;
	--c-honey-700: #C99E00;
	--c-honey-100: #FFF4C9;

	/* Paper & sand — page and section backgrounds. */
	--c-paper:      #FFFDF8;
	--c-white:      #FFFFFF;
	--c-sand-100:   #FAF3E3;
	--c-sand-200:   #EBDCC9;
	--c-sand-300:   #D9C7B4;

	/* Signal colours. */
	--c-red-500:   #ED1C24;
	--c-green-500: #83B735;
	--c-green-700: #5A7F1F;
	--c-green-100: #EAF4D8;

	/* Translucent overlays — kept as tokens so no rgba() leaks into components. */
	--c-cocoa-a07:  rgba( 90, 55, 51, .07 );
	--c-cocoa-a08:  rgba( 90, 55, 51, .08 );
	--c-cocoa-a10:  rgba( 90, 55, 51, .10 );
	--c-cocoa-a12:  rgba( 90, 55, 51, .12 );
	--c-cocoa-a14:  rgba( 90, 55, 51, .14 );
	--c-cocoa-a16:  rgba( 90, 55, 51, .16 );
	--c-cocoa-a18:  rgba( 90, 55, 51, .18 );
	--c-cocoa-a22:  rgba( 90, 55, 51, .22 );
	--c-cocoa9-a18: rgba( 71, 42, 37, .18 );
	--c-cocoa9-a22: rgba( 71, 42, 37, .22 );
	--c-cocoa9-a25: rgba( 71, 42, 37, .25 );
	--c-cocoa9-a28: rgba( 71, 42, 37, .28 );
	--c-cocoa9-a30: rgba( 71, 42, 37, .30 );
	--c-cocoa9-a32: rgba( 71, 42, 37, .32 );
	--c-cocoa9-a55: rgba( 71, 42, 37, .55 );
	--c-honey7-a30: rgba( 201, 158, 0, .30 );
	--c-honey7-a35: rgba( 201, 158, 0, .35 );
	--c-honey7-a55: rgba( 201, 158, 0, .55 );
	--c-honey1-a35: rgba( 255, 244, 201, .35 );
	--c-honey3-a24: rgba( 254, 215, 70, .24 );
	--c-honey3-a25: rgba( 254, 215, 70, .25 );
	--c-honey3-a28: rgba( 254, 215, 70, .28 );
	--c-honey3-a35: rgba( 254, 215, 70, .35 );
	--c-honey3-a40: rgba( 254, 215, 70, .40 );
	--c-honey3-a42: rgba( 254, 215, 70, .42 );
	--c-white-a35:  rgba( 255, 255, 255, .35 );
	--c-white-a50:  rgba( 255, 255, 255, .50 );
	--c-white-a75:  rgba( 255, 255, 255, .75 );
	--c-white-a80:  rgba( 255, 255, 255, .80 );
	--c-white-a90:  rgba( 255, 255, 255, .90 );
	--c-paper-a90:  rgba( 255, 253, 248, .90 );
	--c-paper-a94:  rgba( 255, 253, 248, .94 );
	--c-sand-a12:   rgba( 250, 243, 227, .12 );
	--c-sand-a14:   rgba( 250, 243, 227, .14 );
	--c-sand-a55:   rgba( 250, 243, 227, .55 );

	/* ---------------------------------------------------------------
	 * 2. PRIMITIVES — spacing (name = px value)
	 * ------------------------------------------------------------- */
	--space-2:  2px;   --space-2-5: 2.5px; --space-3: 3px;   --space-4:  4px;   --space-5:  5px;
	--space-6:  6px;   --space-7:  7px;   --space-8:  8px;   --space-9:  9px;
	--space-10: 10px;  --space-11: 11px;  --space-12: 12px;  --space-13: 13px;
	--space-14: 14px;  --space-15: 15px;  --space-16: 16px;  --space-18: 18px;
	--space-20: 20px;  --space-22: 22px;  --space-24: 24px;  --space-26: 26px;
	--space-28: 28px;  --space-30: 30px;  --space-34: 34px;  --space-36: 36px;
	--space-38: 38px;  --space-40: 40px;  --space-42: 42px;  --space-44: 44px;  --space-48: 48px;
	--space-52: 52px;  --space-58: 58px;  --space-66: 66px;  --space-19: 19px;
	--space-54: 54px;  --space-56: 56px;  --space-62: 62px;  --space-64: 64px;  --space-70: 70px;
	--space-78: 78px;  --space-80: 80px;  --space-86: 86px;  --space-84: 84px;  --space-88: 88px;  --space-96: 96px;  --space-120: 120px;
	--space-172: 172px; --space-220: 220px;

	/* ---------------------------------------------------------------
	 * 3. PRIMITIVES — radius
	 * ------------------------------------------------------------- */
	--radius-2:  2px;
	--radius-4:  4px;
	--radius-8:  8px;
	--radius-12: 12px;
	--radius-14: 14px;
	--radius-16: 16px;
	--radius-18: 18px;
	--radius-28: 28px;
	--radius-pill:   999px;
	--radius-circle: 50%;

	/* ---------------------------------------------------------------
	 * 4. PRIMITIVES — typography
	 * ------------------------------------------------------------- */
	--font-display: 'Fraunces', Georgia, serif;
	--font-body:    'Hanken Grotesk', system-ui, sans-serif;

	--fs-9-7:  9.7px;
	--fs-11:   11px;    --fs-11-5: 11.5px;
	--fs-12:   12px;    --fs-12-5: 12.5px;
	--fs-13:   13px;    --fs-13-5: 13.5px;
	--fs-14:   14px;    --fs-14-5: 14.5px;
	--fs-15:   15px;    --fs-15-5: 15.5px;
	--fs-16:   16px;    --fs-16-5: 16.5px;
	--fs-17:   17px;
	--fs-18:   18px;    --fs-18-5: 18.5px;
	--fs-19:   19px;
	--fs-20:   20px;
	--fs-21:   21px;
	--fs-22:   22px;
	--fs-24:   24px;
	--fs-26:   26px;
	--fs-28:   28px;
	--fs-30:   30px;

	/* Fluid display sizes, verbatim from the mockups. */
	--fs-d1: clamp( 44px, 4.6vw, 64px );
	--fs-d2: clamp( 38px, 4.4vw, 58px );
	--fs-d3: clamp( 36px, 3.8vw, 52px );
	--fs-d4: clamp( 32px, 3.4vw, 46px );
	--fs-d5: clamp( 28px, 3vw, 40px );
	--fs-d6: clamp( 26px, 2.4vw, 34px );

	/* The article hero is the one page with its own display size. */
	--fs-hero-recipe: clamp( 38px, 4.4vw, 60px );

	--lh-tight:   1.06;
	--lh-display: 1.12;
	--lh-snug:  1.25;
	--lh-base:  1.65;
	--lh-180:   1.8;
	--lh-190:   1.9;
	--lh-copy:  1.6;

	/* Fraunces and Hanken Grotesk are variable fonts — the design uses
	   intermediate weights, not just the 400/700 stops. */
	--fw-regular:   400;
	--fw-540:       540;
	--fw-560:       560;
	--fw-580:       580;
	--fw-590:       590;
	--fw-620:       620;
	--fw-medium:    600;
	--fw-bold:      700;
	--fw-black:     800;
	--fw-heavy:     900;

	--ls-tight:  -.01em;
	--ls-caps:   .08em;
	--ls-badge:  .09em;
	--ls-eyelet: .1em;
	--ls-wide:   .12em;
	--ls-label:  .14em;
	--ls-wider:  .16em;
	--ls-widest: .17em;
	--ls-loose:  .34em;

	/* Aliases kept so components can name intent rather than the value. */
	--ls-label-sm:   var( --ls-wide );
	--ls-label-wide: var( --ls-wider );

	/* ---------------------------------------------------------------
	 * 5. PRIMITIVES — elevation
	 * ------------------------------------------------------------- */
	--shadow-card:       0 2px 10px var( --c-cocoa-a07 );
	--shadow-card-alt:   0 2px 10px var( --c-cocoa-a08 );
	--shadow-lift:       0 14px 40px -12px var( --c-cocoa-a18 );
	--shadow-float:      0 30px 70px -20px var( --c-cocoa9-a28 );
	--shadow-float-2:    0 30px 70px -20px var( --c-cocoa9-a32 );
	--shadow-btn:        0 8px 22px -8px var( --c-honey7-a55 ), inset 0 1px 0 var( --c-white-a50 );
	--shadow-btn-hover:  0 18px 44px -14px var( --c-honey7-a55 );
	--shadow-btn-dark:   0 10px 26px -10px var( --c-cocoa9-a55 );
	--shadow-inset-top:  0 2px 0 var( --c-white-a35 );

	--ring-honey:          inset 0 0 0 1.5px var( --c-honey-500 );
	--ring-honey-soft:     inset 0 0 0 1px var( --c-honey7-a30 );
	--ring-honey-soft-2:   inset 0 0 0 1px var( --c-honey7-a35 );
	--ring-hairline:       inset 0 0 0 1px var( --c-cocoa-a14 );
	--ring-hairline-2:     inset 0 0 0 1px var( --c-cocoa-a16 );
	--ring-cocoa:          inset 0 0 0 2px var( --c-cocoa-700 );
	--ring-cocoa-soft:     inset 0 0 0 2px var( --c-cocoa-a22 );
	--ring-cocoa9-soft:    inset 0 0 0 1.5px var( --c-cocoa9-a25 );
	--ring-focus:          0 0 0 2px var( --c-honey-100 );

	--shadow-tab-active: 0 4px 14px -4px var( --c-cocoa9-a25 );

	--gradient-honey: linear-gradient( 135deg, var( --c-honey-300 ), var( --c-honey-500 ) );

	--blur-header: blur( 14px );

	/* ---------------------------------------------------------------
	 * 6. PRIMITIVES — layout
	 * ------------------------------------------------------------- */
	--container:    1300px;
	--container-px: var( --space-28 );

	/* Readable measures for prose columns. */
	--measure-brand:      300px;   /* footer brand column */
	--measure-sidebar:    340px;   /* article sidebar column */
	--measure-article:    760px;   /* article prose column */
	--measure-hero-intro: 820px;   /* article hero intro column */
	--measure-thumb-sm-w: 72px;    /* small sidebar thumbnail */
	--measure-thumb-sm-h: 58px;
	--measure-narrow:     34ch;
	--measure-base:       62ch;
	--measure-wide:       78ch;

	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1200px;

	--transition-fast: .2s;
	--transition-base: .25s;
	--transition-slow: .45s;

	/* ---------------------------------------------------------------
	 * 7. SEMANTIC ALIASES — what components reference
	 * ------------------------------------------------------------- */
	--color-text:        var( --c-cocoa-400 );
	--color-heading:     var( --c-cocoa-700 );
	--color-heading-alt: var( --c-cocoa-900 );
	--color-muted:       var( --c-cocoa-500 );
	--color-accent:      var( --c-honey-500 );
	--color-accent-soft: var( --c-honey-300 );
	--color-accent-deep: var( --c-honey-700 );
	--color-brand-red:   var( --c-red-500 );
	--color-success:     var( --c-green-500 );

	--surface-page:    var( --c-paper );
	--surface-raised:  var( --c-white );
	--surface-sand:    var( --c-sand-100 );
	--surface-cream:   var( --c-honey-100 );
	--surface-dark:    var( --c-cocoa-900 );
	--surface-header:  var( --c-paper-a90 );

	--color-border:        var( --c-cocoa-a08 );
	--color-border-strong: var( --c-cocoa-a14 );
	--color-on-dark:       var( --c-sand-200 );

	--section-y:  var( --space-96 );
	--gap-card:   var( --space-24 );
	--gap-grid:   var( --space-22 );
}