/* Ed's Kitchen design tokens — generated from design-system/tokens/*.css. Do not hand-edit. */

/* ---- tokens/fonts.css ---- */
/* Webfonts.
   The supplied logo artwork is a thin geometric sans in the Futura / Century Gothic
   lineage. No font binaries were supplied, so the system ships open-licence
   stand-ins served from Google Fonts:
     Jost  — Futura-lineage geometric sans. Display, UI, logotype-adjacent settings.
     Lora  — warm transitional serif. Editorial body, menus, pull quotes.
   Replace with licensed Futura PT / Century Gothic webfonts by swapping the
   @import below for local @font-face rules and updating --font-display. */
/* Google Fonts are enqueued by the theme (see inc/assets.php) rather than @imported. */

/* ---- tokens/colors.css ---- */
:root{
  /* ---- Base ramps ------------------------------------------------------ */
  /* Slate — sampled from the logo wordmark (#51585E) and extended. */
  --slate-950:#14181A; --slate-900:#1E2225; --slate-800:#2B3136; --slate-700:#3D444A;
  --slate-600:#51585E; --slate-500:#6B737A; --slate-400:#8D959B; --slate-300:#B4BABE;
  --slate-200:#D6DADD; --slate-100:#E9ECEE; --slate-50:#F4F6F7;

  /* Brick — sampled from the logo rules (#8C2E2C) and extended. */
  --brick-900:#4E1817; --brick-800:#6B211F; --brick-700:#8C2E2C; --brick-600:#A63A34;
  --brick-500:#BE4A42; --brick-400:#D07A73; --brick-300:#E0A9A3; --brick-200:#EFD2CE;
  --brick-100:#F7E6E3; --brick-50:#FCF4F2;

  /* Bone — warm paper neutrals. The brand's default page ground. */
  --bone-50:#FCFAF7; --bone-100:#F6F2EB; --bone-200:#EDE7DD; --bone-300:#DFD7C9;
  --bone-400:#C9BEAB;

  /* Brass — sparing premium accent (events, awards, dividers on dark). */
  --brass-600:#8F6C36; --brass-500:#B08A4F; --brass-400:#C9A876; --brass-100:#F0E6D4;

  /* Olive — the only "fresh/produce" hue; used for success + dietary marks. */
  --olive-700:#3F5540; --olive-500:#55704F; --olive-100:#E4EADF;

  --white:#FFFFFF; --black:#000000;

  /* ---- Semantic: surfaces --------------------------------------------- */
  --surface-page:var(--bone-100);
  --surface-page-alt:var(--bone-200);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--bone-200);
  --surface-inverse:var(--slate-900);
  --surface-inverse-alt:var(--slate-800);
  --surface-accent:var(--brick-700);
  --surface-accent-soft:var(--brick-50);
  --surface-overlay:rgba(20,24,26,.62);
  --surface-scrim:linear-gradient(180deg,rgba(20,24,26,0) 0%,rgba(20,24,26,.10) 42%,rgba(20,24,26,.72) 100%);

  /* ---- Semantic: text -------------------------------------------------- */
  --text-heading:var(--slate-900);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-500);
  --text-subtle:var(--slate-400);
  --text-accent:var(--brick-700);
  --text-on-dark:var(--bone-100);
  --text-on-dark-muted:rgba(246,242,235,.68);
  --text-on-accent:var(--bone-50);
  --text-link:var(--brick-700);
  --text-link-hover:var(--brick-900);

  /* ---- Semantic: lines ------------------------------------------------- */
  --border-hairline:var(--slate-200);
  --border-default:var(--slate-300);
  --border-strong:var(--slate-600);
  --border-accent:var(--brick-700);
  --border-on-dark:rgba(246,242,235,.18);
  --rule-logo:var(--brick-700);

  /* ---- Semantic: status ------------------------------------------------ */
  --status-success:var(--olive-500); --status-success-bg:var(--olive-100);
  --status-warning:var(--brass-600); --status-warning-bg:var(--brass-100);
  --status-danger:var(--brick-600);  --status-danger-bg:var(--brick-100);
  --status-info:var(--slate-600);    --status-info-bg:var(--slate-100);

  /* ---- Semantic: interaction ------------------------------------------ */
  --focus-ring:var(--brick-600);
  --focus-ring-shadow:0 0 0 3px rgba(166,58,52,.28);
  --selection-bg:var(--brick-200);
}

