/* ============================================================
   EmailVerifyerAPI — Foundational Design Tokens
   Colors, typography, spacing, radii, shadows, motion
   ============================================================ */

/* XE brand font (local subset) */
@font-face {
  font-family: "XE Sans";
  src: url("fonts/e4af272ccee01ff0-s.p.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* --- Brand color -------------------------------------------------- */
  --xe-blue: #0A146E;            /* primary, CTAs, active tabs, links */
  --xe-blue-hover: #0A2FCC;      /* hover / focus accent — 9.2:1 AAA (was #163BFF / 6.77:1) */
  --xe-blue-active: #1430D6;     /* pressed / deepest CTA stop        */
  --xe-blue-soft: #EEF2FF;       /* active tab fill, soft pills       */
  --info: #2563EB;               /* informational accent (non-text)   */

  /* --- Auth / sign-in surfaces ------------------------------------- */
  --auth-navy-1:     #060D2E;    /* hero gradient — top    */
  --auth-navy-2:     #0F1B4D;    /* hero gradient — middle */
  --auth-navy-3:     #1A2E5F;    /* hero gradient — bottom */
  --auth-accent:     #4B8EFF;    /* logo / mark accent     */
  --auth-accent-2:   #6BA3FF;    /* logo gradient end      */
  --auth-accent-soft:#7B9BFF;    /* benefit icons on navy  */
  --auth-form-bg:    #F8F9FA;    /* form panel surface     */
  --btn-disabled:    #9BA5BC;    /* disabled CTA fill      */

  /* --- Text -------------------------------------------------------- */
  /* All text tokens meet WCAG 2.2 AAA (≥7:1) on --bg-primary (#FFFFFF). */
  --text-primary: #0B1020;       /* deep navy-black  — ~19:1          */
  --text-secondary: #4B5363;     /* ~7.7:1 (was #5B6475 / 5.96:1)     */
  --text-tertiary: #464E5C;      /* ~8.4:1 (was #4F5766 / 6.9:1 on #F7F9FC) */
  --text-on-brand: #FFFFFF;

  /* --- Surfaces ---------------------------------------------------- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F9FC;       /* behind charts / cards             */

  /* --- Borders ----------------------------------------------------- */
  --border-default: #E5E8EF;
  --border-input: #DCE1EB;
  --border-card: #E6EAF2;
  --border-secondary-btn: #D8DCE6;

  /* --- Semantic / status ------------------------------------------- */
  /* Bright tokens below are for NON-TEXT use (fills, icons, borders) where
     the 3:1 bar (WCAG 1.4.11) applies. For status TEXT, use the *-text
     tokens, which all meet AAA 7:1 on white. */
  --success: #0FA958;
  --warning: #FFB648;
  --error:   #E5484D;

  /* Lighter gradient-endpoint tints (non-text, used only as the 2nd stop of a
     status gradient — pair with --xe-blue / --warning / --error as the 1st stop) */
  --xe-blue-light: #4F6BFF;
  --warning-light: #FBBF24;
  --error-light:   #EF4444;

  /* "Pro"/gold accent used on upgrade badges (non-text fill only) */
  --badge-gold: #FBBF24;

  /* AAA-safe status TEXT (≥7:1 on #FFFFFF) */
  --success-text: #0C5F30;       /* ~7.8:1 */
  --warning-text: #7A4E00;       /* ~7.2:1 */
  --error-text:   #A11E17;       /* ~7.8:1 */
  --info-text:    #1A46C3;       /* ~7.8:1 — AAA-safe "in progress" text (replaces ad-hoc #1d4ed8) */

  /* Focus ring — reassigned per-surface in accessibility.css */
  --focus-ring: #163BFF;         /* ~5.3:1 on white (≥3:1 ✓)          */

  /* --- Chart ------------------------------------------------------- */
  --chart-line: var(--xe-blue-hover);
  --chart-grid: #EEF2F7;
  --chart-up:   var(--success);
  --chart-down: var(--error);

  /* --- Radii ------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  28px;           /* converter card                    */
  --radius-pill: 999px;

  /* --- Shadows (soft fintech) -------------------------------------- */
  --shadow-sm:    0 2px 8px  rgba(11,16,32,0.04);
  --shadow-md:    0 10px 30px rgba(11,16,32,0.08);
  --shadow-card:  0 10px 40px rgba(11,16,32,0.08);
  --shadow-lg:    0 20px 60px rgba(11,16,32,0.12);
  --shadow-focus: 0 0 0 4px rgba(22,59,255,0.12);

  /* --- Spacing (8pt grid) ------------------------------------------ */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* --- Motion ------------------------------------------------------ */
  --motion-fast:   120ms;   /* @kind other */
  --motion-normal: 180ms;   /* @kind other */
  --motion-slow:   280ms;   /* @kind other */
  --motion-ease:   cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */

  /* --- Layout ------------------------------------------------------ */
  --container-max: 1280px;
  --container-pad: 24px;
  --header-h-desktop: 72px;
  --header-h-mobile:  64px;

  /* --- Typography -------------------------------------------------- */
  --font-sans: "XE Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero:    52px;
  --fs-h1:      40px;
  --fs-h2:      32px;
  --fs-h3:      24px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-cap:     12px;

  --lh-hero: 1.05; /* @kind font */
  --lh-h1:   1.10; /* @kind font */
  --lh-h2:   1.20; /* @kind font */
  --lh-h3:   1.30; /* @kind font */
  --lh-body: 1.60; /* @kind font */
}

/* ------------------------------------------------------------------
   Semantic type primitives — apply as class or via the @extend-style
   ------------------------------------------------------------------ */

html, body { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; }

.t-hero {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.t-h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.t-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.t-h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-h3);
  color: var(--text-primary);
}
.t-body-lg { font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.65; color: var(--text-primary); }
.t-body    { font-size: var(--fs-body);    font-weight: 400; line-height: var(--lh-body); color: var(--text-primary); }
.t-sm      { font-size: var(--fs-sm);      font-weight: 400; line-height: 1.50; color: var(--text-secondary); }
.t-cap     { font-size: var(--fs-cap);     font-weight: 500; line-height: 1.40; color: var(--text-secondary); letter-spacing: 0.02em; }

/* Currency numerals — large numeric clarity is critical */
.t-numeric {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.t-rate {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Mobile overrides */
@media (max-width: 640px) {
  :root {
    --fs-hero: 36px;
    --fs-h1:   30px;
  }
}