/* =====================================================================
   Perimetered.ai · Design Tokens
   --------------------------------------------------------------------
   Dark-first, Material You–derived palette built around a periwinkle
   primary (#b4c5ff) over deep navy (#0c1322). The visual language is
   "cybersecurity command surface": glass panels, mono accents,
   ambient glows, dot grids. Type is Inter for everything except code
   (IBM Plex Mono). Material Symbols Outlined for iconography.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

/* Material Symbols ligature setup — without these the font renders the
   raw token (e.g. "arrow_forward") instead of the glyph. */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* ---------- Brand: Primary (periwinkle blue) ---------- */
  --color-primary:               #b4c5ff;
  --color-primary-fixed:         #dbe1ff;
  --color-primary-fixed-dim:     #b4c5ff;
  --color-primary-container:     #2563eb;  /* deep electric blue */
  --color-on-primary:            #002a78;
  --color-on-primary-container:  #eeefff;
  --color-on-primary-fixed:      #00174b;
  --color-on-primary-fixed-variant: #003ea8;
  --color-inverse-primary:       #0053db;

  /* ---------- Brand: Secondary (signal green / "ok") ---------- */
  --color-secondary:             #4de082;
  --color-secondary-fixed:       #6dfe9c;
  --color-secondary-fixed-dim:   #4de082;
  --color-secondary-container:   #00b55d;
  --color-on-secondary:          #003919;
  --color-on-secondary-container:#003e1c;
  --color-on-secondary-fixed:    #00210c;
  --color-on-secondary-fixed-variant: #005227;

  /* ---------- Brand: Tertiary (lighter blue accent) ---------- */
  --color-tertiary:              #a4c9ff;
  --color-tertiary-fixed:        #d4e3ff;
  --color-tertiary-fixed-dim:    #a4c9ff;
  --color-tertiary-container:    #1d6fbf;
  --color-on-tertiary:           #00315d;
  --color-on-tertiary-container: #ebf1ff;
  --color-on-tertiary-fixed:     #001c39;
  --color-on-tertiary-fixed-variant: #004883;

  /* ---------- Semantic: Error (critical/red) ---------- */
  --color-error:                 #ffb4ab;
  --color-error-container:       #93000a;
  --color-on-error:              #690005;
  --color-on-error-container:    #ffdad6;

  /* ---------- Surfaces (the deep-navy backdrop ladder) ---------- */
  --color-background:                  #0c1322;  /* page */
  --color-surface:                     #0c1322;
  --color-surface-dim:                 #0c1322;
  --color-surface-bright:               #323949;
  --color-surface-tint:                #b4c5ff;  /* primary tint over surfaces */
  --color-surface-variant:             #2e3545;
  --color-surface-container:            #191f2f;
  --color-surface-container-low:        #141b2b;
  --color-surface-container-high:       #232a3a;
  --color-surface-container-highest:    #2e3545;
  --color-surface-container-lowest:     #070e1d;  /* footer-darkest */
  --color-on-background:               #dce2f7;
  --color-on-surface:                  #dce2f7;
  --color-on-surface-variant:          #c3c6d7;

  /* ---------- Outlines ---------- */
  --color-outline:                     #8d90a0;
  --color-outline-variant:             #434655;
  --color-inverse-surface:             #dce2f7;
  --color-inverse-on-surface:          #293040;

  /* ---------- Convenience aliases (semantic fg layers) ---------- */
  --fg1:       var(--color-on-surface);          /* primary text */
  --fg2:       var(--color-on-surface-variant);  /* secondary text */
  --fg3:       var(--color-outline);             /* tertiary / labels */
  --fg-mute:   #6a6f80;                          /* very low-emphasis */

  /* ---------- Typography: Families ---------- */
  --font-headline: "Inter", system-ui, -apple-system, sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;
  --font-label:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- Typography: Scale ---------- */
  --fs-display-2xl: clamp(4rem, 6vw, 6rem);   /* 64–96px — hero */
  --fs-display-xl:  clamp(3rem, 5vw, 4.5rem); /* 48–72px */
  --fs-display-lg:  clamp(2.5rem, 4vw, 3.5rem);
  --fs-h1:          2.5rem;   /* 40 */
  --fs-h2:          2rem;     /* 32 */
  --fs-h3:          1.5rem;   /* 24 */
  --fs-h4:          1.25rem;  /* 20 */
  --fs-body-lg:     1.125rem; /* 18 */
  --fs-body:        1rem;     /* 16 */
  --fs-body-sm:     0.875rem; /* 14 */
  --fs-label:       0.75rem;  /* 12 — uppercase tracked */
  --fs-micro:       0.625rem; /* 10 — uppercase tracked */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:    0em;
  --tracking-wide:      0.1em;
  --tracking-widest:    0.2em;
  --tracking-eyebrow:   0.3em;   /* the all-caps eyebrows */

  /* ---------- Radius ---------- */
  --radius-sm: 0.25rem;   /*  4 */
  --radius:    0.25rem;   /*  4 — Tailwind default in repo */
  --radius-md: 0.5rem;    /*  8 */
  --radius-lg: 0.75rem;   /* 12 */
  --radius-xl: 1rem;      /* 16 — cards */
  --radius-2xl: 1.25rem;  /* 20 — feature cards */
  --radius-full: 9999px;

  /* ---------- Spacing (4-base) ---------- */
  --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;

  /* ---------- Elevation / shadows ---------- */
  --shadow-card:      0 8px 30px rgb(0 0 0 / 0.12);
  --shadow-lg:        0 20px 50px rgb(0 0 0 / 0.35);
  --shadow-primary:   0 20px 50px rgb(37 99 235 / 0.15);

  /* ---------- Ambient glows (signature) ---------- */
  --glow-ambient:   0 0 40px rgb(180 197 255 / 0.06);
  --glow-card:      0 0 20px rgb(37 99 235 / 0.05);
  --glow-card-hover:0 0 30px rgb(37 99 235 / 0.15);
  --glow-secondary: 0 0 8px #4de082;
  --glow-primary:   0 0 15px #b4c5ff;

  /* ---------- Motion ---------- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        150ms;
  --dur:             200ms;
  --dur-slow:        500ms;
  --dur-very-slow:   700ms;
}

/* =====================================================================
   Base + semantic element styles
   ===================================================================== */
