/* ==========================================================================
   Tapote design tokens — "tap-tap" palette
   Light is the default. Dark applies with [data-theme="dark"] on <html>,
   or automatically when the OS is dark and no explicit choice was made.
   ========================================================================== */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }

:root {
  /* ---- Brand primitives (never change between themes) ---- */
  --brand-blue: #2440C8;      /* Bleu tap-tap */
  --brand-mango: #F4B223;     /* Mango */
  --brand-lanme: #11A398;     /* Lanmè (turquoise) */
  --brand-choublak: #D23A5A;  /* Choublak (hibiscus) */
  --brand-nuit: #101B4D;      /* Nuit */

  /* ---- Surfaces & text ---- */
  --bg: #F5F6FB;              /* page background */
  --surface: #FFFFFF;         /* cards, header, inputs */
  --surface-2: #EDF0F8;       /* subtle fills, segmented control track, table head */
  --line: #DCE1EE;            /* hairlines, input borders */
  --ink: #0F1834;             /* primary text */
  --ink-2: #36425F;           /* secondary text */
  --muted: #55617D;           /* captions, labels (4.5:1 on --bg) */

  /* ---- Primary (actions) ---- */
  --primary: #2440C8;
  --primary-hover: #1A31A3;
  --on-primary: #FFFFFF;
  --primary-soft: #E5EAFC;    /* selected tile bg, "En cours" badge bg */
  --primary-ink: #1D36B0;     /* links, text on --primary-soft */

  /* ---- Mango = money (balance, recharge, amounts) ---- */
  --mango: #F4B223;
  --on-mango: #1E1604;        /* always dark text on mango */
  --mango-soft: #FDF0CF;
  --mango-ink: #7A5200;       /* text on --mango-soft ("Programmée") */

  /* ---- Lanmè = success / delivered ---- */
  --success: #11A398;
  --success-ink: #06716A;
  --success-soft: #DBF3EF;

  /* ---- Choublak = failed / not delivered / error ---- */
  --danger: #D23A5A;
  --danger-ink: #A82444;
  --danger-soft: #FBE3E8;

  /* ---- Pending (progress bars only) ---- */
  --pending: #9FB2F5;

  /* ---- Strong panels ---- */
  --section-strong: #101B4D;  /* full-width dark sections on the public site, footer */
  --panel-strong: #101B4D;    /* balance card, cost summary card in the app */
  --on-strong: #FFFFFF;
  --on-strong-muted: #BAC4E4;
  --strong-line: #2B3A7A;

  /* ---- Network colors (only for Digicel/Natcom split bars & labels) ---- */
  --digicel: #D7041D;
  --natcom: #C2510A;

  /* ---- Illustration scene tokens ---- */
  --scene-sky: #FCE6AE;
  --scene-sun: #F4B223;
  --scene-hill-1: #86CFC6;
  --scene-hill-2: #2F9D92;
  --scene-road: #E1E5F0;
  --scene-star: transparent;
  --scene-glass: #DDEBFA;

  /* ---- Typography ---- */
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --fs-display: clamp(40px, 4.6vw, 62px);   /* site hero h1, lh 1.04, ls -0.035em, 800 */
  --fs-h2: clamp(32px, 3.6vw, 50px);        /* site section h2, lh 1.06, ls -0.03em, 800 */
  --fs-h1-app: 32px;                        /* app page titles, ls -0.03em, 800 */
  --fs-h3: 21px;                            /* card titles, 700 */
  --fs-lead: 19px;                          /* hero sub, lh 1.55 */
  --fs-body: 16px;                          /* lh 1.5 */
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-number-xl: 46px;                     /* balance */
  --fs-number-l: 32px;
  /* Numbers: font-variant-numeric: tabular-nums; weight 800; thousands separated by a space: "12 450 HTG" */

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-section: 112px;     /* vertical padding of site sections (desktop) */
  --container: 1200px;        /* content max width; header uses 1280px */
  --gutter: 32px;             /* 20px under 960px, 16px in the app under 900px */

  /* ---- Radius ---- */
  --radius-chip: 8px;         /* status badges */
  --radius-input: 12px;
  --radius-button: 14px;      /* 12px small, 16px large */
  --radius-tile: 16px;        /* selectable tiles (payment method, source) */
  --radius-card: 22px;        /* app cards; 26px for hero/marketing cards */
  --radius-pill: 999px;

  /* ---- Sizes ---- */
  --control-h: 54px;          /* default button / input height */
  --control-h-sm: 44px;       /* min touch target */
  --control-h-lg: 62px;       /* primary money actions (Payer, Envoyer) */

  /* ---- Elevation (light only; dark mode uses surface lightness instead) ---- */
  --hairline: 0 0 0 1px var(--line);
  --shadow-float: 0 24px 48px -28px rgba(22, 44, 140, .45);
  --shadow-popover: 0 20px 40px -20px rgba(10, 17, 48, .5), 0 0 0 1px var(--line);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* default UI transitions */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);  /* pops, bubbles */
  --dur-fast: 150ms; --dur-base: 200ms; --dur-theme: 350ms;
  --scene-loop: 6.5s;                             /* broadcast illustration loop */
  --rotator-loop: 12.8s;                          /* hero headline rotation (4 x 3.2s) */

  /* ---- Focus ---- */
  --focus-ring: 3px solid var(--mango);           /* outline-offset: 2px */

  color-scheme: light;
}

