/* ============================================================
   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=Geist:wght@300..700&family=Geist+Mono: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: oklch(0.720 0.170 138);  /* #72C04B accent      */
  --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);

  /* Brand green as *text*, as specified. Note: #72C04B reaches only ~1.9:1 on
     the tinted light surface (WCAG AA wants 4.5:1 at this size), so it is hard
     to read in light mode. Swap to oklch(0.525 0.140 141) — the same green,
     darkened — if that ever needs to pass. Dark mode is fine at ~7.3:1. */
  --login-ink:    var(--brand-accent);

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

  /* ---- Type ---- */
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --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:    500 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;
}

/* ============================================================
   Dark theme — same role re-mapping as the app.
   ============================================================ */
[data-theme="dark"] {
  --bg:           oklch(0.165 0.014 264);
  --bg-deep:      oklch(0.205 0.012 262);
  --surface:      oklch(0.205 0.016 264);
  --surface-2:    oklch(0.232 0.016 264);
  --surface-sunk: oklch(0.262 0.016 264);
  --ink:          oklch(0.965 0.004 258);
  --ink-2:        oklch(0.872 0.008 258);
  --ink-3:        oklch(0.715 0.012 258);
  --ink-faint:    oklch(0.560 0.016 258);
  --line:         oklch(0.318 0.016 262);
  --line-strong:  oklch(0.392 0.018 260);
  --line-faint:   oklch(0.272 0.016 264);

  --accent:       oklch(0.620 0.055 158);
  --accent-ink:   var(--slate-0);
  --accent-hover: oklch(0.680 0.060 156);

  --blue:         oklch(0.685 0.135 248);
  --indigo:       oklch(0.660 0.150 277);
  --green:        oklch(0.780 0.165 138);
  --amber:        oklch(0.780 0.130 78);
  --amber-deep:   oklch(0.760 0.120 70);
  --red:          oklch(0.680 0.180 24);

  --blue-soft:    oklch(0.300 0.045 248);
  --blue-line:    oklch(0.400 0.060 248);
  --indigo-soft:  oklch(0.300 0.050 280);
  --indigo-line:  oklch(0.400 0.065 280);
  --green-soft:   oklch(0.300 0.060 138);
  --green-line:   oklch(0.400 0.080 138);
  --amber-soft:   oklch(0.320 0.055 80);
  --amber-line:   oklch(0.420 0.075 80);
  --red-soft:     oklch(0.310 0.070 24);
  --red-line:     oklch(0.420 0.090 24);

  --sh-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 1px oklch(0 0 0 / 0.24);
  --sh-2: 0 4px 12px oklch(0 0 0 / 0.40), 0 1px 3px oklch(0 0 0 / 0.30);
  --sh-3: 0 12px 36px oklch(0 0 0 / 0.55), 0 4px 12px oklch(0 0 0 / 0.40);
}