/**
 * The Food Gene — Design System Tokens
 * Version: 3.0 (Site V2) · Cotswold Botanical
 *
 * BR-002 lists this palette by name and hex, and these are those values. Two
 * colours are explicitly forbidden and appear nowhere in this file or any other:
 * the old warm cream #FAF7F2 and the old orange terracotta #C86041.
 *
 * NFR-008: every colour, space and type decision is a custom property declared
 * here. Templates carry no raw colour codes. The legacy --accent-terracotta
 * alias that V1 used has been REMOVED, as NFR-008 requires once no style
 * depends on it — the semantic --accent-juniper is the only name for the accent.
 *
 * BR-012 governs where the greys may be used, and each one says so below.
 */

:root {
  /* ── Canvas and surfaces (BR-002) ──────────────────────────────────────── */
  --bg-primary:         #F5F7F5;  /* Morning Celadon Linen — the page */
  --bg-surface:         #FFFFFF;  /* Porcelain White — header, cards, panels */
  --bg-surface-warm:    #EBF0EC;  /* Soft Herb Wash — secondary panels, callouts */
  --bg-surface-subtle:  #ECF1EC;  /* Pale Botanical Wash — pills, chips, filters */
  --bg-surface-dark:    #16201B;  /* Botanical Pine Charcoal — footer, dark areas */
  --bg-accent-soft:     #E3EBE4;  /* Juniper Tint — featured tips, chef highlights */
  --bg-sage-soft:       #E8EFE9;  /* Frosted Sage Tint — dietary badges, notices */
  --bg-placeholder:     #EBF0EC;  /* BR-011 — the ONE missing-photo background */

  /* ── The single main accent (BR-002) ───────────────────────────────────── */
  /* BR-002 is explicit that there is one main accent: buttons, links, active
     states. Resisting a second accent is what keeps the food photography the
     brightest thing on the page (BR-001). */
  --accent-juniper:       #264336;  /* English Juniper Pine */
  --accent-juniper-hover: #1C3329;  /* Deep Forest Spruce */

  /* Secondary, for tags and quiet supporting marks */
  --accent-sage:        #5C7C69;  /* Frosted Wild Sage */
  --accent-sage-strong: #476252;  /* Shaded Thyme — BR-012: use THIS for small
                                     labels on the pale sage tint, never sage */

  /* ── Text (BR-002, BR-012) ─────────────────────────────────────────────── */
  --text-primary:      #18221D;  /* Deep Botanical Charcoal — 15.8:1 on white */
  --text-secondary:    #49564F;  /* Smoked Peat — small text, 7.5:1 on white */
  --text-muted:        #73827A;  /* Silver Thyme — 4.6:1. BR-012: icons, input
                                    borders and LARGE text only. Never small
                                    text on the page background. */
  --text-on-dark:      #F5F7F5;  /* Cool Mist Linen — text on dark surfaces */
  --text-on-dark-muted:#A3B0A8;  /* Muted Celadon Grey — footer small print */
  --text-inverse:      #FFFFFF;  /* on the juniper accent */

  /* ── Lines (BR-002) ────────────────────────────────────────────────────── */
  --border-subtle: #DBE3DC;  /* Pale Herb Border — cards, rules, inputs */
  --border-medium: #BFCABF;  /* Defined Herb Border — active tabs, focus rings */
  --border-strong: #18221D;  /* editorial lines, print borders */
  --border-sand:   #B7C0B8;  /* Neutral Mineral Sand — decorative ticks */

  /* ── Type (BR-003, NFR-003) ────────────────────────────────────────────── */
  /* Two families only. BR-003 keeps display type away from small sizes, where
     it costs legibility, so nothing below --text-lg uses --font-display. */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px — the reading size */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  2.875rem;   /* 46px */
  --text-hero: 3.5rem;     /* 56px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.65;

  --tracking-wide: 0.08em;   /* eyebrow labels and small caps */

  /* ── Space ─────────────────────────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* The side gutter. 1rem on a phone is the minimum that stops text touching
     the bezel; NFR-010 forbids clipped content at any common width. */
  --gutter: 1rem;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --width-page:    1280px;  /* matches the Large display size (MED-008) */
  --width-reading: 720px;   /* the reading column sits inside Medium (800px) */
  --width-narrow:  560px;

  /* MED-008 display sizes, so CSS and PHP cannot drift apart */
  --media-small:  400px;
  --media-medium: 800px;
  --media-large:  1280px;

  /* ── Shape (BR-004) ───────────────────────────────────────────────────── */
  /* BR-004 asks for editorial geometry: predominantly square, only SUBTLE
     rounding. These are deliberately small numbers. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;   /* badges and chips only */

  /* ── Elevation (BR-001 permits the V1 soft shadows, restyled) ──────────── */
  /* Tinted with juniper rather than black, so a shadow reads as shade on a
     green-grey page instead of a grey smudge. */
  --shadow-sm: 0 1px 2px rgba(38, 67, 54, 0.06);
  --shadow-md: 0 2px 8px rgba(38, 67, 54, 0.08);
  --shadow-lg: 0 6px 24px rgba(38, 67, 54, 0.12);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-smooth: 200ms ease;

  /* ── Controls (NFR-004) ───────────────────────────────────────────────── */
  /* 44px is the WCAG target size NFR-004 and NAV-007 both require. Holding it
     as a token means no control can quietly be built smaller. */
  --tap-target: 44px;
  --focus-ring: 2px solid var(--accent-juniper);
  --focus-offset: 2px;

  --z-header: 100;
  --z-panel:  200;
  --z-modal:  300;
}

/**
 * FUT-013 (Sprint 2): a dark theme built from Cotswold Botanical dark tokens,
 * following the reader's device setting. Sprint 1 ships the light theme only,
 * so there is deliberately no prefers-color-scheme block here yet — a partial
 * dark theme is worse than none, and BR-002's contrast rules would need
 * re-deriving for dark surfaces rather than assumed to carry over.
 */