/* ==========================================================================
   brand.css — Design tokens taken from joyousfuture.com

   Every colour below is either declared as a CSS custom property on the live
   site or sampled from the official logo, so the product and the marketing
   site share one palette.

   Site declarations (https://joyousfuture.com, inline :root blocks):
     --jf-navy:#0b1f3a  --jf-gold:#c9a24d  --jf-gold-dark:#9a7420
     --jf-orange:#FF8A00  --jf-yellow:#F5B800  --jf-ink:#172033
     --jf-cream:#FFFDF7
   Hero section background used on the site: #0a2540
   Logo wordmark sampled: #1D2C37 · logo swoosh sampled: #FFA400
   Site body font: 'Plus Jakarta Sans' (Google Fonts), secondary Inter.
   ========================================================================== */

:root {
  /* --- official brand values ------------------------------------------- */
  --jf-navy: #0b1f3a;
  --jf-navy-deep: #0a2540;
  --jf-orange: #ff8a00;
  --jf-orange-hover: #e07a1c;
  --jf-amber: #ffa400;          /* logo swoosh */
  --jf-gold: #c9a24d;
  --jf-gold-dark: #9a7420;
  --jf-yellow: #f5b800;
  --jf-ink: #172033;
  --jf-cream: #fffdf7;
  --jf-tint: #fff3e6;
  --jf-warm-border: #ede3d0;

  /* --- semantic aliases used by the app -------------------------------- */
  --brand-primary: var(--jf-navy);
  --brand-accent: var(--jf-orange);
  --brand-gold: var(--jf-gold);

  --surface: #ffffff;
  --surface-muted: var(--jf-cream);
  --surface-tint: var(--jf-tint);
  --surface-sunken: #f6f7f9;

  --text-primary: var(--jf-ink);
  --text-secondary: #55617a;
  --text-muted: #8a94a6;
  --text-on-dark: #ffffff;

  --border-subtle: #eceef1;
  --border: #e0e4ea;
  --border-strong: #cfd6e0;

  --state-meets: #17795e;
  --state-meets-bg: #e8f5ef;
  --state-prep: #a25c00;
  --state-prep-bg: #fff4e0;
  --state-verify: #55617a;
  --state-verify-bg: #eef1f6;
  --state-blocked: #b3261e;
  --state-blocked-bg: #fdeceb;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(23, 32, 51, .06);
  --shadow: 0 6px 20px rgba(23, 32, 51, .08);
  --shadow-lg: 0 18px 48px rgba(11, 31, 58, .16);

  --tap: 44px;
  --maxw: 560px;

  --font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Headings use the same family as body copy. The old stack ended in Georgia,
     so on a machine without the webfont every heading rendered as a heavy
     serif next to a small sans-serif body — the exact mismatch we removed. */
  --font-display: var(--font-sans);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Script coverage. Default system stacks on Windows cover Arabic through
   Segoe UI, Bengali and Thai through Nirmala UI / Leelawadee UI. Declaring them
   explicitly stops a latin-only fallback from drawing tofu boxes. */
html[lang="ar"] {
  --font-sans: 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', 'Arial', sans-serif;
  --font-display: 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', 'Arial', sans-serif;
}
html[lang="bn"] {
  --font-sans: 'Noto Sans Bengali', 'Nirmala UI', 'Shonar Bangla', 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans Bengali', 'Nirmala UI', 'Shonar Bangla', 'Segoe UI', sans-serif;
}
html[lang="th"] {
  --font-sans: 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans Thai', 'Leelawadee UI', 'Tahoma', 'Segoe UI', sans-serif;
}
html[lang="vi"] {
  --font-sans: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', 'Arial', sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-muted);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-primary);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--brand-primary); text-underline-offset: 2px; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--jf-tint); color: var(--jf-ink); }

:focus-visible {
  outline: 2px solid var(--jf-orange);
  outline-offset: 2px;
}

/* Logical-property base so RTL mirrors without extra rules. */
[dir="rtl"] .flip-icon { transform: scaleX(-1); }