/* ==========================================================================
   FITERIA Design Tokens (Quelle: /design/tokens, Brand Guidelines v1 2026)
   Schriften lokal, keine Google-Fonts. Nur Variablen und @font-face,
   keine Komponenten. Einbinden auf jeder Seite vor components.css.
   ========================================================================== */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bebas-neue-latin.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/montserrat-latin-var.woff2") format("woff2")}
@font-face{font-family:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/pacifico-latin.woff2") format("woff2")}

/* --- colors.css --- */
:root{
/* ============================================================
   CORE FOUR — Brand Guidelines v1·2026, page 05.
   Ratio: dominant > accent. Green carries; lime punctuates.
   ============================================================ */
--fit-green-800:#0D643B; /* FITERIA GREEN — masterbrand. C99 M32 Y100 K27 */
--fit-lime-500:#B6D053;  /* FRESH LIME — C36 M0 Y100 K0 */
--fit-ink:#1E221D;       /* INK BLACK — C73 M62 Y70 K74 */
--fit-paper-0:#FFFFFF;   /* WHITE */

/* --- Green ramp: depth, states, backgrounds --- */
--fit-green-900:#072F1C;
--fit-green-700:#12784A;
--fit-green-600:#1B8D59;
--fit-green-200:#B3D9C4;
--fit-green-100:#E3F1E9;

/* --- Lime ramp --- */
--fit-lime-600:#9CBA3A;
--fit-lime-300:#C9DE7A; /* lifted lime — accent text on green, passes 4.5:1 */
--fit-lime-200:#E0EDBB;
--fit-lime-100:#F0F6DD;

/* --- Ink ramp: type and neutral structure --- */
--fit-ink-900:#0E110D;
--fit-ink-700:#3D423B;
--fit-ink-600:#575C54;
--fit-ink-500:#767C73;
--fit-ink-300:#A9AEA5;

/* --- Paper ramp: white is the ground, tints are for separation only --- */
--fit-paper-50:#FAFBF9;
--fit-paper-100:#F4F6F2;
--fit-paper-200:#E8EBE5;
--fit-paper-300:#D5D9D1;

/* ============================================================
   CATEGORY COLOURS — page 06.
   Each product family owns a colour and a mascot so the range
   reads at a glance on shelf. Green stays the masterbrand;
   the category colour leads on FITmeal packaging.
   Each pair is primary + light shade.
   ============================================================ */
--cat-veggie:#0D643B;  --cat-veggie-soft:#B6D053;  /* Veggies & Vegetarian */
--cat-meat:#C13430;    --cat-meat-soft:#F1B979;    /* Meat & Protein */
--cat-fish:#3E69AE;    --cat-fish-soft:#B9DFE8;    /* Fish & Seafood */
--cat-sweet:#7B2E7E;   --cat-sweet-soft:#D47FAE;   /* Sweets & Snacks */
--cat-general:#E2AC43; --cat-general-soft:#FFF2BE; /* General use */

/* --- Category ramps: the five families, dark shade to light shade.
       The 700 step IS the primary above — the ramp's near-duplicates
       (#0B643B, #C03430, #3D68AD, #E2AB43) are collapsed into it. --- */
--cat-veggie-900:#0B4325; --cat-veggie-700:var(--cat-veggie); --cat-veggie-500:#3A9150; --cat-veggie-300:#7EBA56; --cat-veggie-100:#B6D053;
--cat-meat-900:#9B2C29;   --cat-meat-700:var(--cat-meat);     --cat-meat-500:#D93833;   --cat-meat-300:#E48540;   --cat-meat-100:#F1B979;
--cat-fish-900:#264685;   --cat-fish-700:var(--cat-fish);     --cat-fish-500:#406FB2;   --cat-fish-300:#59BFEE;   --cat-fish-100:#B9DFE8;
--cat-sweet-900:#61265F;  --cat-sweet-700:var(--cat-sweet);   --cat-sweet-500:#AF378C;  --cat-sweet-300:#BE5597;  --cat-sweet-100:#D47FAE;
--cat-general-900:#B8853D;--cat-general-700:var(--cat-general);--cat-general-500:#F4C56D;--cat-general-300:#F5CD8D;--cat-general-100:#FFF2BE;

/* Amber is the general-use category colour. It is a ground, never type:
   at 2.1:1 on white it can only carry ink, never sit on it. */
--fit-amber-500:var(--cat-general);
--fit-amber-600:#C08F2E;
--fit-amber-100:var(--cat-general-soft);

/* --- Semantic: text --- */
--text-strong:var(--fit-green-800);
--text-heading:var(--fit-ink);
--text-body:var(--fit-ink-700);
--text-muted:var(--fit-ink-600); /* 6.4:1 on white — ink-500 is 4.3:1 and fails AA */
--text-on-dark:var(--fit-paper-0);
--text-on-dark-muted:rgba(255,255,255,.74);
--text-accent-on-dark:var(--fit-lime-300);
--text-on-accent:var(--fit-ink); /* 9.3:1 on lime — green-on-lime is 4.2:1, display scale only */
--text-link:var(--fit-green-800);
--text-link-hover:var(--fit-green-600);

/* --- Semantic: surfaces --- */
--surface-page:var(--fit-paper-0);
--surface-page-alt:var(--fit-paper-100);
--surface-card:var(--fit-paper-0);
--surface-sunken:var(--fit-paper-200);
--surface-inverse:var(--fit-green-800);
--surface-inverse-deep:var(--fit-green-900);
--surface-ink:var(--fit-ink);
--surface-accent:var(--fit-lime-500);
--surface-accent-soft:var(--fit-lime-100);
--surface-premium:var(--fit-ink);
--surface-highlight:var(--cat-general);

/* --- Semantic: borders & rings --- */
--border-subtle:var(--fit-paper-200);
--border-default:var(--fit-paper-300);
--border-strong:var(--fit-green-800);
--border-on-dark:rgba(255,255,255,.24);
--focus-ring:var(--fit-green-800);

/* --- Semantic: actions --- */
--action-primary-bg:var(--fit-green-800);
--action-primary-bg-hover:var(--fit-green-700);
--action-primary-bg-active:var(--fit-green-900);
--action-primary-fg:var(--fit-paper-0);
--action-accent-bg:var(--fit-lime-500);
--action-accent-bg-hover:var(--fit-lime-600);
--action-accent-fg:var(--text-on-accent);
--action-premium-bg:var(--fit-ink);
--action-premium-bg-hover:var(--fit-ink-700);
--action-premium-fg:var(--fit-paper-0);
--action-quiet-bg:transparent;
--action-quiet-bg-hover:var(--fit-paper-100);
--action-disabled-bg:var(--fit-paper-200);
--action-disabled-fg:var(--fit-ink-500);

/* --- Semantic: status. Every status colour is now a real palette
       colour — the red is Meat & Protein, the blue is Fish & Seafood. --- */
--status-success-bg:var(--fit-lime-100);
--status-success-fg:var(--fit-green-800);
--status-warning-bg:var(--cat-general-soft);
--status-warning-fg:#7A5300;
--status-info-bg:var(--cat-fish-soft);
--status-info-fg:#2A4C82;
--status-error-bg:#F8E2E1;
--status-error-fg:var(--cat-meat);
}

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

--gutter-inline:24px;
--gutter-inline-lg:64px;
--section-y:96px;
--section-y-lg:128px;
--max-width-prose:64ch;
--max-width-page:1240px;
}