/* ---------------- Dark theme ---------------- */
:root[data-theme="dark"] {
  --bg: #0A1130;
  --surface: #121B42;
  --surface-2: #1A2452;
  --line: #2B3768;
  --ink: #EEF1FA;
  --ink-2: #CDD3E8;
  --muted: #A6B0D2;

  --primary: #7D95FF;
  --primary-hover: #98AAFF;
  --on-primary: #0A1130;
  --primary-soft: #1D2A66;
  --primary-ink: #A9B8FF;

  --mango: #F7C04A;
  --mango-soft: #33290F;
  --mango-ink: #F7C04A;

  --success: #3FCFC0;
  --success-ink: #5ADBCD;
  --success-soft: #0E3A3D;

  --danger: #FF7491;
  --danger-ink: #FF8FA6;
  --danger-soft: #40182A;

  --pending: #3A4E9E;

  --section-strong: #060B24;
  --panel-strong: #1A2452;
  --on-strong-muted: #A6B0D2;
  --strong-line: #2B3768;

  --digicel: #FF7A8A;
  --natcom: #FF9A52;

  --scene-sky: #15225E;
  --scene-sun: #F7C04A;      /* reads as the moon */
  --scene-hill-1: #21397A;
  --scene-hill-2: #2B4C96;
  --scene-road: #0E1638;
  --scene-star: #FFFFFF;
  --scene-glass: #2A3B7E;

  --hairline: 0 0 0 1px var(--line);
  --shadow-float: 0 0 0 1px var(--line);
  --shadow-popover: 0 0 0 1px var(--line);

  color-scheme: dark;
}

/* Follow the OS until the user picks a theme (remove data-theme to follow OS). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0A1130; --surface: #121B42; --surface-2: #1A2452; --line: #2B3768;
    --ink: #EEF1FA; --ink-2: #CDD3E8; --muted: #A6B0D2;
    --primary: #7D95FF; --primary-hover: #98AAFF; --on-primary: #0A1130; --primary-soft: #1D2A66; --primary-ink: #A9B8FF;
    --mango: #F7C04A; --mango-soft: #33290F; --mango-ink: #F7C04A;
    --success: #3FCFC0; --success-ink: #5ADBCD; --success-soft: #0E3A3D;
    --danger: #FF7491; --danger-ink: #FF8FA6; --danger-soft: #40182A;
    --pending: #3A4E9E; --section-strong: #060B24; --panel-strong: #1A2452; --on-strong-muted: #A6B0D2; --strong-line: #2B3768;
    --digicel: #FF7A8A; --natcom: #FF9A52;
    --scene-sky: #15225E; --scene-sun: #F7C04A; --scene-hill-1: #21397A; --scene-hill-2: #2B4C96; --scene-road: #0E1638; --scene-star: #FFFFFF; --scene-glass: #2A3B7E;
    --shadow-float: 0 0 0 1px var(--line); --shadow-popover: 0 0 0 1px var(--line);
    color-scheme: dark;
  }
}

/* ---------------- Base ---------------- */
html { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color var(--dur-theme) var(--ease-out), color var(--dur-theme) var(--ease-out); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }