/* ============================================================================
   BaiTrak — Base CSS Tokens (colors + type + spacing + radii + shadows)
   ----------------------------------------------------------------------------
   Stripe-precise. Tight palette. Three typefaces. One accent.
   Bilingual layouts: French runs ~30% longer — leave horizontal breathing room.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   BRAND FONTS — self-hosted TTFs in /fonts.
   ---------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/PublicSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLORS · BASE ----------------------------------------------- */
  --color-deep-slate:     #0B1120; /* dark heroes, back-tile of logo, page entry */
  --color-deep-blue:      #0D6986; /* THE accent — buttons, links, active, selected */
  --color-deep-blue-hover:#0A6077; /* primary button hover */
  --color-baicorp-green:  #C4D600; /* financial positive ONLY — never text on white */

  --color-text-primary:   #333333; /* charcoal — body text on light */
  --color-text-secondary: #64748B; /* metadata, captions, table headers */

  --color-surface:        #F8FAFC; /* card grounds, alt rows, subtle tints */
  --color-border:         #E2E8F0; /* 1px dividers, card outlines */
  --color-white:          #FFFFFF;
  --color-black:          #000000;

  /* on-dark text alphas (used on Deep Slate hero) */
  --color-on-dark-1:      rgba(255,255,255,1);
  --color-on-dark-2:      rgba(255,255,255,0.72);
  --color-on-dark-3:      rgba(255,255,255,0.55);
  --color-on-dark-border: rgba(255,255,255,0.10);

  /* Status — restrained. Danger is the rarely-used "you can't do that" tone
     used in forbidden examples in the logo spec. Not a general semantic UI color. */
  --color-danger:         #A33A2B;
  --color-danger-bg:      #FCEDE8;
  --color-danger-border:  #E6BFB7;

  /* ---------- SEMANTIC FG / BG -------------------------------------------- */
  --fg-1: var(--color-text-primary);     /* body */
  --fg-2: var(--color-text-secondary);   /* metadata */
  --fg-3: #94A3B8;                       /* tertiary, decorative */
  --fg-on-dark-1: var(--color-on-dark-1);
  --fg-on-dark-2: var(--color-on-dark-2);
  --fg-accent: var(--color-deep-blue);
  --fg-positive: var(--color-baicorp-green); /* FIGURES ONLY */

  --bg-page:    var(--color-white);
  --bg-surface: var(--color-surface);
  --bg-hero:    var(--color-deep-slate);
  --bg-card:    var(--color-white);

  --stroke-1: var(--color-border);
  --stroke-2: #CBD5E1;

  /* ---------- TYPE · FAMILIES --------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Public Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE · SCALE (base 16) -------------------------------------- */
  /* Display — Plus Jakarta Sans */
  --type-display-size:      3rem;      /* 48 */
  --type-display-weight:    800;
  --type-display-lh:        1.1;
  --type-display-ls:        -0.02em;

  --type-h1-size:           2.25rem;   /* 36 */
  --type-h1-weight:         700;
  --type-h1-lh:             1.2;
  --type-h1-ls:             -0.01em;

  --type-h2-size:           1.75rem;   /* 28 */
  --type-h2-weight:         600;
  --type-h2-lh:             1.3;
  --type-h2-ls:             -0.005em;

  --type-h3-size:           1.25rem;   /* 20 */
  --type-h3-weight:         600;
  --type-h3-lh:             1.3;
  --type-h3-ls:             -0.002em;

  /* Body — Public Sans */
  --type-body-lg-size:      1.125rem;  /* 18 */
  --type-body-md-size:      1rem;      /* 16 */
  --type-body-sm-size:      0.875rem;  /* 14 */
  --type-body-weight:       400;
  --type-body-lh:           1.7;

  /* Label — Public Sans, uppercase, tracked */
  --type-label-size:        0.75rem;   /* 12 */
  --type-label-weight:      600;
  --type-label-ls:          0.05em;

  /* Mono — JetBrains Mono */
  --type-figure-size:       2rem;      /* 32 — big credit balance */
  --type-figure-weight:     500;
  --type-figure-lh:         1.0;

  --type-data-size:         0.875rem;  /* 14 — tabular data */
  --type-data-weight:       400;
  --type-data-lh:           1.5;

  --type-eyebrow-size:      0.6875rem; /* 11 — section eyebrow / crumb */
  --type-eyebrow-ls:        0.16em;

  --type-caption-size:      0.875rem;  /* 14 */
  --type-caption-lh:        1.55;

  /* ---------- SPACING (4 px baseline 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;

  /* ---------- RADII -------------------------------------------------------- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ---------- ELEVATION ---------------------------------------------------- */
  /* Cards use BORDER, not shadow. Shadows are used sparingly on selected
     option-cards, modals, and floating panels. Always tight + cool. */
  --shadow-xs: 0 1px 2px rgba(11, 17, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 17, 32, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 17, 32, 0.06), 0 1px 3px rgba(11, 17, 32, 0.04);
  --shadow-lg: 0 12px 32px rgba(11, 17, 32, 0.10), 0 2px 6px rgba(11, 17, 32, 0.04);

  /* ---------- MOTION ------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     180ms;
  --dur-slow:     280ms;

  /* ---------- LAYOUT ------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 32px;
  --nav-h:         64px;
  --hero-pad-y:    96px;
  --section-pad-y: 64px;
}

/* ============================================================================
   BASE ELEMENT STYLES — semantic, opinionated, ready to drop in.
   ============================================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
body {
  margin: 0;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Plus Jakarta Sans */
h1, .h1, h2, .h2, h3, .h3, .display {
  font-family: var(--font-display);
  color: var(--color-deep-slate);
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); }
h1, .h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); }
h2, .h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); }
h3, .h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); }

/* Body — Public Sans */
p, .body { font-family: var(--font-body); font-size: var(--type-body-md-size); line-height: var(--type-body-lh); color: var(--fg-1); margin: 0; }
.body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lh); }
.body-sm { font-size: var(--type-body-sm-size); line-height: 1.6; }
.caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--fg-2); }
.muted   { color: var(--fg-2); }

/* Labels — uppercase tracked */
.label, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}

/* Mono — JetBrains Mono */
code, kbd, samp, pre, .mono, .data { font-family: var(--font-mono); }
.figure {
  font-family: var(--font-mono);
  font-size: var(--type-figure-size);
  font-weight: var(--type-figure-weight);
  line-height: var(--type-figure-lh);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.figure-positive { color: var(--color-baicorp-green); }   /* NEVER on white background — use on dark surfaces */
.data {
  font-size: var(--type-data-size);
  line-height: var(--type-data-lh);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

/* Links */
a, .link {
  color: var(--fg-accent);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .link:hover { color: var(--color-deep-blue-hover); text-decoration: underline; }

hr, .rule { border: 0; border-top: 1px solid var(--stroke-1); margin: var(--space-xl) 0; }

::selection { background: rgba(13, 105, 134, 0.18); color: var(--color-deep-slate); }