/* ============================================================
   PLANT MEAT — design tokens
   ------------------------------------------------------------
   Green and white. White carries the page, green carries the
   brand, and the food supplies every other colour. There is no
   accent colour on purpose: an orange or brass accent was the
   thing the earlier concepts got wrong.

   Shape rule: everything is sharp-cornered except buttons,
   which are true ovals. Light theme only — the brand is
   defined as green on white.

   The legacy names (--verde, --sage, --mono…) are kept as
   aliases so pages not yet redrawn keep working while they
   move onto the new system.
   ============================================================ */

:root {
  /* -- surfaces --------------------------------------------- */
  --paper:        #FAF9F5;   /* warm white — the page            */
  --paper-lift:   #FEFEFC;   /* raised surfaces (rare)           */
  --paper-sink:   #F0EFE8;   /* the one recessed band tone       */
  --paper-warm:   #F4F3ED;
  --stone:        #E7E5DC;
  --stone-deep:   #D2CFC3;

  /* -- green ------------------------------------------------ */
  --green:        #0F3A2A;   /* brand: display type, footer, CTA */
  --green-deep:   #0A2A1E;   /* pressed / hover on solid         */
  --green-2:      #1E5B3C;   /* links and accents on white       */
  --green-soft:   #DCE5DE;   /* rare tint                        */

  /* -- ink: green-black, never a neutral grey ---------------- */
  --ink:          #0F1A15;
  --ink-2:        #38443E;
  --ink-3:        #58625C;   /* captions — AA on paper and sink  */
  --ink-4:        #B3B9B4;   /* hairlines only, never text       */

  /* -- food colours (illustration only) --------------------- */
  --pea:          #5E9448;
  --pea-deep:     #3F6B3A;

  /* -- channels for rgba() ---------------------------------- */
  --paper-rgb:    250, 249, 245;
  --ink-rgb:      15, 26, 21;
  --green-rgb:    15, 58, 42;
  --stone-rgb:    231, 229, 220;

  --rule:         rgba(var(--ink-rgb), 0.14);
  --rule-soft:    rgba(var(--ink-rgb), 0.07);
  --shadow-sm:    0 1px 2px rgba(var(--ink-rgb), .06), 0 2px 8px rgba(var(--ink-rgb), .05);
  --shadow-md:    0 2px 6px rgba(var(--ink-rgb), .05), 0 18px 40px -16px rgba(var(--ink-rgb), .18);
  --shadow-lg:    0 4px 10px rgba(var(--ink-rgb), .05), 0 30px 60px -20px rgba(var(--ink-rgb), .22);

  /* -- type ------------------------------------------------- */
  --display: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --body:    "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:   "Instrument Serif", "Times New Roman", serif;
  --hand:    "Nothing You Could Do", "Bradley Hand", cursive;

  /* fluid scale — clamp(phone, fluid, ceiling) */
  --t-hero:   clamp(3.6rem, 0.6rem + 12.4vw, 13.5rem);   /* MEAT, REBUILT.          */
  --t-mega:   clamp(3rem,   0.8rem + 9vw,    10rem);
  --t-xxl:    clamp(2.5rem, 1rem + 5.6vw,    6.25rem);
  --t-xl:     clamp(2rem,   1.1rem + 3.4vw,  4rem);
  --t-lg:     clamp(1.45rem, 1.1rem + 1.5vw, 2.4rem);
  --t-statement: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem); /* serif caps statements   */
  --t-md:     clamp(1.125rem, 1.04rem + .35vw, 1.35rem);
  --t-base:   1.0625rem;
  --t-sm:     0.9375rem;
  --t-xs:     0.8125rem;
  --t-micro:  0.6875rem;                                  /* 11px wide caps captions */

  /* -- rhythm (density 2: gallery-airy) --------------------- */
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --band:     clamp(6rem, 14vw, 13rem);
  --maxw:     1600px;
  --measure:  58ch;

  /* -- motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-soft:   cubic-bezier(.25, .8, .25, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:  .3s;
  --dur:       .6s;
  --dur-slow:  1.2s;

  /* -- shape ------------------------------------------------ */
  --radius:      0;
  --radius-lg:   0;
  --radius-pill: 999px;
  --nav-h:       72px;

  /* -- legacy aliases --------------------------------------- */
  --verde:       var(--green);
  --verde-deep:  var(--green-deep);
  --verde-tint:  var(--green-soft);
  --verde-rgb:   var(--green-rgb);
  --sage:        var(--stone);
  --sage-deep:   var(--stone-deep);
  --mono:        var(--display);
}

/* Verde Theory skin — set on <body data-brand="verde">. The café
   is the same system with more atmosphere: slightly deeper white
   and the same green, never terracotta. Its drama comes from
   photography, not from a second palette. */
[data-brand="verde"] {
  --paper:      #F6F5F0;
  --paper-sink: #ECEBE3;
  --paper-rgb:  246, 245, 240;
}