html, body {
  background: var(--color-background);
  color: var(--fg1);
  font-family: var(--font-body);
  font-weight: 300;             /* the site reads light by default */
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgb(180 197 255 / 0.30); }

/* --- Display + headlines ---
   Headlines are LIGHT-WEIGHT with TIGHT tracking, with key noun
   tokens bolded inline in primary color (see h1 .accent / .em). */
h1, .h1, .display {
  font-family: var(--font-headline);
  font-size: var(--fs-display-xl);
  font-weight: 200;                  /* extralight default */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-display);
  color: var(--fg1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-headline);
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  color: var(--fg1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-heading);
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}

/* When you want the bold periwinkle inflection inside a headline */
.accent  { color: var(--color-primary); font-weight: 700; }
.accent-secondary { color: var(--color-secondary); font-weight: 600; }
.italic-accent { font-style: italic; font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;                  /* the site is light-weight by default */
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--fg2);
  line-height: var(--lh-body);
}
.small { font-size: var(--fs-body-sm); color: var(--fg2); }

/* --- Eyebrows / labels ---
   The site uses ALL-CAPS, mono OR sans, very tracked, often
   prefixed with a 24px primary hairline before:content rule. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;          /* 11px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}
.label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg3);
}
.label-micro {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg3);
}

/* --- Mono / code ---
   IBM Plex Mono is used for: stat values, section numerals (§ 01),
   data-grid table content, command-line / config snippets, eyebrows. */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--fg1);
}
.mono-stat {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary);
}
.mono-stat--secondary { color: var(--color-secondary); }

/* --- Definition pattern (the “pe·rim·e·tered” lockup) --- */
.definition {
  border-left: 2px solid rgb(180 197 255 / 0.40);
  padding-left: 1.25rem;
}
.definition__term { font-weight: 600; letter-spacing: -0.01em; color: var(--fg1); }
.definition__ipa  { font-family: var(--font-mono); color: var(--color-outline); font-size: 0.75rem; }
.definition__pos  { font-style: italic; color: var(--color-secondary); font-size: 0.75rem; }