/*
 * Ori Creamery — design tokens
 * Source of truth: docs/branding/claude-desktop-pack/brand-guidelines.md
 * AAH V2.2 brand delivery, March 2026.
 *
 * Rule: never hardcode hex values in components. Reach for these variables.
 * If a design needs a color that isn't here, the design is wrong, not the palette.
 */

:root {
  /* ---- Color ---- */
  --color-periwinkle: #777CEA;   /* PRIMARY. Must appear on every composition. */
  --color-galaxy:     #161934;   /* Secondary dark — body text on light, dark sections. */
  --color-platinum:   #E2E5ED;   /* Secondary light neutral — page surface. */
  --color-sky:        #6FADEB;   /* ACCENT — freshness. Never the lead. */
  --color-waffle:     #4C3E35;   /* ACCENT — warmth. Never the lead. */

  /* Semantic aliases — prefer these in components */
  --color-brand:       var(--color-periwinkle);
  --color-surface:     var(--color-platinum);
  --color-surface-alt: #FFFFFF;
  --color-text:        var(--color-galaxy);
  --color-text-muted:  rgba(22, 25, 52, 0.68);
  --color-text-inverse: var(--color-platinum);
  --color-accent-fresh: var(--color-sky);
  --color-accent-warm:  var(--color-waffle);

  /* ---- Typography ---- */
  --font-heading: "Belanosima", system-ui, sans-serif;
  --font-subhead: "Routed Gothic", ui-monospace, monospace;
  --font-body:    "AUTHENTIC Sans", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* size / line-height pairs (px) */
  --text-2xs:  12px;  --lh-2xs: 16px;
  --text-xs:   14px;  --lh-xs:  20px;
  --text-sm:   16px;  --lh-sm:  24px;   /* default body */
  --text-base: 18px;  --lh-base: 28px;
  --text-lg:   22px;  --lh-lg:  32px;
  --text-xl:   28px;  --lh-xl:  36px;
  --text-2xl:  36px;  --lh-2xl: 42px;
  --text-3xl:  48px;  --lh-3xl: 52px;
  --text-4xl:  64px;  --lh-4xl: 68px;   /* hero */
  --text-5xl:  88px;  --lh-5xl: 92px;   /* campaign only */

  /* ---- Spacing (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad-mobile: 24px;
  --container-pad-desktop: 48px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---- Shadow (use sparingly — brand is flat-ish) ---- */
  --shadow-1: 0 1px 2px rgba(22, 25, 52, 0.08);
}

/* Default page baseline */
html, body {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}