/* ============================================================
   INNCERTIA — Design Tokens
   Ordenar · Entender · Decidir
   ============================================================ */

/* -------- FONTS --------
   Inncertia uses Montserrat as its primary brand typeface
   (display + body). Files are bundled locally in fonts/.
   JetBrains Mono is loaded from Google Fonts for tabular
   figures in financial reports.
*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============== COLOR — RAW ============== */
  --navy-900: #001226;
  --navy-800: #001f3c;   /* PRIMARY brand navy — wordmark */
  --navy-700: #0a2d52;
  --navy-600: #143458;
  --navy-500: #2c4a72;
  --navy-400: #5b7295;
  --navy-300: #94a4be;
  --navy-200: #c8d0dd;
  --navy-100: #e4e8ef;
  --navy-050: #f1f3f7;

  --orange-700: #d96a26;
  --orange-600: #ec7e3a;
  --orange-500: #ff904e;  /* PRIMARY brand orange — the "a." */
  --orange-400: #ffa371;
  --orange-300: #ffbc97;
  --orange-200: #ffd6bd;
  --orange-100: #ffe9da;
  --orange-050: #fff4ec;

  --paper:        #fafaf7;   /* off-white / warm paper */
  --paper-dim:    #f3f2ec;
  --warm-gray-300:#d5d3cb;
  --warm-gray-200:#e8e6df;
  --white:        #ffffff;

  /* Semantic financial — used ONLY for reporting deltas */
  --positive:   #2f8f5b;
  --positive-bg:#e6f3eb;
  --negative:   #c0432e;
  --negative-bg:#fbe7e2;

  /* ============== COLOR — SEMANTIC ============== */
  /* Foreground (text/icons) */
  --fg-1: var(--navy-800);     /* primary text */
  --fg-2: var(--navy-500);     /* secondary text */
  --fg-3: var(--navy-400);     /* tertiary, captions */
  --fg-4: var(--navy-300);     /* placeholder, disabled */
  --fg-on-dark: var(--paper);
  --fg-on-dark-2: var(--navy-200);
  --fg-accent: var(--orange-500);

  /* Background */
  --bg-1: var(--paper);        /* page */
  --bg-2: var(--white);        /* card / surface */
  --bg-3: var(--paper-dim);    /* subtle inset */
  --bg-dark: var(--navy-800);
  --bg-dark-2: var(--navy-700);
  --bg-accent: var(--orange-500);
  --bg-accent-soft: var(--orange-050);

  /* Border */
  --border-1: var(--warm-gray-200);  /* hairline on light */
  --border-2: var(--warm-gray-300);  /* slightly heavier */
  --border-on-dark: var(--navy-600);
  --focus-ring: var(--orange-500);

  /* ============== TYPE — RAW ============== */
  --font-display: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — 1.200 minor third, 16px base */
  --fs-12: 0.75rem;     /* 12 — micro */
  --fs-14: 0.875rem;    /* 14 — small */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — body-lg */
  --fs-20: 1.25rem;     /* 20 — h5 */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-30: 1.875rem;    /* 30 — h3 */
  --fs-38: 2.375rem;    /* 38 — h2 */
  --fs-48: 3rem;        /* 48 — h1 */
  --fs-64: 4rem;        /* 64 — display */

  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ============== SPACING (8pt) ============== */
  --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: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ============== SHADOWS (navy-tinted) ============== */
  --shadow-sm: 0 1px 2px rgba(0, 31, 60, 0.06), 0 1px 1px rgba(0, 31, 60, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 31, 60, 0.08), 0 2px 4px rgba(0, 31, 60, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 31, 60, 0.12), 0 4px 8px rgba(0, 31, 60, 0.06);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--orange-500);

  /* ============== MOTION ============== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 80ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ============== LAYOUT ============== */
  --content-max: 1200px;
  --shell-max:   1440px;
  --gutter:      24px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these directly: <h1 class="display"> etc.
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.body, p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.mono, .figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* The brand period — for use after key statements */
.brand-dot::after {
  content: ".";
  color: var(--fg-accent);
}