/* ============================================================
   tokens.css
   Single source of truth for the design system.
   Loaded by every page so a color change in one place updates
   the whole app. Page-local <style> blocks should NEVER redeclare
   any of these custom properties. Add new tokens here and only
   here.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted Caveat (handwritten display font). Loading from
   Google Fonts is unreliable inside Capacitor's WKWebView and
   falls back to the iOS system cursive (Snell Roundhand), which
   reads as a formal serif italic instead of the handwritten look
   the design system asks for. Bundling the woff2 files locally
   guarantees the same handwritten look on web, iOS, and Android.
   Files live in /assets/fonts/ and ship via deploy.sh.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./assets/fonts/caveat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./assets/fonts/caveat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./assets/fonts/caveat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./assets/fonts/caveat-700.woff2') format('woff2');
}

:root {
  /* ------------------------------------------------------------
     paper. Body, cards, lifted surfaces. Tinted toward teal at very
     low chroma so neutrals feel cohesive with the brand instead of
     reading as CSS-reset white. The differentiation between vellum
     (cards), parchment (tabbar / secondary), warm (body) and aged
     (distressed) is small and intentional: cards lift fractionally
     above the body, aged stands apart.
     Hex fallback comes first for Safari < 15.4 (rare). Modern Safari
     uses the oklch line because it wins as the last valid value.
     ------------------------------------------------------------ */
  --paper-warm: #FCFDFD;
  --paper-warm: oklch(99% 0.003 195);
  --paper-parchment: #FBFCFC;
  --paper-parchment: oklch(98.6% 0.004 195);
  --paper-aged: #F4F5F4;
  --paper-aged: oklch(96% 0.006 195);
  --paper-vellum: #FDFEFE;
  --paper-vellum: oklch(99.4% 0.003 195);

  /* ink */
  --ink-deep: #1E1A14;
  --ink-charcoal: #3A3330;
  --ink-graphite: #5E5550;
  --ink-faded: #7E756E;

  /* teal (FaithLabz brand primary) */
  --teal-deep: #0B7272;
  --teal-mid: #189E96;
  --teal-seaglass: #4DBFB5;
  --teal-wash: #A8DDD6;

  /* orange (FaithLabz brand secondary) */
  --amber-sienna: #D45A20;
  --amber-warm: #E86E2C;
  --amber-honey: #F09040;
  --amber-peach: #F5C08A;

  /* gold (answered prayer celebration) */
  --gold-leaf: #D9A040;
  --gold-candle: #F2C060;

  /* ------------------------------------------------------------
     Motion vocabulary. Three named kinds so every animation in
     the app can be classified. Keep the old --ease-* names as
     aliases for back-compat with existing CSS. New work should
     use the semantic --motion-* names.
     ------------------------------------------------------------ */

  /* Breath. Flame flicker, candle bloom, glow pulses.
     Feels like lungs. */
  --motion-breath-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --motion-breath-dur: 900ms;

  /* Paper. Page transitions, card slides, modals.
     Feels like paper sliding across paper. Quint-out (exponential) so the
     deceleration is felt: the paper "lands" rather than glides linearly.
     The old value was literally the default CSS `ease` curve, which lacks
     the late-stage slowdown that makes physical motion feel real. */
  --motion-paper-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-paper-dur: 600ms;

  /* Ink. Handwritten underline reveals, answered-prayer ceremonies,
     "Honest Line Reveal" sequence. Feels like ink bleeding into
     paper. Long and intentional. */
  --motion-ink-ease: cubic-bezier(0.77, 0.0, 0.175, 1);
  --motion-ink-dur: 1200ms;

  /* Legacy aliases. Do not use in new code. */
  --ease-organic: var(--motion-paper-ease);
  --ease-ink: var(--motion-breath-ease);
  --ease-gentle: cubic-bezier(0.2, 0.0, 0.0, 1);
  --dur-tap: 220ms;
  --dur-focus: 180ms;
  --dur-reveal: 500ms;
  --dur-page: 340ms;
  --dur-stagger: 60ms;
  --dur-transition: 600ms;

  /* ------------------------------------------------------------
     Typography roles. Fonts are loaded per-page from Google Fonts
     (Lora, Caveat, Nunito). These tokens name their purpose so
     every page writes the same rules.
     ------------------------------------------------------------ */

  /* Display emotional. Hero headlines, verses, completion lines,
     affirmations. Warm, literary, grounded. */
  --font-display-emotional: 'Lora', Georgia, 'Times New Roman', serif;
  --fw-display-emotional: 500;

  /* Display ceremonial. Handwritten accents, small labels,
     section endnotes, "Saved in the quiet." copy. Caveat is
     self-hosted at the top of this file so the look is identical
     on web, iOS, and Android. Bradley Hand is the iOS handwritten
     fallback if the woff2 ever fails to load. */
  --font-display-ceremonial: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  --fw-display-ceremonial: 500;

  /* UI body. All interactive text, buttons, menus, descriptions. */
  --font-ui: 'Nunito', system-ui, -apple-system, sans-serif;
  --fw-ui-regular: 400;
  --fw-ui-semibold: 600;
  --fw-ui-emphasis: 700;

  /* Type sizes. Intentional scale; pages adopt progressively. */
  --text-hero: 34px;         /* home hero lit-line, flame screen */
  --text-display: 26px;      /* verse blockquotes, ceremonial headings */
  --text-title: 22px;        /* page titles, prayer names */
  --text-body-lg: 18px;      /* reading body */
  --text-body: 16px;         /* default UI */
  --text-caption: 13px;      /* meta, timestamps, small labels */
  --text-handwritten: 20px;  /* Caveat accents, intent lines */

  /* Line heights, per role. */
  --lh-tight: 1.2;    /* display */
  --lh-readable: 1.45; /* body */
  --lh-loose: 1.6;     /* long-form reading */

  /* ------------------------------------------------------------
     Atmosphere. Paper grain and bloom wash opacities so every
     page can layer textures consistently. Assets already live in
     assets/textures/. Adjust once here, not per-page.
     ------------------------------------------------------------ */
  --paper-grain-opacity: 0.08;
  --bloom-opacity-idle: 0;
  --bloom-opacity-active: 0.22;
  --bloom-opacity-celebration: 0.32;

  /* Hairline borders. Used on cards, input fields, rules. */
  --hairline-color: rgba(30, 26, 20, 0.10);
  --hairline-color-strong: rgba(30, 26, 20, 0.16);

  /* Shadows. Two kinds: hairline (crispness) and warm (depth). */
  --shadow-hairline: 0 1px 0 rgba(30, 26, 20, 0.04);
  --shadow-card: 0 1px 2px rgba(30, 26, 20, 0.04), 0 14px 30px -12px rgba(30, 26, 20, 0.14);
  --shadow-lift: 0 2px 4px rgba(30, 26, 20, 0.06), 0 20px 40px -14px rgba(30, 26, 20, 0.22);

  /* ------------------------------------------------------------
     Spacing scale (4-based). Existing.
     ------------------------------------------------------------ */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px;

  /* Corner radii. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
}

/* ---- Candlelight (dark) theme overrides ---- */
[data-theme="candlelight"] {
  /* Paper bases lift slightly between body, parchment, and vellum so cards
     read as elevated above the body in dark mode (impeccable's dark-mode
     elevation rule: lighter surfaces for depth, no shadows). Whisper of
     teal chroma keeps neutrals cohesive with the brand instead of pure black.
     Hex fallback for Safari < 15.4. */
  --paper-warm: #050606;
  --paper-warm: oklch(7% 0.005 195);
  --paper-parchment: #060707;
  --paper-parchment: oklch(8% 0.005 195);
  --paper-aged: #0E0F10;
  --paper-aged: oklch(11% 0.006 195);
  --paper-vellum: #0F1011;
  --paper-vellum: oklch(11.5% 0.007 195);

  --ink-deep: #EDE4D2;
  --ink-charcoal: #D4C8B4;
  --ink-graphite: #B8AA96;
  --ink-faded: #8A7E6E;

  --teal-deep: #6FB8B4;
  --teal-mid: #6FB8B4;
  --teal-seaglass: #5AADA5;
  --teal-wash: rgba(111, 184, 180, 0.15);

  --amber-sienna: #E8814A;
  --amber-warm: #F09858;
  --amber-honey: #F5B06A;
  --amber-peach: #E8B480;

  --gold-leaf: #E8B84A;
  --gold-candle: #F2C060;

  /* Atmosphere and depth shift in dark mode. Hairlines and shadows
     do not read the same way on leather paper. Lighten the hairline,
     soften the shadow, and strengthen the bloom. */
  --paper-grain-opacity: 0.05;
  --bloom-opacity-active: 0.28;
  --bloom-opacity-celebration: 0.38;
  --hairline-color: rgba(237, 228, 210, 0.08);
  --hairline-color-strong: rgba(237, 228, 210, 0.14);
  --shadow-hairline: 0 1px 0 rgba(0, 0, 0, 0.30);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.36), 0 14px 30px -12px rgba(0, 0, 0, 0.48);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 40px -14px rgba(0, 0, 0, 0.6);
}