/*
 * globals.css — Nari Design Token Foundation
 * ─────────────────────────────────────────────────────────────────────────────
 * Single source of truth for all CSS custom properties in nari-web.
 * Ported from nari-components.jsx Layer 1 (source of record).
 *
 * RULES & CONSTRAINTS (enforced design decisions):
 *   • Gold (--c-gold #ddb84a) is NEVER used on cream or white backgrounds —
 *     on-dark only (greenDeep, navy, midnight, moss). 7.31:1 AAA on greenDeep.
 *   • Green (#64822C) is decorative/icon accent ONLY — 3.94:1 on cream fails
 *     AA text minimum. Use --c-green-dark (#2d4a32, 8.79:1) for any text.
 *   • All body text must meet WCAG 2.1 AA (≥4.5:1). ADA contrast values are
 *     annotated inline below.
 *   • Headings: Lora serif, font-weight 500. Body: DM Sans 300. Code: DM Mono.
 *   • Surface gradients (--surface-*) are background-only tokens — never use
 *     as text color or border.
 *   • goldenSand (#a86820) is display text only (≥26px italic). Not body copy.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@400;500&family=Caveat:wght@400;500;600&display=swap');

/* ── Token Definitions ─────────────────────────────────────────────────────── */
/*
 * Compat alias layer (T4 / B4). Temporary until T4a renames --c-* → unprefixed
 * across the app and aligns font/layout token names with the package.
 * Package (@flora-nari/design-system) is the source of truth for values.
 */
:root {
  --c-cream:             var(--cream);
  --c-cream-light:       var(--cream-light);
  --c-cream-dark:        var(--cream-dark);
  --c-navy:              var(--navy);
  --c-midnight:          var(--midnight);
  --c-moss:              var(--moss);
  --c-green:             var(--green);
  --c-green-dark:        var(--green-dark);
  --c-green-deep:        var(--green-deep);
  --c-green-faint:       var(--green-faint);
  --c-light-head:        var(--light-head);
  --c-light-body:        var(--light-body);
  --c-light-mute:        var(--light-mute);
  --c-text:              var(--text);
  --c-text-mute:         var(--text-mute);
  --c-border:            var(--border);
  --c-border-mid:        var(--border-mid);
  --c-red:               var(--red);
  --c-gold:              var(--gold);
  --c-golden-sand:       var(--golden-sand);
  --c-wood-oak:          var(--wood-oak);
  --c-warm-amber:        var(--warm-amber);
  --c-in-progress-text:  var(--in-progress-text);
  --c-affirm-head:       var(--affirm-head);
  --c-affirm-body:       var(--affirm-body);
  --c-affirm-mute:       var(--affirm-mute);
  --c-affirm-accent:     var(--affirm-accent);
  --c-affirm-quote-mark: var(--affirm-quote-mark);
  --c-amber-bg:          var(--amber-bg);
  --c-amber-text:        var(--amber-text);
  --c-sage-bg:           var(--sage-bg);
  --c-sage-text:         var(--sage-text);

  --surface-forest:   var(--grad-forest);
  --surface-cream:    var(--grad-cream);
  --surface-hero:     var(--grad-hero);
  --surface-warm:     var(--grad-warm);
  --surface-lavender: var(--grad-lavender);
  --surface-cool:     var(--grad-cool);

  /* App-specific layout — no package equivalent */
  --nav-height:          60px;
  --page-gutter:         clamp(16px, 4vw, 48px);
  --max-width-dashboard: 1200px;
  --max-width-wide:      1440px;

  /* Fonts kept literal to preserve fallback chains (T4a: align with --font-serif/sans/mono) */
  --font-heading: 'Lora', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-script:  'Caveat', 'Lora', cursive;
}

/* ── Global Resets ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* Background lives on <html> (not <body>) so the time-of-day ambient layer
   * can sit at `z-index: -1` between html bg and body content. The slow
   * transition makes bucket changes feel like sunrise/sunset. */
  background: var(--c-cream-light);
  transition: background 1.2s ease;
}

