/* ============================================================================
   DayFood 2.0 — tokens. The ONLY df2 sheet that may carry a literal colour.
   DayFood 2.0 = Arena's Editorial Calm 2.0 component system (structure, rhythm,
   radii, controls, motion) dressed in DayFood's own tokens (brand red, Inter,
   the neutral greys of app/assets/tailwind/application.css).
   FULLY SEPARATE from Tailwind / maquina_components: every token is --df-*, so
   a Tailwind utility inside a df2 page can never pick up a df2 value, and df2
   never reads --primary / --border / --muted. Scope: `.df2` (the layout puts it
   on <html>; a future storefront page may put it on a wrapper).
   Docs + rules: docs/design/DF2.md · showcase: /admin/design_system
   ============================================================================ */

.df2 {
  /* ── primitive ramps (oklch-derived, hex for reach; contrast vs white noted) ── */
  /* red — DayFood brand hue 22. 500 is THE brand red (#F04148, the PWA theme
     colour) at 3.8:1: marks and decoration only, never text or a CTA fill. */
  --df-red-50:  #FFF2F2;
  --df-red-100: #FFE2E2;
  --df-red-200: #FFC9C9;
  --df-red-500: #F04148;   /* brand */
  --df-red-600: #DC252F;   /* 4.8:1 — CTA fill with white text */
  --df-red-700: #B91B22;   /* 6.5:1 — text accent */
  --df-red-800: #991C1E;
  /* neutral — DayFood's chroma-0 greys (maquina --border .922 = 200, --muted .97 = 100) */
  --df-neutral-50:  #FAFAFA;
  --df-neutral-100: #F4F4F4;
  --df-neutral-200: #E5E5E5;
  --df-neutral-300: #D4D4D4;
  --df-neutral-400: #A3A3A3;
  --df-neutral-600: #525252;   /* 7.5:1 on canvas — the muted text floor */
  --df-neutral-700: #404040;
  --df-neutral-950: #0A0A0A;   /* maquina --foreground .145 */

  /* ── semantic colour — components read THESE, never a ramp step ── */
  --df-canvas: var(--df-neutral-50);
  --df-surface: #FFFFFF;
  --df-surface-rgb: 255, 255, 255;
  --df-glass: rgba(var(--df-surface-rgb), .92);
  --df-surface-alt: var(--df-neutral-100);
  --df-ink: var(--df-neutral-950);
  --df-text-2: var(--df-neutral-700);       /* secondary copy (ledes, notes) */
  --df-muted: var(--df-neutral-600);        /* keys, meta, help, placeholders */
  --df-hairline: var(--df-neutral-200);
  --df-hairline-strong: var(--df-neutral-300);
  --df-hairline-hover: var(--df-neutral-400);

  --df-brand: var(--df-red-500);            /* logo mark, decorative dot — not for text */
  --df-accent: var(--df-red-600);           /* CTA fill, focus ring, picked edge, meter */
  --df-accent-strong: var(--df-red-700);    /* links, eyebrows, amounts, outline-button ink */
  --df-accent-strong-rgb: 185, 27, 34;      /* = --df-accent-strong */
  --df-accent-rgb: 220, 37, 47;             /* = --df-accent, for the alpha tints below */
  --df-accent-soft: rgba(var(--df-accent-rgb), .10);
  --df-accent-softer: rgba(var(--df-accent-rgb), .05);
  --df-accent-border: rgba(var(--df-accent-rgb), .26);
  --df-on-accent: #FFFFFF;
  --df-ctl-line: rgba(185, 27, 34, .45);    /* outline control edge: selects, chips, round buttons and outline buttons share it */
  --df-tint-1: #FDF4F4;
  --df-tint-2: #FCEEEF;
  --df-tint-3: #F3D9DB;
  --df-tint-4: #F6B9BC;

  /* status — success hue 168 + warning hue 55 are DayFood's (maquina --success / --warning).
     DANGER is a WINE (hue 5, 9.2:1), not the brand red: on a red brand a red error reads as
     decoration. An error never relies on hue alone — it always carries its icon. */
  --df-ok: #04654C;
  --df-ok-bg: rgba(4, 101, 76, .10);
  --df-ok-border: #B2E5D0;
  --df-warn: #8C4A11;
  --df-warn-bg: rgba(140, 74, 17, .10);
  --df-warn-border: #FACF9E;
  --df-danger: #8A1842;
  --df-danger-bg: rgba(138, 24, 66, .08);
  --df-danger-border: #F6CAD3;
  --df-danger-rgb: 138, 24, 66;

  /* ── type — Inter only (DayFood decision: EC 2.0's serif roles are Inter display weights) ── */
  --df-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --df-text-2xs: 10px;
  --df-text-xs: 12px;
  --df-text-sm: 14px;
  --df-text-md: 16px;
  --df-text-lg: 18px;
  --df-text-xl: 20px;
  --df-text-2xl: 24px;
  /* EXACTLY three display sizes (EC 2.0), fluid 370 → 1440 */
  --df-h-display: clamp(40px, 31.7009px + 2.24299vw, 64px);   /* hero 64 / 40 */
  --df-h-page: clamp(30px, 25.1589px + 1.30841vw, 44px);       /* page h1 44 / 30 */
  --df-h-sec: clamp(24px, 20.5421px + 0.93458vw, 34px);        /* section h2 34 / 24 */
  --df-key-size: 13px;

  /* ── space (4px grid) ── */
  --df-space-1: 4px;
  --df-space-2: 8px;
  --df-space-3: 12px;
  --df-space-4: 16px;
  --df-space-5: 20px;
  --df-space-6: 24px;
  --df-space-8: 32px;
  --df-space-10: 40px;
  --df-space-12: 48px;

  /* ── radius ── */
  --df-radius: 8px;
  --df-radius-pill: 999px;
  --df-r-card: 24px;     /* outline card, empty state, summary */
  --df-r-card-sm: 16px;     /* form card, note, compact row */

  /* ── rhythm ── one section gap; nothing on a page exceeds it */
  --df-gap: 64px;
  --df-head: 24px;                     /* section head → its content */
  --df-grid: var(--df-space-5);        /* card grid gap */
  --df-card-pad: var(--df-space-8);    /* ≥ half the corner radius */
  --df-col: 1240px;
  --df-col-inset: var(--df-space-8);   /* 1240 − 2 × 32 = 1176 content */
  --df-content: 1176px;
  --df-rail-w: 380px;                  /* summary rail beside a main column */
  --df-fc-x: var(--df-space-6);        /* form card inline inset */
  --df-fc-y: var(--df-space-4);        /* form card field-row block inset */

  /* ── chrome ── */
  --df-sitebar-h: 77px;                /* 76 + the hairline foot */
  --df-flowhead-h: 56px;               /* phones: the sticky flow header (§19) */
  --df-tabbar-h: 61px;                 /* 60 + the hairline top edge */
  --df-tabbar-clear: 72px;             /* body padding that clears the bar with a gap above it */

  /* ── elevation ── */
  --df-shadow-card: 0 1px 2px rgba(10, 10, 10, .04), 0 4px 16px rgba(10, 10, 10, .04);
  --df-shadow-card-hover: 0 2px 4px rgba(10, 10, 10, .06), 0 12px 28px rgba(10, 10, 10, .08);
  --df-shadow-float: 0 10px 40px rgba(10, 10, 10, .14);
  --df-shadow-bar: 0 -8px 28px -18px rgba(10, 10, 10, .4);
  --df-shadow-thumb: 0 0 0 1px var(--df-hairline-strong), 0 1px 2px rgba(10, 10, 10, .08);

  /* ── controls ── */
  --df-cta-h: 56px;
  --df-cta-h-sm: 44px;
  --df-bar-h: 89px;                    /* desktop footer action bar */
  --df-dock-h: 141px;                  /* phones: the 2-row docked bar */
  --df-dock-h-1: 77px;                 /* phones: a 1-row docked bar (primary only) */
  --df-round-btn: 44px;
  --df-touch: 48px;                    /* coarse pointers: every primary and phone control */

  /* ── motion — quiet; nothing over 400ms (DayFood's --ease-out / --ease-drawer curves) ── */
  --df-ease: cubic-bezier(.2, .7, .2, 1);
  --df-ease-out: cubic-bezier(.23, 1, .32, 1);
  --df-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --df-dur-1: .15s;                    /* colour */
  --df-dur-2: .2s;                     /* buttons, hover */
  --df-dur-3: .25s;                    /* bars, accordions */
  --df-dur-0: .1s;                     /* press */
  --df-dur-4: .3s;                     /* pop */
  --df-press: .97;
  --df-press-step: .92;                /* a −/+ stepper press (DayFood .stepper-btn) */

  /* ── focus — one double ring (surface gap + accent) ── */
  --df-focus-ring: 0 0 0 2px var(--df-surface), 0 0 0 4px var(--df-accent);
}

@media (max-width: 860px) {
  .df2 {
    --df-gap: 40px;
    --df-card-pad: var(--df-space-6);
    --df-col-inset: var(--df-space-4);
    --df-fc-x: var(--df-space-5);
    --df-fc-y: var(--df-space-3);
    --df-sitebar-h: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .df2 { --df-dur-1: 0s; --df-dur-2: 0s; --df-dur-3: 0s; --df-dur-0: 0s; --df-dur-4: 0s; --df-press: 1; --df-press-step: 1; }
}