/*
 * Design tokens, lifted from the approved prototype (design-source/FlyeSIM.dc.html).
 * Nothing in the site hardcodes a colour, radius or shadow — it comes from here.
 */

/* ---------- fonts (self-hosted, no CDN) ---------- */
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../assets/fonts/InterTight-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../assets/fonts/InterTight-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('../assets/fonts/InterTight-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../assets/fonts/DMMono-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('../assets/fonts/DMMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  /* surfaces and ink */
  --fx-bg: #F7F9FA;
  --fx-surface: #FFFFFF;
  --fx-raise: #FFFFFF;
  --fx-ink: #0B1115;
  --fx-ink2: #66727A;
  --fx-border: #E7ECEF;

  /* the phone mock's bezel — a device, not text, so dark keeps a frame instead of inverting to
     near-white the way --fx-ink does */
  --fx-bezel: #0B1115;

  /* brand */
  --fx-cyan: #08B5D1;
  --fx-cyanink: #04788B;
  --fx-cyansoft: rgba(8, 181, 209, .10);
  /* text on a cyan fill is dark ink — the primary button is the one exception, by request */
  --fx-on-cyan: #03252B;
  --fx-on-cyan-muted: #04424E;
  --fx-btn-primary-ink: #FFFFFF;

  /* inverted sections — dark in both themes */
  --fx-deep: #07151C;
  --fx-deepink: #F4F8FA;
  --fx-deepink2: #8FA3AC;
  --fx-deepink3: #66727A;
  --fx-white-05: rgba(255, 255, 255, .05);
  --fx-white-06: rgba(255, 255, 255, .06);
  --fx-white-07: rgba(255, 255, 255, .07);
  --fx-white-10: rgba(255, 255, 255, .1);
  --fx-white-12: rgba(255, 255, 255, .12);
  --fx-white-14: rgba(255, 255, 255, .14);
  --fx-white-16: rgba(255, 255, 255, .16);

  /* status */
  --fx-ok: #1FC16B;
  --fx-warn: #F6B51E;
  --fx-err: #FB3748;
  --fx-oksoft: rgba(24, 166, 112, .14);
  --fx-warnsoft: rgba(214, 146, 10, .1);

  /* Story tones. Five kinds of story, named for the job rather than the hue, so each skin can
     answer with its own palette. FlyeSIM has one brand colour and three status ones, which is
     exactly the five distinct values below. */
  --fx-tone-promo: #FB3748;
  --fx-tone-info: #08B5D1;
  --fx-tone-product: #F6B51E;
  --fx-tone-bonus: #1FC16B;
  --fx-tone-news: #04788B;

  /* depth */
  --fx-shadow: 0 1px 2px rgba(11, 17, 21, .04), 0 12px 32px -16px rgba(11, 17, 21, .14);
  --fx-shadow-lift: 0 2px 4px rgba(11, 17, 21, .05), 0 24px 48px -20px rgba(11, 17, 21, .22);
  --fx-shadow-sm: 0 1px 2px rgba(11, 17, 21, .06);
  --fx-shadow-cyan: 0 8px 22px -8px rgba(8, 181, 209, .65);
  --fx-grid: rgba(11, 17, 21, .05);
  --fx-backdrop: rgba(7, 21, 28, .62);

  /* globe */
  --fx-globe-land: #08839A;
  --fx-globe-sea: #DCE7EB;
  --fx-globe-fill: #FFFFFF;
  --fx-globe-rim: #EEF4F6;
  --fx-globe-coast: #066F81;
  --fx-globe-halo: #FFFFFF;

  /* type */
  --fx-display: 'Inter Tight', Inter, system-ui, sans-serif;
  --fx-text: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fx-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* geometry */
  --fx-gutter: 16px;
  /* the gap between layout blocks — cards in a grid, columns in a page body. Spacing
     inside a component is that component's own business and is not this token. */
  --fx-gap: 16px;
  --fx-page: 1220px;
  --fx-header: 66px;
  --fx-r-input: 8px;
  --fx-r-btn: 12px;
  --fx-r-card: 16px;
  --fx-r-feature: 20px;
  --fx-r-hero: 24px;
  --fx-r-pill: 999px;

  /* motion */
  --fx-fast: 120ms;
  --fx-base: 180ms;
  --fx-slow: 280ms;
  --fx-ease: cubic-bezier(.4, 0, .2, 1);
  --fx-ease-out: cubic-bezier(.16, 1, .3, 1);
}

[data-theme='dark'] {
  --fx-bg: #061014;
  --fx-surface: #0D1A20;
  --fx-raise: #122430;
  --fx-ink: #F4F8FA;
  --fx-ink2: #8FA3AC;
  --fx-border: #1B2C35;
  --fx-bezel: #2E4049;
  --fx-cyanink: #3FD3EA;
  --fx-cyansoft: rgba(8, 181, 209, .14);
  --fx-deep: #03090C;
  --fx-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -20px rgba(0, 0, 0, .7);
  --fx-shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 28px 56px -24px rgba(0, 0, 0, .8);
  --fx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --fx-grid: rgba(244, 248, 250, .05);

  --fx-globe-land: #3FD3EA;
  --fx-globe-sea: #15303B;
  --fx-globe-fill: #081820;
  --fx-globe-rim: #0E2A34;
  --fx-globe-coast: #4FDCF0;
  --fx-globe-halo: #061014;
}