/* NUON — site layer over the NUON theme.
   styles/nuon-theme.css (loaded first) is the theme generated from Figma in
   nuon-apps (packages/nuon-theme): colours in four modes, type scale, spacing,
   radii, shadows, motion, breakpoints and fonts. Refresh it with
   `node tools/sync-theme.mjs`; never edit it here.
   This file holds only what the site adds: its tints, the blueprint panels and
   the typographic classes. */

/* The one italic the site sets; the theme ships upright faces only. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Sheen of the light panels (cards, toolbars): white → ice blue */
  --panel-sheen: linear-gradient(
    180deg,
    var(--ink-0) 0%,
    color-mix(in srgb, var(--nuon-azul) 4%, var(--ink-0)) 100%
  );
  --shadow-glow-cian: 0 0 32px -4px var(--azul-a40);

  /* Type: the theme scale (Figma text styles) under the site's names */
  --fs-display-lh: 1.04;
  --fs-display-ls: var(--ls-display);
  --fs-h1-lh: var(--lh-h1);
  --fs-h2-lh: var(--lh-h2);
  --fs-h3-lh: var(--lh-h3);
  --fs-h4-lh: var(--lh-h4);
  --fs-body-lg-lh: 1.5;
  --fs-body-lh: var(--lh-body);
  --fs-caption-lh: var(--lh-caption);
  --fs-mono: var(--fs-mono-code);
  --fs-mono-lh: 1.5;

  /* Breakpoints (--bp-xs … --bp-nav) come from the theme. Media queries do not
     accept var(), so the value goes literal in each @media and the scale is
     audited with a grep:
         grep -ho 'max-width: [0-9]*px)' *.css | grep -o '[0-9]*' | sort -n | uniq -c
     A new section uses one of the six; an exception carries its measurement
     next to the @media (today one: 800px in .consola). */

  /* ---------- Tints, washes and shadows ----------
     --<base>-a<NN> is <base> at NN % alpha. Every translucent colour the site
     paints comes from here; the stylesheets never spell one out. */
  --blueprint-line: #7ab1ff; /* lines and washes over the dark blueprint panels */
  --blueprint-grid: #1a2e6b; /* grid strokes over the dark blueprint panels */
  --blueprint-grid-pale: #d8e4f0; /* grid strokes over light panels */
  --blueprint-grid-dark: color-mix(in srgb, var(--blueprint-grid) 40%, transparent);
  --blueprint-grid-light: color-mix(in srgb, var(--blueprint-grid-pale) 60%, transparent);

  --azul-a04: color-mix(in srgb, var(--nuon-azul) 4%, transparent);
  --azul-a05: color-mix(in srgb, var(--nuon-azul) 5%, transparent);
  --azul-a06: color-mix(in srgb, var(--nuon-azul) 6%, transparent);
  --azul-a08: color-mix(in srgb, var(--nuon-azul) 8%, transparent);
  --azul-a10: color-mix(in srgb, var(--nuon-azul) 10%, transparent);
  --azul-a12: color-mix(in srgb, var(--nuon-azul) 12%, transparent);
  --azul-a14: color-mix(in srgb, var(--nuon-azul) 14%, transparent);
  --azul-a16: color-mix(in srgb, var(--nuon-azul) 16%, transparent);
  --azul-a18: color-mix(in srgb, var(--nuon-azul) 18%, transparent);
  --azul-a30: color-mix(in srgb, var(--nuon-azul) 30%, transparent);
  --azul-a40: color-mix(in srgb, var(--nuon-azul) 40%, transparent);

  --cian-a20: color-mix(in srgb, var(--nuon-cian) 20%, transparent);

  --magenta-a04: color-mix(in srgb, var(--nuon-magenta) 4%, transparent);
  --magenta-a10: color-mix(in srgb, var(--nuon-magenta) 10%, transparent);
  --magenta-a16: color-mix(in srgb, var(--nuon-magenta) 16%, transparent);

  --success-a12: color-mix(in srgb, var(--success) 12%, transparent);
  --success-a18: color-mix(in srgb, var(--success) 18%, transparent);

  --white-a18: color-mix(in srgb, var(--ink-0) 18%, transparent);
  --white-a25: color-mix(in srgb, var(--ink-0) 25%, transparent);
  --white-a55: color-mix(in srgb, var(--ink-0) 55%, transparent);
  --white-a60: color-mix(in srgb, var(--ink-0) 60%, transparent);
  --white-a65: color-mix(in srgb, var(--ink-0) 65%, transparent);
  --white-a70: color-mix(in srgb, var(--ink-0) 70%, transparent);
  --white-a78: color-mix(in srgb, var(--ink-0) 78%, transparent);
  --white-a85: color-mix(in srgb, var(--ink-0) 85%, transparent);
  --white-a92: color-mix(in srgb, var(--ink-0) 92%, transparent);
  --white-a94: color-mix(in srgb, var(--ink-0) 94%, transparent);

  --black-a25: color-mix(in srgb, black 25%, transparent);

  --ink-900-a04: color-mix(in srgb, var(--ink-900) 4%, transparent);
  --ink-900-a12: color-mix(in srgb, var(--ink-900) 12%, transparent);
  --ink-900-a25: color-mix(in srgb, var(--ink-900) 25%, transparent);
  --ink-900-a30: color-mix(in srgb, var(--ink-900) 30%, transparent);
  --ink-900-a40: color-mix(in srgb, var(--ink-900) 40%, transparent);
  --ink-900-a50: color-mix(in srgb, var(--ink-900) 50%, transparent);
  --ink-900-a60: color-mix(in srgb, var(--ink-900) 60%, transparent);

  --ink-200-a40: color-mix(in srgb, var(--ink-200) 40%, transparent);
  --ink-200-a45: color-mix(in srgb, var(--ink-200) 45%, transparent);
  --ink-200-a60: color-mix(in srgb, var(--ink-200) 60%, transparent);
  --ink-200-a65: color-mix(in srgb, var(--ink-200) 65%, transparent);
  --ink-200-a70: color-mix(in srgb, var(--ink-200) 70%, transparent);

  --blueprint-line-a06: color-mix(in srgb, var(--blueprint-line) 6%, transparent);
  --blueprint-line-a07: color-mix(in srgb, var(--blueprint-line) 7%, transparent);
  --blueprint-line-a08: color-mix(in srgb, var(--blueprint-line) 8%, transparent);
  --blueprint-line-a10: color-mix(in srgb, var(--blueprint-line) 10%, transparent);
  --blueprint-line-a12: color-mix(in srgb, var(--blueprint-line) 12%, transparent);
  --blueprint-line-a14: color-mix(in srgb, var(--blueprint-line) 14%, transparent);
  --blueprint-line-a18: color-mix(in srgb, var(--blueprint-line) 18%, transparent);
  --blueprint-line-a20: color-mix(in srgb, var(--blueprint-line) 20%, transparent);
  --blueprint-line-a25: color-mix(in srgb, var(--blueprint-line) 25%, transparent);

  --blueprint-grid-a40: color-mix(in srgb, var(--blueprint-grid) 40%, transparent);
  --blueprint-grid-a45: color-mix(in srgb, var(--blueprint-grid) 45%, transparent);
  --blueprint-grid-a50: color-mix(in srgb, var(--blueprint-grid) 50%, transparent);

  --blueprint-grid-pale-a22: color-mix(in srgb, var(--blueprint-grid-pale) 22%, transparent);
  --blueprint-grid-pale-a55: color-mix(in srgb, var(--blueprint-grid-pale) 55%, transparent);
}