/* --- radius.css --- */
:root{
--radius-xs:2px;
--radius-s:4px;
--radius-m:6px;
--radius-l:10px;  /* brand swatch / card radius */
--radius-xl:14px;
--radius-2xl:18px;
--radius-pill:999px;
--radius-circle:50%;
}

/* --- typography.css --- */
:root{
--font-display:"Bebas Neue","Haettenschweiler","Arial Narrow",sans-serif;
--font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
--font-accent:"Pacifico",cursive;
--font-numeric:"Montserrat","Helvetica Neue",Arial,sans-serif;

--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-black:700; /* legacy alias — Bebas has one weight, Montserrat stops at 700 */

/* Display — Bebas Neue, always uppercase (the face has no lowercase).
   Book scale is 30/20/13pt at 1.5–1.618x; this is the screen equivalent. */
--size-display-xl:96px;
--size-display-l:68px;
--size-display-m:48px;
--size-display-s:34px;
--leading-display:0.88;
--tracking-display:0.005em;

/* Headings — h1/h2 are Bebas; h3/h4 are Montserrat SemiBold caps (subheads) */
--size-heading-l:28px;
--size-heading-m:22px;
--size-heading-s:16px;
--leading-heading:1.1;
--tracking-heading:0.01em;
--tracking-subhead:0.06em;

/* Body — Montserrat. The book specifies Light; 300 is reserved for lead
   paragraphs and large type, where it holds up. Running text is 400. */
--size-body-l:18px;
--size-body-m:16px;
--size-body-s:14px;
--size-body-xs:12px;
--leading-body:1.6;
--tracking-body:0;

/* Eyebrow / label — Montserrat SemiBold, uppercase */
--size-label-m:13px;
--size-label-s:11px;
--tracking-label:0.12em;
--weight-label:600;

/* Accent — Pacifico. Descriptors and the occasional warm word. Never a
   headline, never a whole sentence, never uppercase. */
--size-accent-l:40px;
--size-accent-m:26px;
}

/* --- elevation.css --- */
:root{
/* Warm, low-contrast shadows: shadow colour is tinted green-brown, never grey-blue */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(23,56,41,.06);
--shadow-s:0 2px 6px rgba(23,56,41,.07);
--shadow-m:0 8px 20px -6px rgba(23,56,41,.12);
--shadow-l:0 20px 44px -12px rgba(23,56,41,.18);
--shadow-lifted:0 28px 60px -20px rgba(13,33,24,.28);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--overlay-scrim:rgba(13,33,24,.52);
--blur-veil:saturate(120%) blur(14px); /* @kind other */
}

/* --- motion.css --- */
:root{
--duration-instant:90ms; /* @kind other */
--duration-fast:160ms; /* @kind other */
--duration-base:240ms; /* @kind other */
--duration-slow:420ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,1,1); /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}