/* ============================================================
   OneEx Design System — Colors & Type Tokens
   Source: Brandbook_OneEx_v2.pdf (assets/Brandbook_OneEx_v2.pdf)
   ============================================================ */

/* Fonts
   - Inter: body, UI, posts (brandbook §4.1 — primary)
   - Inter Tight: display / hero / big rate numbers — same family,
     tighter metrics, drops in for headlines without breaking brand
   - JetBrains Mono: tabular / technical figures (opt-in via --font-mono) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS (Primary) ---------- */
  --oneex-navy:            #001B42;  /* Deep Navy — primary background, body text on light */
  --oneex-turquoise:       #03DFE2;  /* Bright Turquoise — accent, "Ex", CTA, links */
  --oneex-white:           #FFFFFF;

  /* ---------- BRAND COLORS (Secondary / support) ---------- */
  --oneex-navy-alt:        #00204E;  /* Alt dark background */
  --oneex-turquoise-alt:   #00E5EA;  /* Gradient overlays */
  --oneex-turquoise-muted: #00C4D0;  /* Hover, secondary accents */
  --oneex-gray-text:       #8899AA;  /* Captions, small text, dates */
  --oneex-card-bg:         #0A2444;  /* Content cards on navy */

  /* ---------- BANK ACCENT COLORS (used only in bank icons) ---------- */
  --bank-kbank:     #0BA84A;  /* Kasikorn green   */
  --bank-scb:       #4E2E86;  /* Siam Commercial purple */
  --bank-bangkok:   #1E4EAE;  /* Bangkok Bank blue */
  --bank-krungsri:  #FFCC00;  /* Bank of Ayudhya yellow */
  --bank-krungthai: #00A0E3;  /* Krungthai light blue */
  --bank-ttb:       #F58220;  /* Thanachart / TTB orange */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --bg:           var(--oneex-navy);
  --bg-alt:       var(--oneex-navy-alt);
  --bg-card:      var(--oneex-card-bg);
  --bg-inverse:   var(--oneex-white);

  --fg1:          var(--oneex-white);            /* primary text on dark */
  --fg2:          rgba(255,255,255,0.70);        /* secondary text on dark */
  --fg3:          var(--oneex-gray-text);        /* captions / meta */
  --fg-accent:    var(--oneex-turquoise);        /* links, accent text */
  --fg-inverse-1: var(--oneex-navy);             /* primary text on light */
  --fg-inverse-2: rgba(0,27,66,0.70);            /* secondary text on light */

  --border:       rgba(3,223,226,0.18);
  --border-soft:  rgba(255,255,255,0.08);
  --divider:      rgba(255,255,255,0.06);

  /* ---------- GRADIENTS ---------- */
  --wave-gradient:
    radial-gradient(ellipse at 20% 120%, rgba(3,223,226,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 110% -10%, rgba(3,223,226,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #001B42 0%, #00102A 100%);

  --cta-gradient:
    linear-gradient(135deg, #03DFE2 0%, #00E5EA 100%);

  --subtle-glow:
    radial-gradient(circle at 50% 50%, rgba(3,223,226,0.35) 0%, transparent 50%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    'Inter', 'SF Pro Display', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter Tight', 'Inter', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fnum:         "tnum" 1, "lnum" 1;           /* tabular + lining for rate numbers */

  /* type scale (fluid-ish, web-oriented; brandbook targets 1080px image) */
  --fs-display:   clamp(48px, 6vw, 80px);     /* hero titles */
  --fs-h1:        clamp(36px, 4.5vw, 56px);
  --fs-h2:        clamp(28px, 3.2vw, 40px);
  --fs-h3:        22px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-heavy:     800;

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.45;
  --lh-relaxed:   1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;   /* small caps / eyebrow */

  /* ---------- SPACING (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;   /* padding de-facto for 1080 post (§9.2) */
  --s-24: 96px;

  /* ---------- RADII ---------- */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-pill:  999px;

  /* ---------- SHADOWS & GLOWS ---------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.45);
  --glow-cyan-sm: 0 0 24px rgba(3,223,226,0.35);
  --glow-cyan-md: 0 0 48px rgba(3,223,226,0.45);
  --glow-cyan-lg: 0 0 80px rgba(3,223,226,0.55);   /* hero / Subtle glow */

  /* ---------- MOTION ---------- */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  400ms;
}

/* ============================================================
   Semantic element styles
   Intended to be opt-in: scope with a class or include globally
   in mocks. Root pages default to dark/navy mode.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

p { margin: 0; color: var(--fg2); line-height: var(--lh-relaxed); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg3);
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

a { color: var(--fg-accent); text-decoration: none; }
a:hover { color: var(--oneex-turquoise-muted); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Hero display — uses tighter Inter Tight */
.display, h1, .h1 {
  font-family: var(--font-display);
}
.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Tabular figures — for rate prices, amounts, counters */
.tnum, .rate, .amount { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--fnum); }

/* Accent "Ex" wrapper — mirrors the logo's two-tone treatment */
.brand-ex { color: var(--fg-accent); }

/* Light-mode scope (use on a container to invert) */
.on-light {
  background: var(--oneex-white);
  color: var(--fg-inverse-1);
}
.on-light h1, .on-light h2, .on-light h3 { color: var(--fg-inverse-1); }
.on-light p { color: var(--fg-inverse-2); }