/* =========================================================================
   BringMyMeal website — design tokens (v1, 2026-10-11)
   -------------------------------------------------------------------------
   Contract between the design agent and the code agent.
   Token NAMES are stable: renaming one is a breaking change and must be
   logged in design/HANDOFF.md. Values may be tuned freely.

   Fonts are self-hosted: load ../fonts/fonts.css before this file.
   Light theme only (dark theme is optional per the README and not designed yet).
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Brand palette (raw). Taken from the logo; use the semantic tokens below
     in components, not these directly.
     --------------------------------------------------------------------- */
  --bmm-cream-50: #FFFBF4;
  --bmm-cream-100: #FDF5E9;   /* logo background, page ground */
  --bmm-cream-200: #F8EAD5;
  --bmm-cream-300: #EFDCC1;

  --bmm-red-500: #E3342F;     /* logo "Meal" red — decorative / large text only (4.0:1 on cream) */
  --bmm-red-600: #C8291F;     /* buttons with white text: 5.5:1 */
  --bmm-red-700: #A8201A;     /* hover / pressed */
  --bmm-red-50: #FDE9E6;

  --bmm-orange-500: #F28B24;  /* logo "Bring" orange — decorative only (2.3:1 on cream) */
  --bmm-orange-700: #A9520A;  /* orange text on cream: 5.0:1 */
  --bmm-orange-100: #FDE6CC;

  --bmm-green-500: #4EA93B;   /* logo "my" green — decorative only */
  --bmm-green-700: #2F7A22;   /* success text on white: 5.4:1 */
  --bmm-green-100: #E3F3DC;

  --bmm-blue-600: #1F5FD1;    /* Staff app blue (from the Staff icon) */
  --bmm-blue-100: #E2ECFC;

  --bmm-purple-600: #7C2BD0;  /* Guest app primary (OrderApp #AA3BFF, darkened for AA text) */
  --bmm-purple-500: #AA3BFF;  /* OrderApp accent as shipped — decorative only */
  --bmm-purple-100: #F1E4FF;

  --bmm-ink-900: #2B1B14;     /* warm near-black: 15:1 on cream */
  --bmm-ink-700: #4A372D;
  --bmm-ink-500: #6E5A4E;     /* muted text: 6.0:1 on cream */
  --bmm-ink-300: #B9A796;
  --bmm-white: #FFFFFF;

  /* ---------------------------------------------------------------------
     Semantic colours
     --------------------------------------------------------------------- */
  --color-bg: var(--bmm-cream-100);
  --color-bg-alt: var(--bmm-cream-200);       /* alternating sections */
  --color-surface: var(--bmm-white);          /* cards, form fields */
  --color-surface-warm: var(--bmm-cream-50);
  --color-bg-inverse: var(--bmm-ink-900);     /* footer, CTA band */

  --color-text: var(--bmm-ink-900);
  --color-text-muted: var(--bmm-ink-500);
  --color-text-inverse: var(--bmm-cream-100);
  --color-text-inverse-muted: #D9C9B8;        /* 10:1 on ink-900 */

  --color-border: #E6D5BE;
  --color-border-strong: #C9B39A;
  --color-input-border: #9C8573;              /* 3.5:1 on white — WCAG 1.4.11 non-text contrast */

  --color-primary: var(--bmm-red-600);        /* Apply button, primary actions */
  --color-primary-hover: var(--bmm-red-700);
  --color-primary-soft: var(--bmm-red-50);
  --color-on-primary: var(--bmm-white);

  --color-accent: var(--bmm-orange-500);      /* highlights, step numbers, decoration */
  --color-accent-text: var(--bmm-orange-700);
  --color-accent-soft: var(--bmm-orange-100);
  --color-fresh: var(--bmm-green-500);        /* leaves, decoration */
  --color-fresh-soft: var(--bmm-green-100);

  --color-guest: var(--bmm-purple-600);       /* BringMyMeal (guest app) card */
  --color-guest-soft: var(--bmm-purple-100);
  --color-staff: var(--bmm-blue-600);         /* BringMyMeal Staff card */
  --color-staff-soft: var(--bmm-blue-100);

  --color-link: var(--bmm-red-700);
  --color-link-hover: var(--bmm-ink-900);
  --color-focus: #1F5FD1;                     /* focus ring: blue reads on cream, red and white */

  --color-success: var(--bmm-green-700);
  --color-success-soft: var(--bmm-green-100);
  --color-error: #B3261E;
  --color-error-soft: #FCE8E6;
  --color-warning: var(--bmm-orange-700);
  --color-warning-soft: var(--bmm-orange-100);
  --color-info: var(--bmm-blue-600);
  --color-info-soft: var(--bmm-blue-100);

  /* ---------------------------------------------------------------------
     Typography
     Display: Baloo Bhaijaan 2 — rounded, warm, echoes the logo lettering
     without imitating it. Body: Rubik — friendly, very legible at small
     sizes. Both cover Latin, Turkish (ç ğ ı İ ö ş ü) and Arabic.
     --------------------------------------------------------------------- */
  --font-display: "Baloo Bhaijaan 2", "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, "Segoe UI", sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 700;

  /* Fluid type scale: phone (360) → desktop (1280) */
  --text-xs: 0.8125rem;                                     /* 13px — legal meta, badges */
  --text-sm: 0.875rem;                                      /* 14px */
  --text-base: 1rem;                                        /* 16px — body, inputs (no iOS zoom) */
  --text-lg: 1.125rem;                                      /* 18px — lead paragraphs */
  --text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20→24 card titles */
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);          /* 24→32 h3 / section kicker titles */
  --text-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);     /* 30→44 h2 */
  --text-4xl: clamp(2.25rem, 1.65rem + 2.7vw, 3.75rem);     /* 36→60 hero h1 */

  --leading-tight: 1.15;      /* display headings (Latin) */
  --leading-snug: 1.35;
  --leading-normal: 1.6;      /* body */
  --leading-arabic: 1.85;     /* body in Arabic — applied via [dir="rtl"] below */
  --leading-arabic-display: 1.4;

  --tracking-tight: -0.01em;
  --measure: 68ch;            /* readable column (legal pages) */

  /* ---------------------------------------------------------------------
     Spacing (4px base)
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --section-y: clamp(3rem, 2rem + 4vw, 6rem);   /* vertical padding of page sections */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);    /* page side padding: 16px on phones */

  /* ---------------------------------------------------------------------
     Layout
     Breakpoints (CSS variables cannot be used in media queries — use the
     literal values):
       phone   360–430px  (default, mobile first)
       tablet  @media (min-width: 768px)
       desktop @media (min-width: 1024px) — full layout from 1280px
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --header-height: 4.5rem;    /* 72px */
  --tap-min: 2.75rem;         /* 44px minimum touch target */

  /* ---------------------------------------------------------------------
     Shape
     --------------------------------------------------------------------- */
  --radius-sm: 0.5rem;        /* inputs, small chips */
  --radius-md: 0.875rem;      /* buttons */
  --radius-lg: 1.25rem;       /* cards */
  --radius-xl: 2rem;          /* hero panels, phone frame */
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-input: 1.5px;
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus);

  /* ---------------------------------------------------------------------
     Elevation — warm-tinted shadows (never neutral grey on cream)
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(74, 40, 20, 0.06), 0 1px 1px rgba(74, 40, 20, 0.04);
  --shadow-md: 0 6px 16px rgba(74, 40, 20, 0.08), 0 2px 4px rgba(74, 40, 20, 0.05);
  --shadow-lg: 0 18px 40px rgba(74, 40, 20, 0.14), 0 4px 10px rgba(74, 40, 20, 0.06);
  --shadow-button: 0 2px 0 var(--bmm-red-700);   /* subtle "pressable" lip on the primary button */

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Arabic needs more line height; headings keep a looser leading too. */
[dir="rtl"] {
  --leading-normal: var(--leading-arabic);
  --leading-tight: var(--leading-arabic-display);
  --leading-snug: 1.6;
  --tracking-tight: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}