/* ============================================================
   Themiros — Landing page design tokens.
   Mirrors frontend/src/styles/tokens.css so the site and the app
   share one palette. Keep the two in sync when brand colors move.
   ============================================================ */

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

:root {
  /* ---- Themiros brand palette (source values, in OKLCH) ---- */
  --brand-black:  oklch(0.176 0.006 230);  /* #101214 deep black  */
  --brand-green:  oklch(0.545 0.041 160);  /* #5F8274 primary     */
  --brand-sage:   oklch(0.626 0.045 148);  /* #769079 sage        */
  --brand-accent: #55A930;                 /* consigne 1.4 — point de la marque */
  --brand-grey:   oklch(0.966 0.003 250);  /* #F2F4F6 light grey  */

  /* ---- Cool slate neutral ramp (hue ~258, very low chroma) ---- */
  --slate-0:   oklch(0.995 0.001 258);
  --slate-25:  oklch(0.985 0.002 258);
  --slate-50:  oklch(0.972 0.003 258);
  --slate-100: oklch(0.951 0.004 258);
  --slate-150: oklch(0.928 0.006 258);
  --slate-200: oklch(0.901 0.008 258);
  --slate-300: oklch(0.852 0.010 258);
  --slate-400: oklch(0.715 0.014 258);
  --slate-500: oklch(0.585 0.016 258);
  --slate-600: oklch(0.488 0.018 258);
  --slate-700: oklch(0.392 0.018 260);
  --slate-800: oklch(0.296 0.018 262);
  --slate-900: oklch(0.228 0.016 264);
  --slate-950: oklch(0.176 0.014 264);

  /* ---- Functional / semantic ---- */
  --green:       var(--brand-accent);
  --green-soft:  oklch(0.945 0.045 138);
  --green-line:  oklch(0.855 0.080 138);

  --amber:       oklch(0.700 0.135 78);
  --amber-soft:  oklch(0.960 0.045 84);
  --amber-line:  oklch(0.870 0.090 82);
  --amber-deep:  oklch(0.560 0.120 64);

  --red:         oklch(0.566 0.196 24);
  --red-soft:    oklch(0.955 0.038 22);
  --red-line:    oklch(0.860 0.080 22);

  --blue:        oklch(0.530 0.128 248);   /* layer A — objective  */
  --blue-soft:   oklch(0.955 0.028 248);
  --blue-line:   oklch(0.870 0.055 248);

  --indigo:      oklch(0.498 0.158 277);   /* layer B — evaluative */
  --indigo-soft: oklch(0.955 0.030 285);
  --indigo-line: oklch(0.865 0.060 283);

  /* ---- Roles ---- */
  --bg:           var(--brand-grey);
  --bg-deep:      oklch(0.205 0.012 262);   /* dark bands, footer  */
  --surface:      var(--slate-0);
  --surface-2:    var(--slate-25);
  --surface-sunk: var(--slate-100);
  --ink:          var(--slate-900);
  --ink-2:        var(--slate-700);
  --ink-3:        var(--slate-500);
  --ink-faint:    var(--slate-400);
  --line:         var(--slate-200);
  --line-strong:  var(--slate-300);
  --line-faint:   var(--slate-150);

  --accent:       var(--brand-green);
  --accent-ink:   var(--slate-0);
  --accent-hover: oklch(0.485 0.044 160);

  /* Consigne 1.4 — the brand green #55A930 is reserved for the point of the
     mark. Everything else reads in white ink or grey at 52%. */
  --login-ink:    var(--brand-accent);

  --layer-a:      var(--blue);
  --layer-b:      var(--indigo);
  --layer-c:      var(--amber-deep);

  /* ---- Type ---- */
  /* Consigne 1.4 — Montserrat only, at 600 for titles and 400 for text. */
  --font-sans: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-mono: "Montserrat", system-ui, -apple-system, sans-serif;

  --t-h2:    600 15px/1.25 var(--font-sans);
  --t-h3:    600 13px/1.3  var(--font-sans);
  --t-body:  400 13px/1.5  var(--font-sans);
  --t-sm:    400 12px/1.45 var(--font-sans);
  --t-xs:    600 11px/1.4  var(--font-sans);
  --t-micro: 600 10px/1.3  var(--font-sans);

  /* ---- Radius / shadow / space ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 11px;
  --r-xl: 16px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px oklch(0.2 0.02 264 / 0.06), 0 1px 1px oklch(0.2 0.02 264 / 0.04);
  --sh-2: 0 4px 12px oklch(0.2 0.02 264 / 0.08), 0 1px 3px oklch(0.2 0.02 264 / 0.06);
  --sh-3: 0 12px 36px oklch(0.2 0.02 264 / 0.14), 0 4px 12px oklch(0.2 0.02 264 / 0.08);

  --track: 0.14em;

  /* ---- Landing-specific layout ---- */
  --page-max: 1360px;
  --nav-h: 62px;
  --section-y: 82px;
}

/* ============================================================
   Consigne 1.4 — presentation charter.
   Plain black #000000, white ink, grey at 52% opacity for secondary
   text, white rules at 13%. Applied unconditionally: this block
   overrides the role defaults above, so the charter does not depend
   on a runtime theme attribute or on JavaScript.
   ============================================================ */
:root {
  /* --- Consigne 1.4 : charte noire, appliquee sans condition --- */
  --bg:           #000000;
  --bg-deep:      #000000;
  --surface:      #000000;
  --surface-2:    #000000;
  --surface-sunk: #000000;
  --ink:          #FFFFFF;
  --ink-2:        rgb(255 255 255 / 0.52);
  --ink-3:        rgb(255 255 255 / 0.52);
  --ink-faint:    rgb(255 255 255 / 0.52);
  --line:         rgb(255 255 255 / 0.13);
  --line-strong:  rgb(255 255 255 / 0.13);
  --line-faint:   rgb(255 255 255 / 0.13);

  /* Aucun accent colore : tout retombe sur l'encre blanche. Le vert
     #55A930 n'est appele que par .brand-dot (voir site.css). */
  --accent:       #FFFFFF;
  --accent-ink:   #000000;
  --accent-hover: rgb(255 255 255 / 0.88);
  --login-ink:    #FFFFFF;

  --blue:         #FFFFFF;
  --indigo:       #FFFFFF;
  --green:        #FFFFFF;
  --amber:        #FFFFFF;
  --amber-deep:   #FFFFFF;
  --red:          #FFFFFF;

  --blue-soft:    transparent;
  --blue-line:    rgb(255 255 255 / 0.13);
  --indigo-soft:  transparent;
  --indigo-line:  rgb(255 255 255 / 0.13);
  --green-soft:   transparent;
  --green-line:   rgb(255 255 255 / 0.13);
  --amber-soft:   transparent;
  --amber-line:   rgb(255 255 255 / 0.13);
  --red-soft:     transparent;
  --red-line:     rgb(255 255 255 / 0.13);

  --layer-a:      #FFFFFF;
  --layer-b:      #FFFFFF;
  --layer-c:      #FFFFFF;

  /* Aucun relief : la consigne interdit l'effet brillant. */
  --sh-1: none;
  --sh-2: none;
  --sh-3: none;
}