/*
 * Sansara Media design tokens. The only file with hex values and durations.
 * Source: docs/CLAUDE_CODE_BRIEF.md §3 (brand) and §6.1 (motion).
 * Pages and partials use these variables and never a raw value.
 */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/brand/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/brand/fonts/newsreader-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/brand/fonts/newsreader-latin-opsz-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat: the handwriting on the System pages (notes, labels), owner 2026-10-26 ("less AI, more like them"). */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/brand/fonts/caveat-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* ---- Colour (§3.1) ---- */
  --bg: #fcfaf4;        /* page background, cream */
  --card: #f7f2e8;      /* alternate section, muted card */
  --peach: #fbe7d3;     /* soft highlight card */
  --white: #ffffff;     /* cards, inputs */
  --ink: #2a1e14;       /* headings, primary button, dark bands */
  --ink-2: #3e2a19;     /* dark gradient partner */
  --brown: #5b4a3b;     /* body text */
  --brown-2: #8c6a47;   /* labels (12px bold caps) and hints. See design-system.md: contrast note */
  --brown-2-text: #7a5b3b; /* secondary text under 18px: brown-2 taken down to pass 4.5:1 on card (Round 1, 2026-09-27) */
  --orange: #ee8b5e;    /* the only accent: icons, arrows, highlights. Never body text on cream */
  --orange-dk: #b65a2e; /* accent text on light backgrounds, hover */
  --line: rgba(42, 30, 20, 0.12);

  /* Text colours on dark bands */
  --on-dark: var(--bg);
  --on-dark-muted: rgba(252, 250, 244, 0.72);
  --line-on-dark: rgba(252, 250, 244, 0.18);

  /* From Cris's reference design (2026-09-27): sand grounds, soft gold for italic words, the orb. */
  --sand: #f4eee3;      /* page ground in the Cris direction */
  --sand-2: #efe6d8;    /* alternate band */
  --sand-3: #f3e1cc;    /* active row, warm tint */
  --gold: #c79a6a;      /* italic word on dark; decorative lines on light */
  --gold-dk: #8c6a47;   /* italic word on light (same value as brown-2, named for its role) */
  --grad-orb: radial-gradient(circle at 32% 28%, #fbf3e9 0%, #e4c79e 45%, #c79a6a 78%, #8c6a47 110%);
  --grad-orb-ember: radial-gradient(circle at 32% 28%, #fff3e7 0%, #f2b98c 40%, #ee8b5e 70%, #b65a2e 110%);
  --shadow-float: 0 18px 40px -18px rgba(42, 30, 20, 0.35);
  --glow-ember: 0 0 120px 20px rgba(238, 139, 94, 0.35);

  /* Gradients */
  --grad-warm: linear-gradient(120deg, #fdeedf 0%, #f9dcc2 55%, #f2b98c 120%);
  /* WhatsApp's own colours, only for the client message shown as a chat on the System pages (owner, 2026-10-22) */
  --wa-chat: #efeae2;   /* chat wallpaper */
  --wa-head: #f0f2f5;   /* chat header */
  --wa-green: #25d366;
  --wa-text: #111b21;
  --wa-icon: #54656f;   /* header and input-bar icons */
  --wa-time: #667781;   /* time inside the bubble */
  --wa-avatar: #dfe5e7; /* default avatar */
  --wa-doodle: #e5ddd3; /* the wallpaper's faint pattern */
  --grad-dark: linear-gradient(135deg, #2a1e14, #3e2a19);
  --grad-orange: linear-gradient(160deg, #ee8b5e, #d8703f);

  /* ---- Typography (§3.2) ---- */
  --font-sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive; /* handwritten notes and labels, System pages */

  --text-h1: clamp(40px, 6vw, 72px);
  --text-h2: clamp(34px, 4.6vw, 50px);
  --text-h3: clamp(22px, 2.4vw, 28px); /* not in the brief; derived, see design-system.md */
  --text-lead: 19px;
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 12px;

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  --weight-heading: 700;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-label: 700;
  --tracking-label: 0.28em;
  --tracking-heading: -0.02em;

  /* ---- Shape and space (§3.3) ---- */
  --radius-pill: 100px;
  --radius-card: 24px;   /* 20–28px range in the brief */
  --radius-card-sm: 20px;
  --radius-band: 32px;
  --radius-field: 12px;  /* inputs; not in the brief, derived */

  --max: 1200px;
  --pad: 56px;
  --section: 96px;
  --gap: 24px;
  --target: 44px;        /* minimum tap target */

  /* ---- Motion (§6.1) ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 200ms;
  --base: 550ms;
  --slow: 900ms;
  --rise: 40px;
  --stagger: 110ms;
  --rotate-every: 2800ms; /* rotating hero line */
  --motto-every: 1700ms;  /* the "Be ___." motto card: one word every 1.7s, the owner found 2.8s too slow to be noticed (2026-09-30) */
}

@media (max-width: 980px) {
  :root {
    --pad: 28px;
    --section: 72px;
    --rise: 20px;
    --stagger: 70ms;
  }
}