/* ---- tokens/typography.css ---- */
:root{
  /* Families */
  --font-display:"Jost","Century Gothic","Futura PT",Futura,"Trebuchet MS",sans-serif;
  --font-body:"Jost","Century Gothic",Futura,"Trebuchet MS",sans-serif;
  --font-serif:"Lora","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Weights — the brand lives at the light end. 700 is off-limits in display. */
  --weight-thin:200; /* @kind font */
  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */

  /* Sizes */
  --size-display-1:clamp(44px,6.6vw,86px);
  --size-display-2:clamp(36px,4.6vw,60px);
  --size-h1:clamp(32px,3.4vw,46px);
  --size-h2:clamp(26px,2.6vw,34px);
  --size-h3:24px; --size-h4:20px; --size-h5:17px;
  --size-body-lg:19px; --size-body:17px; --size-body-sm:15px;
  --size-caption:13px; --size-eyebrow:12px; --size-micro:11px;

  /* Line heights */
  --leading-display:1.06; /* @kind font */
  --leading-heading:1.18; /* @kind font */
  --leading-snug:1.35; /* @kind font */
  --leading-body:1.68; /* @kind font */
  --leading-loose:1.8; /* @kind font */

  /* Tracking — wide letterspacing on caps is the logo's core signature. */
  --tracking-logo:0.34em; /* @kind font */
  --tracking-eyebrow:0.26em; /* @kind font */
  --tracking-caps:0.16em; /* @kind font */
  --tracking-heading:0.02em; /* @kind font */
  --tracking-body:0; /* @kind font */

  /* Composite roles */
  --type-display-1:var(--weight-thin) var(--size-display-1)/var(--leading-display) var(--font-display); /* @kind font */
  --type-display-2:var(--weight-thin) var(--size-display-2)/var(--leading-display) var(--font-display); /* @kind font */
  --type-h1:var(--weight-light) var(--size-h1)/var(--leading-heading) var(--font-display); /* @kind font */
  --type-h2:var(--weight-light) var(--size-h2)/var(--leading-heading) var(--font-display); /* @kind font */
  --type-h3:var(--weight-regular) var(--size-h3)/var(--leading-snug) var(--font-display); /* @kind font */
  --type-h4:var(--weight-medium) var(--size-h4)/var(--leading-snug) var(--font-display); /* @kind font */
  --type-h5:var(--weight-medium) var(--size-h5)/var(--leading-snug) var(--font-display); /* @kind font */
  --type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body); /* @kind font */
  --type-body-lg:var(--weight-light) var(--size-body-lg)/var(--leading-body) var(--font-body); /* @kind font */
  --type-serif-lead:var(--weight-regular) var(--size-body-lg)/var(--leading-body) var(--font-serif); /* @kind font */
  --type-eyebrow:var(--weight-medium) var(--size-eyebrow)/1.4 var(--font-display); /* @kind font */
  --type-button:var(--weight-medium) var(--size-caption)/1 var(--font-display); /* @kind font */
}

