/* French IPTV — self-contained stylesheet (tokens inlined for reliable hosting) */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ===== tokens/base.css ===== */
/* ===========================================================================
   French IPTV — Base element styling & helpers
   Minimal, opinionated resets so specimens/components look right out of the box.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* Eyebrow / kicker label ------------------------------------------------ */
.fi-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

/* Lead paragraph -------------------------------------------------------- */
.fi-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

::selection { background: var(--blue-200); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }


/* ===== tokens/colors.css ===== */
/* ===========================================================================
   French IPTV — Color tokens  (French flag theme: blue · white · red)
   White / cool-light surfaces, a confident French blue, and a flag-red accent,
   anchored by a deep navy ink for text and dark sections.
   =========================================================================== */

:root {
  /* --- Ink / navy (cool, deep — text + dark sections) ----------------- */
  --ink-950: #0a1326;
  --ink-900: #0f1c3a;
  --ink-800: #16264d;
  --ink-700: #213662;
  --ink-600: #324a7d;
  --ink-500: #46608f;

  /* --- Brand blue (French flag blue) --------------------------------- */
  --blue-700: #0a3f87;
  --blue-600: #0b54b0; /* primary brand blue */
  --blue-500: #1769d4;
  --blue-400: #4d93ec;
  --blue-200: #b3cdf3;
  --blue-100: #dbe8fb;
  --blue-50:  #eef4fd;

  /* --- Red (French flag red — accent) -------------------------------- */
  --rouge-700: #b81c2c;
  --rouge-600: #d72436;
  --rouge-500: #ef4135; /* flag red */
  --rouge-200: #f6c1c5;
  --rouge-100: #fbdbde;
  --rouge-50:  #fdeff0;

  /* --- Cool neutrals (on white) -------------------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f9fc;
  --neutral-100: #eef2f8;
  --neutral-200: #e1e8f2;
  --neutral-300: #cdd7e6;
  --neutral-400: #9fadc2;
  --neutral-500: #6b7890;
  --neutral-600: #4c596f;
  --neutral-700: #36425a;
  --neutral-800: #232d42;
  --neutral-900: #161d2e;

  /* --- Surfaces / backgrounds (white + cool light) ------------------- */
  --paper:    #ffffff;
  --paper-2:  #f6f9fd;
  --paper-3:  #eaf1fb;

  /* --- Functional ----------------------------------------------------- */
  --green-600: #1f8a5b;
  --green-100: #d7efe2;
  --amber-600: #b8791c;
  --amber-100: #f6e7c8;
  --red-600:   #d72436;

  /* ===================================================================
     Semantic aliases — reference THESE in components, not raw scales.
     =================================================================== */
  --bg:             var(--paper);
  --bg-alt:         var(--paper-3);
  --surface:        var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-ink:    var(--ink-900);   /* dark sections / footer */

  --text-strong:    var(--ink-900);
  --text-body:      #232d42;
  --text-muted:     #566181;
  --text-faint:     #8b97ad;
  --text-on-ink:    #eef3fb;
  --text-on-ink-muted: #a7b4ce;

  --brand:          var(--blue-600);
  --brand-strong:   var(--blue-700);
  --brand-ink:      var(--ink-900);
  --accent:         var(--rouge-600);
  --accent-strong:  var(--rouge-700);

  --link:           var(--blue-600);
  --link-hover:     var(--blue-700);

  --border:         rgba(15, 28, 58, 0.12);
  --border-strong:  rgba(15, 28, 58, 0.22);
  --border-ink:     rgba(255, 255, 255, 0.14);

  --focus-ring:     rgba(23, 105, 212, 0.45);

  --success:        var(--green-600);
  --success-bg:     var(--green-100);
  --warning:        var(--amber-600);
  --warning-bg:     var(--amber-100);
  --danger:         var(--red-600);

  /* Button intents */
  --btn-primary-bg:     var(--ink-900);
  --btn-primary-bg-hov: var(--ink-800);
  --btn-primary-fg:     #ffffff;
  --btn-brand-bg:       var(--blue-600);
  --btn-brand-bg-hov:   var(--blue-700);
  --btn-accent-bg:      var(--rouge-600);
  --btn-accent-bg-hov:  var(--rouge-700);
}


/* ===== tokens/typography.css ===== */
/* ===========================================================================
   French IPTV — Typography tokens
   Display: Newsreader (high-contrast editorial serif — French press feel)
   UI / body: Hanken Grotesk (warm, legible neo-grotesque)
   Mono: JetBrains Mono (codes, M3U, billing references)
   =========================================================================== */

:root {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif; /* @kind font */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* @kind font */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  /* Newsreader looks best near medium for headings */
  --fw-display: 500; /* @kind font */

  /* Fluid type scale (clamped, ~1.22 ratio). The clamp() tokens are marked
     @kind other so the compiler doesn't misread the "+ Nvw" math as a font
     family; they are type sizes, shown in the Type specimen cards. */
  --text-display:  clamp(2.85rem, 1.6rem + 5.2vw, 4.75rem); /* @kind other */
  --text-h1:       clamp(2.25rem, 1.5rem + 3vw, 3.25rem); /* @kind other */
  --text-h2:       clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem); /* @kind other */
  --text-h3:       clamp(1.35rem, 1.15rem + 0.9vw, 1.65rem); /* @kind other */
  --text-h4:       1.2rem; /* @kind font */
  --text-lead:     clamp(1.1rem, 1rem + 0.5vw, 1.3rem); /* @kind other */
  --text-body-lg:  1.0625rem; /* @kind font */
  --fs-body:     1rem; /* @kind font */
  --text-sm:       0.9rem; /* @kind font */
  --text-xs:       0.8rem; /* @kind font */
  /* uppercase labels */
  --text-eyebrow:  0.78rem; /* @kind font */

  /* Line heights */
  --lh-tight: 1.05; /* @kind font */
  --lh-snug: 1.2; /* @kind font */
  --lh-heading: 1.12; /* @kind font */
  --lh-body: 1.62; /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind font */
  --ls-display: -0.025em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  /* uppercase eyebrows */
  --ls-eyebrow: 0.14em; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
}


/* ===== tokens/spacing.css ===== */
/* ===========================================================================
   French IPTV — Spacing, radius, shadow, layout & motion tokens
   4px base unit. Soft low-spread shadows tuned for the cream background.
   =========================================================================== */

:root {
  /* Spacing scale (4px base) ------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */
  --space-section: clamp(4rem, 2rem + 8vw, 7.5rem);

  /* Radii -------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* Borders ------------------------------------------------------------ */
  --bw: 1px;
  --bw-thick: 1.5px;

  /* Shadows (cool ink-tinted, low spread) ----------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 27, 60, 0.06);
  --shadow-sm: 0 1px 2px rgba(16, 27, 60, 0.06), 0 2px 4px rgba(16, 27, 60, 0.05);
  --shadow-md: 0 6px 18px -6px rgba(16, 27, 60, 0.14), 0 2px 6px rgba(16, 27, 60, 0.06);
  --shadow-lg: 0 18px 44px -14px rgba(16, 27, 60, 0.20), 0 4px 12px rgba(16, 27, 60, 0.08);
  --shadow-xl: 0 36px 72px -22px rgba(16, 27, 60, 0.30);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  /* Ring used to lift cards on cream without a hard border */
  --ring-hairline: inset 0 0 0 1px rgba(16, 27, 60, 0.08); /* @kind shadow */

  /* Layout ------------------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 760px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* @kind spacing */

  /* Borders width tokens are classified as spacing by value. */

  /* Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);/* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}