/* Hallmark · macrostructure: design-system · tone: segar-warm-light · studied: yes · DNA-source: evolved from TENANG v5 (palette preserved verbatim) */
/*
  Potraces · jejakbaki.my — SINGLE SOURCE OF TRUTH for design tokens.
  "SEGAR" v6 — the 2026-07-22 redesign. THE PALETTE IS TENANG'S, UNTOUCHED
  (owner's law: "only the color stays"). Everything typographic and kinetic is new.

  WORLD LAWS (v6):
  · Base stays warm white; colour still lives in PANELS, amounts stay ink. (Palette laws survive.)
  · Display type = Bricolage Grotesque — warm, characterful, and finally allowed to be BOLD.
    Hierarchy comes from SIZE + WEIGHT now (v5's weight-500-only law is retired).
  · Body = Schibsted Grotesk. Figures & labels = Spline Sans Mono, tabular.
  · The headline accent word is no longer italic serif — it's a sage MARKER UNDERLINE
    (.accent-word draws a hand-swiped stroke under the word; colour = sage, unchanged).
  · Motion is SPRUNG: springs for interaction (press/lift/pop), blur-cascade for type
    entrances, mask-rise reserved for the one ink panel. Reduced-motion collapses all of it.
  · Max ONE near-ink section per page, and it must showcase the real product (survives).
  · Phone mocks: interiors use --app-* (the actual CALM app). data-shot slot convention unchanged.
  Link order: <link rel="stylesheet" href="/tokens.css"> then <link rel="stylesheet" href="/site.css">
  Fonts (CSP-safe): https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Schibsted+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap
  theme-color: #FEFDFB
*/
:root{

  /* ─────────── 1 · BASE (TENANG palette — preserved verbatim) ─────────── */
  --bg:#FEFDFB;                 /* warm white body */
  --bg-soft:#F8F6F1;            /* soft alternate */
  --surface:#FFFFFF;            /* cards */
  --ink:#221E19;                /* warm near-black */
  --ink-90:rgba(34,30,25,.90);  /* headlines */
  --ink-65:rgba(34,30,25,.65);  /* secondary text */
  --ink-45:rgba(34,30,25,.45);  /* captions / placeholders */
  --ink-12:rgba(34,30,25,.12);  /* hairlines */
  --ink-06:rgba(34,30,25,.06);  /* faint fills */

  /* ─────────── 2 · SAGE (the one accent — preserved verbatim) ─────────── */
  --sage:#B7C97D;               /* pill fill (ink text on top) */
  --sage-bright:#C9D89A;        /* hover-lighten */
  --sage-deep:#8FA254;          /* pressed / icon strokes */
  --sage-text:#66783A;          /* links, accents ON WHITE (readable) */
  --sage-pale:#EFF3E0;          /* ghost pill / tint chip */
  --sage-pale-2:#E4EBCC;        /* tint hover */
  --sage-a35:rgba(183,201,125,.35);
  --sage-a18:rgba(183,201,125,.18);

  /* panel washes (colour lives here — preserved) */
  --panel-sage:linear-gradient(180deg,#EFF3DC 0%,#DFE8C2 100%);
  --panel-sage-radial:radial-gradient(120% 90% at 50% 0%,#F3F6E4 0%,#DFE8C2 100%);
  --panel-cream:linear-gradient(180deg,#FFF6E2 0%,#F7ECD0 100%);
  --panel-soft:linear-gradient(180deg,#F8F6F1 0%,#EFEDE5 100%);

  /* warm secondary (preserved) */
  --gold:#D9A62E; --gold-deep:#B2841F; --gold-pale:#F7ECD0;
  --terracotta:#A8482E;         /* "I owe" chip only — never alarm */

  /* ─────────── 3 · INK SECTION (preserved) ─────────── */
  --ink-panel:#1B1814;          /* near-black warm plane */
  --ink-panel-2:#26221C;        /* raised card on ink */
  --on-ink:#F7F5F0;
  --on-ink-65:rgba(247,245,240,.65);
  --on-ink-40:rgba(247,245,240,.40);
  --on-ink-12:rgba(247,245,240,.12);

  /* ─────────── 4 · APP-MOCK scope (preserved — the real CALM app) ─────────── */
  --app-bg:#F9F9F7; --app-surface:#ffffff; --app-olive:#4F5104; --app-olive-light:#6B6D1A;
  --app-text:#1A1A1A; --app-text-2:#555555; --app-border:#E5E0D8; --app-cream:#FFF7E6;

  /* ─────────── 5 · TYPE (ALL NEW — v6) ─────────── */
  --font:'Schibsted Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;   /* body voice */
  --font-display:'Bricolage Grotesque','Schibsted Grotesk',sans-serif;     /* headlines — warm, bold */
  --font-accent:var(--font-display);                                       /* legacy alias — italic serif retired */
  --font-mono:'Spline Sans Mono',ui-monospace,Menlo,Consolas,monospace;    /* figures, labels, captions */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;

  --text-xs:clamp(0.72rem,0.70rem + 0.10vw,0.78rem);
  --text-sm:clamp(0.84rem,0.81rem + 0.15vw,0.92rem);
  --text-base:1.03rem;
  --text-md:clamp(1.06rem,1.00rem + 0.25vw,1.20rem);
  --text-lg:clamp(1.20rem,1.10rem + 0.50vw,1.48rem);   /* leads */
  --text-xl:clamp(1.45rem,1.25rem + 0.90vw,1.95rem);
  --text-2xl:clamp(1.85rem,1.50rem + 1.60vw,2.70rem);  /* card titles */
  --text-3xl:clamp(2.35rem,1.70rem + 2.70vw,3.70rem);  /* H2 — bigger than v5 */
  --text-display:clamp(3.00rem,1.90rem + 5.20vw,5.40rem); /* hero — bold now, so it can carry more size */
  --tracking-display:-0.035em;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-caps:0.10em;
  --leading-tight:1.04; --leading-snug:1.18; --leading-normal:1.55; --leading-relaxed:1.7;

  /* ─────────── 6 · SPACE (preserved rhythm) ─────────── */
  --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px; --space-5xl:128px;
  --section-y:clamp(72px,6vw + 48px,140px);

  /* ─────────── 7 · RADIUS (preserved) ─────────── */
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --radius-panel:clamp(24px,4vw,44px);
  --radius-pill:999px;

  /* ─────────── 8 · DEPTH (soft float + one hover tier) ─────────── */
  --shadow-sm:0 1px 2px rgba(34,30,25,.05),0 4px 12px rgba(34,30,25,.05);
  --shadow-md:0 2px 4px rgba(34,30,25,.05),0 12px 32px rgba(34,30,25,.08);
  --shadow-lg:0 4px 8px rgba(34,30,25,.05),0 24px 64px rgba(34,30,25,.10);
  --shadow-hover:0 6px 14px rgba(34,30,25,.07),0 28px 68px rgba(34,30,25,.13);   /* NEW — spring-lift target */
  --shadow-phone:0 4px 10px rgba(34,30,25,.08),0 32px 80px rgba(34,30,25,.16);
  --focus-ring:0 0 0 3px var(--sage-a35),0 0 0 1.5px var(--sage-deep);

  /* ─────────── 9 · MOTION (NEW — sprung) ─────────── */
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:400ms; --dur-reveal:720ms;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in:cubic-bezier(.55,.06,.68,.19); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);          /* overshoot — lifts, presses, pops */
  --spring-soft:cubic-bezier(.30,1.25,.55,1);     /* gentler overshoot — sheets, chips */
  --mask-ease:cubic-bezier(.60,0,.20,1);          /* mask-rise, clip reveals */
  --blur-start:14px;                              /* blur-cascade entrance */

  /* ─────────── 10 · Z / LAYOUT (preserved widths) ─────────── */
  --z-grain:1; --z-base:2; --z-sheet:99; --z-nav:100; --z-skip:1000;
  --maxw:990px; --maxw-wide:1160px; --maxw-prose:620px; --nav-h:72px; --nav-h-min:58px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ─────────── 11 · LEGACY ALIASES (contracts — preserved verbatim) ─────────── */
  --bg2:var(--bg-soft); --text:var(--ink-90); --text2:var(--ink-65); --text3:var(--ink-45);
  --text-muted:var(--ink-45); --border:var(--ink-12); --border2:var(--ink-06); --cream:var(--gold-pale);
  --olive:var(--sage-text); --olive-dark:var(--sage-deep); --olive-light:var(--sage); --olive-deep:var(--ink);
  --bronze:var(--ink-45); --bronze2:var(--ink-65); --gold-bright:var(--gold); --sky:var(--sage-text); --mauve:var(--sage-text); --biz:var(--gold-deep);
  --ff:var(--font); --r-xs:6px; --r-sm:var(--radius-sm); --r-md:var(--radius-md); --r-lg:var(--radius-lg);
  --r-xl:var(--radius-xl); --r-2xl:var(--radius-panel); --r-full:var(--radius-pill);
  --shadow:var(--shadow-sm); --shadow-nav:var(--shadow-sm); --shadow-xl:var(--shadow-lg); --d:0ms;
}