/* ---- tokens/spacing.css ---- */
:root{
  --space-0:0; --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px;
  --space-5:16px; --space-6:20px; --space-7:24px; --space-8:32px; --space-9:40px;
  --space-10:48px; --space-11:64px; --space-12:80px; --space-13:96px;
  --space-14:128px; --space-15:160px;

  /* Rhythm roles */
  --gap-inline:10px;        /* icon ↔ label */
  --gap-tight:16px;         /* related controls */
  --gap-stack:24px;         /* paragraph / field stack */
  --gap-group:40px;         /* sub-sections */
  --gap-block:80px;         /* blocks inside a section */
  --section-y:clamp(72px,9vw,144px); /* @kind spacing */
  --section-y-tight:clamp(48px,6vw,88px); /* @kind spacing */
}

/* ---- tokens/radius.css ---- */
:root{
  /* The brand is square and editorial. Radius is near-absent by design. */
  --radius-none:0; --radius-xs:2px; --radius-sm:3px; --radius-md:6px;
  --radius-lg:10px; --radius-pill:999px; --radius-circle:50%;

  --radius-button:var(--radius-xs);
  --radius-input:var(--radius-xs);
  --radius-card:var(--radius-xs);
  --radius-image:var(--radius-none);
  --radius-tag:var(--radius-pill);
  --radius-dialog:var(--radius-sm);

  /* Hairline rule weights — the logo's double rule is 3px at 1200px wide (~0.25%). */
  --rule-thin:1px; --rule-medium:2px; --rule-thick:3px; /* @kind spacing */
}

/* ---- tokens/elevation.css ---- */
:root{
  /* Shadows are quiet: cool slate, low opacity, generous blur. Never coloured. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,24,26,.06);
  --shadow-sm:0 2px 10px rgba(20,24,26,.07);
  --shadow-md:0 10px 28px -8px rgba(20,24,26,.14);
  --shadow-lg:0 28px 64px -24px rgba(20,24,26,.26);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
  --shadow-focus:var(--focus-ring-shadow);
}

/* ---- tokens/motion.css ---- */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --duration-slower:620ms; /* @kind other */
  --duration-reveal:900ms; /* @kind other */

  --ease-standard:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,.05,.36,1); /* @kind other */
  --ease-linear:linear; /* @kind other */

  /* No bounce, no overshoot, no spring. Motion is a slow fade + small rise. */
  --transition-color:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-transform:transform var(--duration-base) var(--ease-out-soft); /* @kind other */
  --transition-reveal:opacity var(--duration-reveal) var(--ease-out-soft),transform var(--duration-reveal) var(--ease-out-soft); /* @kind other */
  --lift-hover:translateY(-2px); /* @kind other */
  --press-scale:scale(.985); /* @kind other */
  --image-zoom-hover:scale(1.04); /* @kind other */
}

/* ---- tokens/layout.css ---- */
:root{
  --container-max:1240px;
  --container-wide:1440px;
  --container-narrow:720px;
  --container-text:64ch;
  --gutter:clamp(20px,4.4vw,64px); /* @kind spacing */
  --header-height:84px;
  --header-height-compact:64px;
  --grid-columns:12; /* @kind other */
  --grid-gap:clamp(16px,2vw,32px); /* @kind spacing */
  --z-base:0; /* @kind other */
  --z-raised:10; /* @kind other */
  --z-sticky:100; /* @kind other */
  --z-header:200; /* @kind other */
  --z-overlay:300; /* @kind other */
  --z-dialog:400; /* @kind other */
  --z-toast:500; /* @kind other */
  --ratio-hero:21/9; /* @kind other */
  --ratio-wide:16/9; /* @kind other */
  --ratio-photo:4/3; /* @kind other */
  --ratio-portrait:3/4; /* @kind other */
  --ratio-square:1/1; /* @kind other */
}

/* ---- tokens/base.css ---- */
/* Minimal element defaults. Components carry their own styling. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--selection-bg);color:var(--slate-900)}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading);font-family:var(--font-display);font-weight:var(--weight-light);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid rgba(140,46,44,.32);transition:var(--transition-color),border-color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--brick-700)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
hr{border:0;border-top:var(--rule-thin) solid var(--border-hairline);margin:var(--space-8) 0}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}