/* Buka Web — brand tokens v1.1 (2026-10-09)
   Source of truth for colour, type, space, radius and motion in BUKA-DELIVERABLES.
   Logo colours are MEASURED from the owned 1638×405 logo PNG (02-assets/logo/buka-logo-source-1638x405.png)
   with a headless-Chrome canvas sample on 2026-10-09; they are not an official vector spec.
   Campaign pink/yellow are the creative proposal from 09-brand-guidelines (unchanged).
   Contrast ratios: see 07-qa/contrast-results-2026-10-09.json (computed, WCAG 2.x). */
:root {
  /* Neutral surfaces */
  --buka-ink: #050108;            /* page background, observed in live site source */
  --buka-surface: #160C1A;        /* cards on dark */
  --buka-surface-2: #22142A;      /* raised cards / inputs on dark */
  --buka-paper: #FFF8EC;          /* light editorial sections */
  --buka-paper-2: #FFF1DC;        /* cards on paper */
  --buka-text: #F8F4F9;           /* text on dark */
  --buka-muted: #C1B6C6;          /* muted text on dark (9.8:1 on surface) */
  --buka-text-light: #271522;     /* text on paper */
  --buka-muted-light: #5B4A57;    /* muted text on paper */
  --buka-line-dark: rgba(248, 244, 249, 0.14);
  --buka-line-light: #E8DCCB;

  /* Logo roots (measured) */
  --buka-amber: #F5A722;          /* U, A, swoosh right end — 37.6% of logo pixels */
  --buka-ochre: #E2A01A;          /* B */
  --buka-berry: #B3105E;          /* K (package draft called this "berry" #B00F60; measured value adopted) */
  --buka-plum: #941762;           /* swoosh left end */
  --buka-berry-deep: #A01463;     /* full stop */
  --buka-coral: #C46459;          /* swoosh midpoint (decorative only) */

  /* Campaign proposal (not in the logo) */
  --buka-pink: #FF4FA3;
  --buka-yellow: #FFD447;

  /* Derived for accessible text (not in the logo) */
  --buka-amber-ink: #8F5A00;      /* amber-family text on paper */
  --buka-berry-on-dark: #F27DB3;  /* berry-family text on dark */
  --buka-berry-deep-hover: #7E1450;
  --buka-ok: #1A7F4B; --buka-ok-dark: #4ADE80;
  --buka-err: #B42318; --buka-err-dark: #FF8A80;

  /* Signature gradient (decorative only: ribbon, rule, short accent word) */
  --buka-gradient: linear-gradient(135deg, #FFD447 0%, #F5A722 35%, #FF4FA3 70%, #B3105E 100%);
  --buka-swoosh: linear-gradient(90deg, #941762 0%, #C46459 52%, #F5A722 100%); /* the logo's own emblem gradient */

  /* Type */
  --buka-font-heading: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --buka-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --buka-weight-heading: 600;     /* 500 for large display, 600 default */
  --buka-weight-body: 400;
  --buka-weight-strong: 600;
  --buka-step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --buka-step-0: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  --buka-step-1: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --buka-step-2: clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
  --buka-step-3: clamp(1.75rem, 1.5rem + 1.15vw, 2.5rem);
  --buka-step-4: clamp(2.125rem, 1.7rem + 2.1vw, 3.375rem);
  --buka-step-5: clamp(2.5rem, 1.8rem + 3.3vw, 4.25rem);
  --buka-leading-body: 1.55;
  --buka-leading-heading: 1.1;

  /* Space (4px base) */
  --buka-space-1: 4px; --buka-space-2: 8px; --buka-space-3: 12px; --buka-space-4: 16px;
  --buka-space-6: 24px; --buka-space-8: 32px; --buka-space-12: 48px; --buka-space-16: 64px; --buka-space-24: 96px;
  --buka-gutter: 16px; --buka-container: 1200px; --buka-section: clamp(64px, 5vw + 40px, 128px);

  /* Shape */
  --buka-radius-button: 12px; --buka-radius-card: 20px; --buka-radius-input: 10px; --buka-radius-pill: 999px;

  /* Motion (hero ribbon + one process section only) */
  --buka-dur-fast: 150ms; --buka-dur: 220ms; --buka-dur-slow: 420ms;
  --buka-ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --buka-header-h: 64px; --buka-tap: 44px; --buka-cta-h: 48px;
  --buka-z-header: 40; --buka-z-sticky: 50; --buka-z-menu: 60; --buka-z-dialog: 100;
}
@media (min-width: 768px) { :root { --buka-gutter: 24px; --buka-header-h: 72px; } }
@media (min-width: 1200px) { :root { --buka-gutter: 32px; } }

/* Semantic scopes: any section can be dark or light. Each scope paints its own background and colour
   (v1.1 fix: inherited computed colour leaked from the dark body into light sections; caught by tools/check.mjs). */
.buka-dark, [data-buka-scope="dark"] {
  --bg: var(--buka-ink); --surface: var(--buka-surface); --surface-2: var(--buka-surface-2);
  --text: var(--buka-text); --text-muted: var(--buka-muted); --line: var(--buka-line-dark);
  --accent: var(--buka-amber); --accent-text: var(--buka-amber); --accent-2-text: var(--buka-berry-on-dark);
  --cta-bg: var(--buka-amber); --cta-text: var(--buka-ink); --cta-hover: #FFBE4D;
  --cta2-text: var(--buka-text); --cta2-border: rgba(248, 244, 249, .5);
  --link: var(--buka-yellow); --focus: var(--buka-yellow); --ok: var(--buka-ok-dark); --err: var(--buka-err-dark);
  color-scheme: dark;
  background-color: var(--bg); color: var(--text);
}
.buka-light, [data-buka-scope="light"] {
  --bg: var(--buka-paper); --surface: #FFFFFF; --surface-2: var(--buka-paper-2);
  --text: var(--buka-text-light); --text-muted: var(--buka-muted-light); --line: var(--buka-line-light);
  --accent: var(--buka-berry); --accent-text: var(--buka-berry); --accent-2-text: var(--buka-amber-ink);
  --cta-bg: var(--buka-amber); --cta-text: var(--buka-ink); --cta-hover: #FFBE4D;
  --cta2-text: var(--buka-text-light); --cta2-border: var(--buka-text-light);
  --link: var(--buka-berry); --focus: var(--buka-text-light); --ok: var(--buka-ok); --err: var(--buka-err);
  color-scheme: light;
  background-color: var(--bg); color: var(--text);
}

/* Primary button: one shape everywhere. */
.buka-button-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--buka-space-2);
  min-height: var(--buka-cta-h); padding: 12px 24px; border: 1px solid transparent;
  border-radius: var(--buka-radius-button); background: var(--cta-bg, var(--buka-amber)); color: var(--cta-text, var(--buka-ink));
  font-family: var(--buka-font-body); font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none;
  cursor: pointer; touch-action: manipulation; transition: background-color var(--buka-dur-fast) var(--buka-ease-out), transform var(--buka-dur-fast) var(--buka-ease-out);
}
.buka-button-primary:hover { background: var(--cta-hover, #FFBE4D); }
.buka-button-primary:active { transform: scale(.98); }
.buka-button-primary:focus-visible { outline: 3px solid var(--focus, var(--buka-yellow)); outline-offset: 3px; }
.buka-button-primary[aria-busy="true"], .buka-button-primary:disabled { opacity: .55; cursor: progress; }
.buka-button-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--buka-cta-h); padding: 12px 20px;
  border: 1px solid var(--cta2-border); border-radius: var(--buka-radius-button); background: transparent; color: var(--cta2-text);
  font-family: var(--buka-font-body); font-size: 1rem; font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.buka-button-secondary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Decorative motion is opt-in and must be static under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  [data-buka-decorative-motion] { opacity: 1 !important; animation: none !important; transition: none !important; transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* v1.1 fix (contrast tool): amber fill vs paper is 1.91:1, so on light surfaces the primary
   button carries a 1px ink boundary (16:1) to satisfy WCAG 1.4.11 non-text contrast. */
.buka-light .buka-button-primary, [data-buka-scope="light"] .buka-button-primary { border-color: var(--buka-text-light); }