/* =====================================================================
   tokens.css — the Aperture / Unbuild Lab design tokens, vendored.

   Copied verbatim from
   prototype/_ds/aperture-design-system-b07dad06-3d8a-4f77-818a-62332e5c0291/colors_and_type.css
   with two changes, both about making the page deployable without the
   prototype:

     1. Font files point at vendor/fonts/ rather than the design-system
        folder, so publishing the page alone does not strip it of every
        colour, size and spacing value it has.
     2. Inter is self-hosted (fonts-inter.css) instead of @import-ed from
        Google Fonts. That import was render-blocking and needed a network —
        on a page whose icons are already vendored for exactly that reason.

   If the design system changes upstream, re-copy the :root block below.
   ===================================================================== */

@import url("fonts-inter.css");

@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:100; src:url("../vendor/fonts/JetBrainsMono-Thin.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:100; src:url("../vendor/fonts/JetBrainsMono-ThinItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:200; src:url("../vendor/fonts/JetBrainsMono-ExtraLight.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:200; src:url("../vendor/fonts/JetBrainsMono-ExtraLightItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:300; src:url("../vendor/fonts/JetBrainsMono-Light.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:300; src:url("../vendor/fonts/JetBrainsMono-LightItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; src:url("../vendor/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:400; src:url("../vendor/fonts/JetBrainsMono-Italic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; src:url("../vendor/fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:500; src:url("../vendor/fonts/JetBrainsMono-MediumItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:600; src:url("../vendor/fonts/JetBrainsMono-SemiBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:600; src:url("../vendor/fonts/JetBrainsMono-SemiBoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:700; src:url("../vendor/fonts/JetBrainsMono-Bold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:700; src:url("../vendor/fonts/JetBrainsMono-BoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:800; src:url("../vendor/fonts/JetBrainsMono-ExtraBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:800; src:url("../vendor/fonts/JetBrainsMono-ExtraBoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono NL"; font-style:normal; font-weight:400; src:url("../vendor/fonts/JetBrainsMonoNL-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono NL"; font-style:italic; font-weight:400; src:url("../vendor/fonts/JetBrainsMonoNL-Italic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono NL"; font-style:normal; font-weight:500; src:url("../vendor/fonts/JetBrainsMonoNL-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"JetBrains Mono NL"; font-style:normal; font-weight:700; src:url("../vendor/fonts/JetBrainsMonoNL-Bold.ttf") format("truetype"); font-display:swap; }

:root {
  /* ---------- Neutrals · Ink ---------- */
  --ink-950: #0A0A0B;
  --ink-900: #1C1C1E;
  --ink-800: #2C2C2E;
  --ink-700: #3A3A3C;
  --ink-600: #48484A;
  --ink-500: #636366;
  --ink-400: #8E8E93;
  --ink-300: #AEAEB2;
  --ink-200: #C7C7CC;
  --ink-100: #D1D1D6;
  --ink-75:  #E5E5EA;
  --ink-50:  #F2F2F7;
  --ink-25:  #F9F9FB;
  --ink-0:   #FFFFFF;

  /* ---------- Accent · Teal (main = #0B7A6F) ----------
     Variable names kept as --blue-* for continuity; semantically "accent".
     ----------------------------------------------------- */
  --blue-700: #053E38;
  --blue-600: #074F47;
  --blue-500: #0B7A6F;
  --blue-400: #2CA89D;
  --blue-300: #7DD3CC;
  --blue-100: #CFEEE9;
  --blue-50:  #E6F5F2;

  /* ---------- Semantic ---------- */
  --success: #34C759;
  --warning: #FF9F0A;
  --danger:  #FF3B30;
  --success-ink: #1F7A3A;
  --warning-ink: #8C5207;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ink-950);   /* primary text */
  --fg-2: var(--ink-500);   /* secondary text */
  --fg-3: var(--ink-400);   /* tertiary / metadata */
  --fg-mute: var(--ink-300);
  --fg-accent: var(--blue-500);
  --fg-on-accent: var(--ink-0);

  --bg-1: var(--ink-0);     /* canvas */
  --bg-2: var(--ink-25);    /* subtle surface */
  --bg-3: var(--ink-50);    /* inset / stage */
  --border: var(--ink-75);
  --border-strong: var(--ink-100);

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.10);
  --shadow-3: 0 16px 36px rgba(0,0,0,0.14);

  /* ---------- Spacing · 4pt ladder ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---------- Motion ---------- */
  --dur-instant:    100ms;
  --dur-fast:       180ms;
  --dur-standard:   240ms;
  --dur-deliberate: 360ms;
  --dur-ceremony:   520ms;
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:     cubic-bezier(0, 0, 0, 1);
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Type families ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-mono-nl: "JetBrains Mono NL", "JetBrains Mono", "SF Mono", Menlo, monospace;
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.011em;
}

/* =====================================================================
   Type Scale
   ===================================================================== */
.t-display-1 { font-size: 64px; font-weight: 600; letter-spacing: -0.035em; line-height: 1;    }
.t-display-2 { font-size: 48px; font-weight: 600; letter-spacing: -0.03em;  line-height: 1.05; }
.t-headline  { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;  }
.t-title     { font-size: 22px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2;  }
.t-body-lg   { font-size: 17px; font-weight: 400; letter-spacing: -0.01em;  line-height: 1.45; }
.t-body      { font-size: 15px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.5;  }
.t-caption   { font-size: 12px; font-weight: 500; letter-spacing: 0;        line-height: 1.4;  color: var(--fg-2); }
.t-micro     { font-size: 10px; font-weight: 500; letter-spacing: 0.08em;   line-height: 1.4;  text-transform: uppercase; color: var(--fg-3); }
.t-mono      { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Semantic element defaults — use directly via h1/h2/p/code */
h1 { font-size: 64px; font-weight: 600; letter-spacing: -0.035em; line-height: 1;    }
h2 { font-size: 48px; font-weight: 600; letter-spacing: -0.03em;  line-height: 1.05; }
h3 { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;  }
h4 { font-size: 22px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2;  }
h5 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em;  line-height: 1.3;  }
p  { font-size: 15px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.5;  }
small { font-size: 12px; color: var(--fg-2); }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.85em;
}

/* Eyebrow / section label */
.t-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-accent);
  font-weight: 500;
}