/* My Loaf design tokens (provisional 0.1.0, 2026-10-29). Single source for every MyLoaf surface.
   Replace the palette and fonts when the bakery's brand files arrive (brand/README.md).
   House rule: no em-dashes, no arrow characters. The accent token names (--accent*) are what
   house.css consumes; the brand names (--crust*) are the human-readable source. */

:root {
  /* Crust (the one accent) */
  --crust:            #8B4A1F;
  --crust-strong:     #6B3A16;  /* fills; white text passes AA */
  --crust-text:       #5E3313;  /* accent text on white and flour */
  --crust-soft:       #F6E9DA;
  --crust-soft-hover: #F0DFC9;

  /* Warm neutrals */
  --rye:     #2B2118;  /* ink */
  --rye-2:   #5A4A3E;
  --rye-3:   #8C7B6E;  /* muted text, AA on white for large text; use --rye-2 for small text */
  --oat:     #E9DFD2;  /* borders */
  --flour:   #FBF7F1;  /* storefront canvas */
  --flour-2: #F3EBE0;
  --surface: #FFFFFF;
  --surface-2: #FBF7F1;
  --honey:   #D9A441;  /* sparing highlight */
  --honey-soft: #FBF1DA;
  --honey-text: #7A5310;

  /* Semantic */
  --success-500: #2E7D4F; --success-50: #E8F4EC;
  --warning-500: #D9A441; --warning-50: #FBF1DA;
  --danger-500:  #C64B3A; --danger-50:  #FBEAE7;
  --info-500:    var(--crust); --info-50: var(--crust-soft);

  /* Accent aliases consumed by house.css */
  --accent:            var(--crust);
  --accent-strong:     var(--crust-strong);
  --accent-text:       var(--crust-text);
  --accent-soft-bg:    var(--crust-soft);
  --accent-soft-hover: var(--crust-soft-hover);

  /* Role aliases used by the surfaces */
  --ink: var(--rye); --ink-2: var(--rye-2); --ink-3: var(--rye-3);
  --line: var(--oat);
  --cream: var(--flour); --cream-2: var(--flour-2);
  --color-bg: var(--flour);
  --color-bg-2: var(--flour-2);
  --color-surface: var(--surface);
  --color-text: var(--rye);
  --color-text-2: var(--rye-2);
  --color-text-muted: var(--rye-3);
  --color-border: var(--oat);
  --color-primary: var(--crust);
  --color-primary-fill: var(--crust-strong);
  --color-primary-text: var(--crust-text);
  --color-accent: var(--honey);
  --color-link: var(--crust-text);
  --focus-ring: var(--crust);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", "Tajawal", system-ui, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Amiri", Georgia, serif;   /* storefront headings + wordmark only */
  --text-display: clamp(2.5rem, 5vw, 3.5rem);
  --text-h1: clamp(2rem, 4vw, 2.75rem);
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: 1.375rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.6; --lh-body-ar: 1.85;
  --tracking-display: -0.02em;
  --measure: 66ch; --measure-ar: 60ch;

  /* Radius: 12px controls, 14px cards and sheets */
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* Spacing */
  --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; --space-section: 96px;

  /* Elevation (warm, low) */
  --shadow-sm: 0 1px 2px rgba(43,33,24,0.06), 0 1px 3px rgba(43,33,24,0.05);
  --shadow-md: 0 4px 12px rgba(43,33,24,0.08);
  --shadow-lg: 0 12px 32px rgba(43,33,24,0.10);
  --shadow-primary: 0 8px 24px rgba(139,74,31,0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms; --dur: 180ms; --dur-slow: 250ms;
}

html { font-family: var(--font-sans); color: var(--ink); background: var(--color-bg); }
body { line-height: var(--lh-body); }
html[lang="ar"], [dir="rtl"] { line-height: var(--lh-body-ar); letter-spacing: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: var(--lh-snug); letter-spacing: 0; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px;
}
@media (max-width: 640px) { :root { --space-section: 56px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }