/* ════════════════════════════════════════════════════════════════════
   Everyday Korean — brand.ds
   Marketing / brand-surface design tokens.
   Sister to seed.css (which is for in-product UI).

   Source: extracted from /start/index.html (the first marketing page).
   Approach: snap nearby values to the nearest token. Outliers stay free.
   Do NOT tokenize every value — only the ones that should stay consistent.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ───────────── Color ─────────────
     Use --brand-primary for CTAs, links, highlights.
     Use --brand-cta (yellow) only for the single conversion button.
     Text on light bg → --brand-fg; text on dark bg → #fff. */

  /* Primary brand (taegeuk blue) */
  --brand-primary:        #1E40AF;
  --brand-primary-hover:  #1E3A8A;
  --brand-primary-light:  #60A5FA;   /* gradient pair, accents */

  /* Surfaces */
  --brand-bg:        #FFFFFF;        /* default light surface */
  --brand-bg-dark:   #000000;        /* dramatic dark sections */
  --brand-bg-deep:   #0B1A35;        /* deep navy (cards on dark) */
  --brand-bg-soft:   #F4F5F7;        /* muted card / chart bg on light */

  /* Text */
  --brand-fg:               #0B1A35; /* primary on light */
  --brand-fg-muted:         rgba(11, 26, 53, 0.6);
  --brand-fg-subtle:        rgba(11, 26, 53, 0.45);
  --brand-fg-on-dark:       #FFFFFF;
  --brand-fg-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* Accents */
  --brand-cta:        #FCD34D;       /* yellow CTA — only one per page */
  --brand-cta-fg:     #0B1E5C;
  --brand-accent-red: #E63946;       /* highlight only, never primary */
  --brand-trust:      #00B67A;       /* trustpilot / verified green */

  /* ───────────── Spacing ─────────────
     Section block padding (top/bottom). Match top/bottom for balance
     unless the section sits flush against the next one. */
  --brand-pad-xl: clamp(96px, 10vw, 176px);  /* signature sections */
  --brand-pad-lg: clamp(72px, 8vw, 128px);   /* default sections */
  --brand-pad-md: clamp(56px, 7vw, 96px);    /* tighter sections */

  /* Card internal padding — same value on all sides by default. */
  --brand-pad-card: clamp(24px, 3vw, 40px);

  /* Horizontal section padding — pair with seed-space tokens for in-page gaps */
  --brand-pad-x: var(--seed-space-5);

  /* ───────────── Typography ─────────────
     Display titles end in -xl/-lg/-md. Use 800 for titles, 900 for wordmarks,
     700 for subheads, 600 for labels. Body sizes for paragraph copy. */
  --brand-title-hero: clamp(36px, 8vw, 96px);  /* page hero — one per page */
  --brand-title-xl:   clamp(34px, 4.4vw, 56px); /* impact section title */
  --brand-title-md:   clamp(28px, 3.6vw, 44px); /* compact title (FAQ, secondary) */

  --brand-body-lg:  clamp(16px, 1.5vw, 19px); /* hero sub, big paragraph */
  --brand-body-md:  clamp(15px, 1.4vw, 18px); /* default paragraph */
  --brand-body-sm:  clamp(13px, 1.3vw, 15px); /* meta, small caption */

  --brand-eyebrow:  13px;                      /* uppercase eyebrow label */

  /* Letter-spacing — most titles use -0.02em, wordmarks -0.04em,
     eyebrows / pill labels +0.14–0.16em (uppercase tracking). */
  --brand-tracking-title:    -0.02em;
  --brand-tracking-wordmark: -0.04em;
  --brand-tracking-eyebrow:   0.16em;

  /* ───────────── Radius ───────────── */
  --brand-radius-pill:     999px;
  --brand-radius-section:   32px;   /* rounded floating sections */
  --brand-radius-card:      24px;   /* cards / charts */
  --brand-radius-tile:      16px;   /* small tiles, video frames */
  --brand-radius-circle:    50%;

  /* ───────────── Gradients ─────────────
     Only tokenize reused gradient patterns. One-off gradients stay inline. */
  --brand-grad-title: linear-gradient(180deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);

  /* ───────────── Shadow ───────────── */
  --brand-shadow-card: 0 12px 28px -10px rgba(0, 0, 0, 0.25);
  --brand-shadow-cta:  0 18px 36px -12px rgba(30, 64, 175, 0.5);
  --brand-shadow-pop:  0 36px 72px -20px rgba(0, 0, 0, 0.6);
}