/* ============================================================================
   LONTRA DESIGN TOKENS
   ----------------------------------------------------------------------------
   Source of truth: jpm0112/pagina-web-lontra  (tailwind config + live CSS)
   Structure: raw scales → semantic aliases → typographic recipes
   ============================================================================ */


/* ─── Web fonts ──────────────────────────────────────────────────────────── */

/* Inter   — the entire interface (matches the live site exactly).
   Source Serif 4 — editorial moments: pull quotes, equation captions, paper citations.
                    Provisioned, NOT yet deployed on the live site — flag with owner.
   JetBrains Mono — code, math labels, log output in dashboards.            */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Source+Serif+4:opsz,wght@8..60,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');


:root {

  /* ════════════════════════════════════════════════════════════════════════
     1. PRIMITIVES — raw scales. Don't reference these in components.
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Primary blue — the Lontra signature ─────────────────────────────── */
  /* #1a3fb8 sits at 600. All tints/shades step around it. */
  --blue-50:   #eef2ff;
  --blue-100:  #e0e7ff;
  --blue-200:  #c7d2fe;
  --blue-300:  #a5b4fc;
  --blue-400:  #6366f1;
  --blue-500:  #3b50d6;
  --blue-600:  #1a3fb8;   /* ← canonical brand primary */
  --blue-700:  #1738a4;   /* hover state of primary */
  --blue-800:  #142e87;
  --blue-900:  #0f1f3d;   /* the deep navy reserved for heavy editorial blocks */
  --blue-950:  #0a1428;

  /* Translucent primary — for icon-chip backgrounds, focus rings, hover tints.
     Used so often they get first-class names. */
  --blue-alpha-04:  rgba(26, 63, 184, 0.04);   /* grid lines on hero bg */
  --blue-alpha-05:  rgba(26, 63, 184, 0.05);   /* faintest hover wash */
  --blue-alpha-10:  rgba(26, 63, 184, 0.10);   /* icon chip bg */
  --blue-alpha-15:  rgba(26, 63, 184, 0.15);   /* focus ring shadow, CTA glow */
  --blue-alpha-20:  rgba(26, 63, 184, 0.20);   /* primary/20 — chip hover, tinted shadow */
  --blue-alpha-40:  rgba(26, 63, 184, 0.40);   /* card border on hover */

  /* ── Accent: cool cyan & teal — pillar differentiators ───────────────── */
  --cyan-500:  #0891b2;   /* the eyebrow color used site-wide; "AI" pillar */
  --cyan-alpha-10: rgba(8, 145, 178, 0.10);
  --cyan-alpha-20: rgba(8, 145, 178, 0.20);

  --teal-500:  #0d9488;   /* "Mathematics" pillar; teal leg of CTA gradient */
  --teal-alpha-10: rgba(13, 148, 136, 0.10);
  --teal-alpha-20: rgba(13, 148, 136, 0.20);

  --bright-blue:  #2563eb;   /* glitch echo layer, gradient midpoint */
  --amber-500:    #d97706;   /* rarely used — warning, occasional warmth */
  --emerald-400:  #34d399;   /* "Published in Omega" badge, success states */

  /* ── Neutrals: Tailwind slate ────────────────────────────────────────── */
  --slate-50:   #f8fafc;
  --slate-100:  #f1f5f9;
  --slate-200:  #e2e8f0;
  --slate-300:  #cbd5e1;
  --slate-400:  #94a3b8;
  --slate-500:  #64748b;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --slate-800:  #1e293b;
  --slate-900:  #0f172a;

  /* The canvas. Near-white with a 1% cool cast. Never pure white. */
  --bg-page-raw: #f8f9fc;


  /* ════════════════════════════════════════════════════════════════════════
     2. SEMANTIC — what components reference. Map intent → primitive.
     ════════════════════════════════════════════════════════════════════════ */

  /* Brand */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-tint:   var(--blue-alpha-10);
  --color-primary-tint-2: var(--blue-alpha-20);
  --color-primary-ring:   var(--blue-alpha-15);
  --color-navy:           var(--blue-900);

  /* The three service pillars — each maps to one accent. Keep this trio stable. */
  --pillar-or:    var(--blue-600);     /* Operations Research / Logistics */
  --pillar-ai:    var(--cyan-500);     /* AI / ML / Digital Solutions */
  --pillar-math:  var(--teal-500);     /* Advanced Mathematics / Simulation */
  --pillar-or-tint:    var(--blue-alpha-10);
  --pillar-ai-tint:    var(--cyan-alpha-10);
  --pillar-math-tint:  var(--teal-alpha-10);

  /* Foreground */
  --fg-primary:    var(--slate-900);   /* headlines, body emphasis */
  --fg-secondary:  var(--slate-500);   /* body paragraphs */
  --fg-tertiary:   var(--slate-400);   /* footnotes, list items, captions */
  --fg-muted:      var(--slate-300);   /* parenthetical asides, disabled */
  --fg-link:       var(--blue-600);
  --fg-on-primary: #ffffff;
  --fg-on-dark:    #ffffff;

  /* Background */
  --bg-page:        var(--bg-page-raw);
  --bg-surface:     #ffffff;           /* cards lift off the page */
  --bg-surface-alt: var(--slate-100);  /* nested second surface */
  --bg-dark:        var(--slate-900);  /* footer */
  --bg-glass:       rgba(255, 255, 255, 0.85);
  --bg-glass-blur:  12px;

  /* Border */
  --border-default:  var(--slate-200);  /* every hairline */
  --border-strong:   var(--slate-300);
  --border-focus:    var(--blue-600);
  --border-hover-primary: var(--blue-alpha-40);

  /* Feedback (rarely used — Lontra is mostly neutral + brand) */
  --color-success: var(--emerald-400);
  --color-warning: var(--amber-500);
  --color-danger:  #ef4444;


  /* ════════════════════════════════════════════════════════════════════════
     3. TYPOGRAPHY
     ════════════════════════════════════════════════════════════════════════ */

  /* Families */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-icon:   'Material Symbols Outlined';

  /* Sizes — 1rem = 16px */
  --fs-xxs:   0.6875rem;   /* 11px  micro */
  --fs-xs:    0.75rem;     /* 12px  eyebrow, badge, footnote */
  --fs-sm:    0.875rem;    /* 14px  body-sm, nav, button */
  --fs-base:  1rem;        /* 16px  body */
  --fs-lg:    1.125rem;    /* 18px  lead */
  --fs-xl:    1.25rem;     /* 20px  h3 / card title */
  --fs-2xl:   1.5rem;      /* 24px  large card title */
  --fs-3xl:   1.875rem;    /* 30px  h2-sm */
  --fs-4xl:   2.25rem;     /* 36px  h2 / mobile h1 */
  --fs-5xl:   3rem;        /* 48px  h2-xl, mid h1 */
  --fs-6xl:   3.75rem;     /* 60px  h1 */
  --fs-7xl:   5rem;        /* 80px  display headline */

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;     /* reserved for the period in "Lontra." */

  /* Line height */
  --lh-tight:    0.95;
  --lh-snug:     1.15;
  --lh-normal:   1.5;
  --lh-relaxed:  1.625;

  /* Tracking — the 0.3em eyebrow is the most identifiable Lontra type gesture */
  --tracking-tight:    -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.3em;


  /* ════════════════════════════════════════════════════════════════════════
     4. LAYOUT — spacing, radius, container
     ════════════════════════════════════════════════════════════════════════ */

  /* Spacing — Tailwind 4px scale */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  --container-max:  80rem;     /* max-w-7xl */
  --gutter-x:       2rem;      /* px-8 desktop  (px-6 below md is responsive) */
  --section-y:      6rem;      /* py-24 desktop */
  --nav-height:     5rem;      /* h-20 */

  /* Radii */
  --radius-sm:    0.25rem;
  --radius-md:    0.5rem;      /* button, form field, icon chip */
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1rem;        /* THE card radius */
  --radius-3xl:   1.5rem;      /* hero shell, CTA block */
  --radius-full:  9999px;


  /* ════════════════════════════════════════════════════════════════════════
     5. EFFECTS — shadow, motion, textures
     ════════════════════════════════════════════════════════════════════════ */

  /* Shadows. Lontra rule: emphasis shadows are *always* primary-tinted. */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 10px 15px -3px var(--blue-alpha-20), 0 4px 6px -4px var(--blue-alpha-10);
  --shadow-xl:  0 20px 25px -5px var(--blue-alpha-10), 0 8px 10px -6px rgba(26, 63, 184, 0.06);
  --shadow-card-hover:  0 20px 60px var(--blue-alpha-10);
  /* The CTA shimmer's animated glow */
  --shadow-cta-rest:    0 0 60px var(--blue-alpha-15), 0 0 120px var(--teal-alpha-10);
  --shadow-cta-peak:    0 0 80px var(--blue-alpha-20), 0 0 160px rgba(13, 148, 136, 0.12);

  /* Focus ring — applied via box-shadow on form fields */
  --focus-ring:  0 0 0 3px var(--blue-alpha-15);

  /* Motion */
  --ease-emphasized:  cubic-bezier(0.16, 1, 0.3, 1);   /* canonical entrance easing */
  --ease-standard:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    0.2s;
  --dur-medium:  0.4s;
  --dur-slow:    0.7s;
  --dur-hero:    0.8s;
  --dur-clip-reveal:  1s;

  /* Backgrounds — signature textures */
  --grid-size:  60px;
  --grid-line:  var(--blue-alpha-04);
  --bg-grid:
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);

  /* CTA gradient: primary → bright → teal. The one decorative gradient in the system. */
  --gradient-cta:        linear-gradient(135deg, #1a3fb8 0%, #1e4fc9 40%, #0d7a73 100%);
  --gradient-page-fade:  linear-gradient(to top, var(--bg-page-raw), transparent);
  --gradient-page-overlay: linear-gradient(to bottom, var(--blue-alpha-10), transparent);

  /* Z layers */
  --z-grid:     0;
  --z-content: 10;
  --z-nav:     50;
  --z-modal:   60;
  --z-cursor:  9999;
}


/* ============================================================================
   TYPE RECIPES
   Apply as classes. Each is a complete recipe (size + weight + leading + color).
   ============================================================================ */

.ls-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cyan-500);
  display: inline-block;
}
.ls-eyebrow--muted  { color: var(--slate-400); }
.ls-eyebrow--neutral { color: var(--slate-500); }

.ls-display {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4vw + 0.5rem, 5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.ls-h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 3.5vw + 0.5rem, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.ls-h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 2vw + 1rem, 3rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-primary);
}

.ls-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--fg-primary);
}

.ls-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.ls-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.ls-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.ls-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-tertiary);
}

.ls-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--slate-700);
}

.ls-button {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

.ls-tag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}

.ls-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}

.ls-pull-serif {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: 1.3;
  color: var(--fg-primary);
}


/* ============================================================================
   GLOBAL BASE (opt-in)
   Apply .lontra-base on <html> or <body> to inherit the canonical canvas.
   ============================================================================ */

.lontra-base {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lontra-base a:focus-visible,
.lontra-base button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Material Symbols defaults */
.material-symbols-outlined {
  font-family: var(--font-icon);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}