/* The look's shared settings (System v2): colours, spacing, shapes, shadows and
   text styles, used by both pages (index.html, mobile.html) and the shared CSS
   files. Loaded first, after fonts.css. The names follow the After Figma design
   (https://www.figma.com/design/f0eaKtbwqzax61pYTX8LgP): "text/primary" there is
   --text-primary here. See "System v2 look" in CLAUDE.md. */
:root{
  /* ---- Palette: the raw colours. Use the roles below, not these.
     "Warm linen" (Mari, 2026-10-22): the neutrals carry a little of the brand
     brown's warmth (they were pure greys: #fcfcfc, #f6f6f6, #e5e5e5, #616161),
     and the selection tint is a soft brown (was salmon #f6e3dc, with
     orange-brown #8f3a22 text and an orange #b5472a drag outline). ---- */
  --palette-neutral-canvas:#faf8f5;
  --palette-neutral-subtle:#f3eeea;
  --palette-neutral-border:#e5ddd6;
  --palette-neutral-ink:#2b2623;
  --palette-neutral-muted:#675b54;
  --palette-neutral-card:#fdfcfa;   /* filled meals on the calendar: a touch lighter than the page (Mari, 2026-10-23; were #faf8f5 with a border) */
  --palette-brand-primary:#4d251b;
  --palette-brand-hover:#3d1d16;
  --palette-brand-tint:#ece2dc;
  --palette-brand-blush:#f5ede8;    /* meal labels on the calendar: lighter than the chips, a hint of the brown (Mari, 2026-10-22; was sand #ebe4dd) */
  --palette-warning-surface:#fffaee;
  --palette-warning-border:#ffedc1;

  /* ---- Colour roles. Two roles can share a colour and still stay separate. ---- */
  --surface-canvas:var(--palette-neutral-canvas);    /* page background */
  --surface-panel:var(--palette-neutral-canvas);     /* header, panels, pop-ups */
  --surface-card:var(--palette-neutral-card);       /* filled meal slots on the calendar */
  --surface-subtle:var(--palette-neutral-subtle);    /* chips, empty slots, light hover fills */
  --surface-label:var(--palette-brand-blush);        /* the Breakfast / Lunch / Dinner strips */
  --border-default:var(--palette-neutral-border);    /* borders and dividers */
  --text-primary:var(--palette-neutral-ink);         /* text */
  --text-secondary:var(--palette-neutral-muted);     /* muted text, hints */
  --text-inverse:var(--palette-neutral-canvas);      /* text on dark buttons */
  --action-primary:var(--palette-brand-primary);     /* primary button, "+ Add item", today, drag-over */
  --action-hover:var(--palette-brand-hover);         /* primary button on hover */
  --selection-surface:var(--palette-brand-tint);     /* selected / just-added / drag-target fill */
  --selection-text:var(--palette-brand-primary);     /* text on that fill: the brand brown */
  --feedback-warning-surface:var(--palette-warning-surface); /* yellow notes */
  --feedback-warning-border:var(--palette-warning-border);
  --feedback-warning-link:var(--palette-brand-primary);      /* recipe names in a yellow note: brown (Mari, 2026-10-22; was #c04c2c) */
  --overlay-scrim:color-mix(in srgb, var(--palette-neutral-ink) 45%, transparent);   /* behind pop-ups */
  --drag-outline:color-mix(in srgb, var(--palette-brand-primary) 40%, transparent); /* dashed outline of every meal while dragging */

  /* ---- Spacing: every gap and padding is one of these (Figma's 4px scale;
     the steps nobody uses yet, 0 / 28 / 48 / 56 / 64, were removed in Stage 6:
     add one back here when a design needs it). ---- */
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-32:32px;
  --space-36:36px;
  --space-40:40px;
  --space-44:44px;

  /* ---- Shape and sizes (not spacing: they don't follow the 4px rule). ---- */
  --radius-base:4px;           /* small buttons, pop-ups */
  --radius-thumbnail:6px;      /* chip photos */
  --radius-chip:8px;           /* chips, "+ Add item", photos in phone meal cards */
  --radius-control:8px;        /* buttons, inputs */
  --radius-card:8px;           /* drawer and picker recipe cards */
  --radius-slot:12px;          /* calendar slots, phone meal cards and week cells */
  --size-control-default:44px; /* header buttons and inputs */
  --size-control-form:40px;    /* buttons and inputs inside forms */
  --size-chip:36px;            /* a recipe chip in a calendar slot */
  --size-add-item:32px;        /* "+ Add item" in a calendar slot */

  /* ---- Elevation ---- */
  --shadow:0 1px 3px rgb(60 40 20 / 8%);
  --shadow-lift:0 6px 16px rgb(60 40 20 / 16%);
  --shadow-float:0 12px 32px rgb(60 40 20 / 20%);
  /* ---- Icons: the line weight of every icon, whatever its size (Mari, 2026-10-22) ---- */
  --icon-stroke:1px;

  --shadow-drag:0 8px 14px rgb(60 40 20 / 35%);  /* the photo that follows a dragged recipe (Figma "Drag ghost"; a drop-shadow() filter) */

  /* ---- Text styles: the 8 roles. Use as `font:var(--type-body)`; Fraunces
     roles also need `font-variation-settings:var(--fraunces-axes)`, and the
     title `letter-spacing:var(--tracking-title)`. ---- */
  --font-display:"Fraunces", Georgia, serif;
  --font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fraunces-axes:"WONK" 1, "SOFT" 0;
  --tracking-title:-0.01em;
  --type-title:400 24px/30px var(--font-display);
  --type-heading-large:400 24px/36px var(--font-display);
  --type-heading-large-semibold:600 24px/36px var(--font-display);
  --type-heading-small:400 16px/24px var(--font-ui);
  --type-heading-small-semibold:600 16px/24px var(--font-ui);
  --type-body:400 14px/21px var(--font-ui);
  --type-body-semibold:600 14px/21px var(--font-ui);
  --type-support:400 12px/16px var(--font-ui);

}