body {
  min-height: 100%;
  font-family: var(--font-body);
  font-weight: 300;
  background: transparent;
  color: var(--c-light-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Accessibility utilities ───────────────────────────────────────────────── */
/* Visually hide an element while keeping it available to assistive tech.
 * Use for headings that anchor `aria-labelledby` when the visible label is a
 * stylized eyebrow (SectionLabel) rather than a true heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Animation ─────────────────────────────────────────────────────────────── */
@keyframes nari-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Slower fade with a softer easing + bigger travel so the cascade is
 * actually perceptible (was 0.45s/10px — done in <1s and easy to miss).
 * Total cascade end-to-end: ~1.4s. */
.nari-fu  { animation: nari-fadeUp 0.7s cubic-bezier(0.2, 0.65, 0.25, 1) both; }
.nari-fu1 { animation-delay: 0.08s; }
.nari-fu2 { animation-delay: 0.20s; }
.nari-fu3 { animation-delay: 0.32s; }
.nari-fu4 { animation-delay: 0.44s; }
.nari-fu5 { animation-delay: 0.56s; }
.nari-fu6 { animation-delay: 0.68s; }

/* ── Motion preference (user-controlled) ────────────────────────────────── */
/* Mirrors the resolved `useMotionPreference()` value onto <html>. The
 * provider resolves OS `prefers-reduced-motion` into the `data-motion`
 * attribute (when preference="auto"), so this attribute is the SINGLE
 * source of truth for "should things move." Per-component CSS should
 * never use `@media (prefers-reduced-motion: reduce)` directly — that
 * would override the user's explicit "Animated" choice.
 *
 * Using 0.01ms (not 0) so React state changes still propagate instantly —
 * a true `0s` can occasionally race with state updates that depend on
 * transitionend/animationend events. */
html[data-motion="static"] *,
html[data-motion="static"] *::before,
html[data-motion="static"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ── Time-of-day theming ────────────────────────────────────────────────── */
/* `<html data-time="dawn|morning|afternoon|evening|night">` is set by
 * <TimeOfDayProvider> on the client. Components that want to lean into the
 * time of day pick up `--c-time-accent` instead of a hard-coded brand color
 * (the journey hero's sprout, name script, and date eyebrow are the first
 * surfaces to do this).
 *
 * Default = green-dark, so SSR / initial paint matches the existing brand
 * accent. Bucket overrides ride existing tokens — no new colors introduced,
 * just a re-routing of the warm/cool spectrum we already have.
 *
 * Hierarchy (per product direction): explicit user pick → weather (future,
 * opt-in) → time-of-day → default. An explicit pick will set a higher-
 * specificity attribute and override `data-time`.
 *
 * Per `feedback_no_emotional_upsell`: time-of-day signal routes to free
 * presentation only — never bind to CTAs or paid surfaces. */
:root {
  --c-time-accent: var(--c-green-dark);
}

/* Per-bucket: accent token + subtle body wash (~5% mix into cream).
 * Wash is intentionally tiny so the page never feels "themed" — just
 * belongs to the time of day. The richer bucket feel comes from the
 * <TimeOfDayAmbient> layer (glow + atmospheric + kinetic). */
html[data-time="dawn"] {
  --c-time-accent: var(--c-golden-sand);
  background: color-mix(in srgb, var(--c-cream-light) 95%, var(--c-golden-sand));
}
html[data-time="morning"] {
  --c-time-accent: var(--c-green-dark);
  background: var(--c-cream-light);
}
/* Afternoon accent: warm-amber (golden hour warmth). Sage-green felt
 * like just another use of the brand color — warm-amber gives afternoon
 * its own emotional signature: settled, golden, grounded. */
html[data-time="afternoon"] {
  --c-time-accent: var(--c-warm-amber);
  background: color-mix(in srgb, var(--c-cream-light) 96%, var(--c-moss));
}

/* Evening: solid dark navy bg, accent = pale wood. Pushed darker (70%
 * navy, was 58%) so cream-toned text on this bg can pass AA for small
 * text (the 58% mix was in the dead-zone where neither light nor dark
 * text could get 4.5:1 contrast). The evening "feel" still reads as
 * dusk because the ambient layer carries the horizon glow. */
html[data-time="evening"] {
  --c-time-accent: #e8d4b8;
  background: color-mix(in srgb, var(--c-navy) 70%, var(--c-cream-light));
}

/* Night: solid deep navy bg, accent = soft moonlit silver-blue. Pushed
 * darker (80% navy, was 72%) for the same AA reason as evening — at 72%
 * the bg was still close to the mid-tone trap. 80% gives small cream
 * text reliable 5:1+ contrast. */
html[data-time="night"] {
  --c-time-accent: #d4dce8;
  background: color-mix(in srgb, var(--c-navy) 80%, var(--c-cream-light));
}

.cookie-consent-banner_banner__i0Iez {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  color: var(--c-light-body);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 31, 28, 0.14);
  animation: cookie-consent-banner_cookieBanner-rise__MipXp 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.cookie-consent-banner_title__g7pZi {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-light-head);
  margin: 0;
}

.cookie-consent-banner_message__8HFFl {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--c-light-body);
}

.cookie-consent-banner_actions__cArf1 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@keyframes cookie-consent-banner_cookieBanner-rise__MipXp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 480px) {
  .cookie-consent-banner_banner__i0Iez {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }

  .cookie-consent-banner_actions__cArf1 {
    justify-content: stretch;
  }

  .cookie-consent-banner_actions__cArf1 > * {
    flex: 1 1;
  }
}