/* ---------- Blueprint background utilities ---------- */
.bp-grid-dark {
  background-color: var(--blueprint-dark);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 50%, var(--blueprint-line-a08), transparent 70%),
    linear-gradient(var(--blueprint-grid-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-dark) 1px, transparent 1px);
  background-size:
    100% 100%,
    var(--blueprint-grid-step) var(--blueprint-grid-step),
    var(--blueprint-grid-step) var(--blueprint-grid-step);
}

.bp-grid-light {
  background-color: var(--ink-0);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 50%, var(--azul-a04), transparent 70%),
    linear-gradient(var(--blueprint-grid-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid-light) 1px, transparent 1px);
  background-size:
    100% 100%,
    var(--blueprint-grid-step) var(--blueprint-grid-step),
    var(--blueprint-grid-step) var(--blueprint-grid-step);
}

/* ---------- Semantic typographic styles ---------- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--fs-display-lh);
  letter-spacing: var(--fs-display-ls);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--fs-h1-lh);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--fs-h2-lh);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--fs-h3-lh);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--fs-h4-lh);
  color: var(--fg-1);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--fs-body-lg-lh);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--fs-body-lh);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--fs-caption-lh);
  color: var(--fg-3);
}

.t-overline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-overline);
  letter-spacing: var(--fs-overline-ls);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-mono);
  line-height: var(--fs-mono-lh);
  color: var(--brand-mono-label);
  letter-spacing: var(--ls-mono);
}
.t-mono-meta {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-overline);
  color: var(--fg-3);
  letter-spacing: var(--ls-mono);
}

/* Gradient text */
.t-gradient {
  background: var(--nuon-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mono brackets — [ thing ] */
.t-mono-bracket::before {
  content: "[ ";
  opacity: 0.7;
}
.t-mono-bracket::after {
  content: " ]";
  opacity: 0.7;
}