/* =====================================================================
   OPERATIONAL INTELLIGENCE — DESIGN TOKENS
   Alfredo A. Martínez · Business Systems · AI Automation
   ===================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
}

/* ---------- ROOT TOKENS ---------- */
:root {
  /* ====== COLORS ====== */

  /* Foundation — dark navy stack */
  --ink-950: #05090F;       /* page background, deepest */
  --ink-900: #0A1220;       /* primary surface */
  --ink-850: #0E1828;       /* section bands */
  --ink-800: #121F33;       /* card surface */
  --ink-700: #1A2A44;       /* elevated card */
  --ink-600: #243553;       /* hover surface / divider strong */
  --ink-500: #324768;       /* subtle border */
  --ink-400: #4A6086;       /* muted accent */

  /* Brand blue scale */
  --blue-50:  #E8F1FF;
  --blue-100: #C9DEFF;
  --blue-200: #95BDFF;
  --blue-300: #5C97FF;
  --blue-400: #2F76FF;
  --blue-500: #1357EA;      /* brand blue */
  --blue-600: #0C44BE;
  --blue-700: #0A3490;
  --blue-800: #082466;
  --blue-900: #061847;

  /* Cyan (signal / data) */
  --cyan-300: #6FE3FF;
  --cyan-400: #2DCEFF;      /* brand cyan */
  --cyan-500: #00B7E8;
  --cyan-600: #0091BD;

  /* Yellow — reserved exclusively for conversion + highlight moments */
  --yellow-300: #FFE070;
  --yellow-400: #FFD13A;    /* primary CTA / highlight */
  --yellow-500: #F5BE0E;
  --yellow-600: #C8980A;

  /* Neutral text on dark */
  --fg-1: #F4F7FB;          /* primary text */
  --fg-2: #C2CCDC;          /* secondary text / body */
  --fg-3: #8898B3;          /* tertiary / meta */
  --fg-4: #5C6E8C;          /* placeholder / disabled */
  --fg-on-yellow: #1A1300;  /* text on yellow CTA */
  --fg-on-blue: #FFFFFF;

  /* Semantic — operational signal colors */
  --signal-success: #2BD68B;
  --signal-warning: #FFB347;
  --signal-danger:  #FF5A6A;
  --signal-info:    var(--cyan-400);

  /* Borders & hairlines */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-blue: rgba(47, 118, 255, 0.35);

  /* ====== TYPOGRAPHY ====== */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (rem-based, desktop) */
  --fs-display:  clamp(2.75rem, 5.5vw, 4.5rem);  /* hero */
  --fs-h1:       clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.9375rem;
  --fs-meta:     0.8125rem;
  --fs-eyebrow:  0.75rem;

  --lh-tight:    1.08;
  --lh-display:  1.12;
  --lh-heading:  1.25;
  --lh-body:     1.6;
  --lh-meta:     1.45;

  --tracking-eyebrow: 0.14em;
  --tracking-label:   0.06em;
  --tracking-display: -0.02em;

  /* ====== SPACING (8pt-based + a 4pt micro step) ====== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ====== RADII ====== */
  --radius-xs: 4px;     /* badges, chips */
  --radius-sm: 8px;     /* inputs, small cards */
  --radius-md: 12px;    /* default cards */
  --radius-lg: 16px;    /* feature cards */
  --radius-xl: 20px;    /* modules / panels */
  --radius-pill: 999px;

  /* ====== SHADOWS / ELEVATION ====== */
  /* Shadows are restrained — this is enterprise, not consumer.
     Most elevation comes from surface color + border, not blur. */
  --shadow-sm:  0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.55);
  --shadow-blue-glow: 0 0 0 1px rgba(47,118,255,0.35), 0 8px 32px rgba(19,87,234,0.25);
  --shadow-cta:  0 8px 24px rgba(255,209,58,0.20), 0 0 0 1px rgba(255,209,58,0.35);

  /* ====== MOTION ====== */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;

  /* ====== LAYOUT ====== */
  --container-max: 1240px;
  --gutter:        24px;
}

/* ---------- BASE ---------- */
html, body {
  background: var(--ink-950);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* ---------- SEMANTIC TYPE ---------- */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0;
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0;
}
p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}
.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan-400);
}
.t-section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
  text-transform: uppercase;
}
code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--cyan-300);
}

/* ---------- UTILITY: SURFACES ---------- */
.surface-base { background: var(--ink-950); }
.surface-panel { background: var(--ink-900); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.surface-card { background: var(--ink-800); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.surface-elevated { background: var(--ink-700); border: 1px solid var(--border-default); border-radius: var(--radius-md); }

/* Diagonal grid texture for hero/section backdrops */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}