/* =============================================================
   Ångström Designs — Foundations
   Tokens for color + type. Import this once at the top of any
   prototype, slide deck, or production stylesheet.
   ============================================================= */

/* Brand fonts — local Montserrat TTFs.
   Variable file is the primary source (full 100–900 axis). Static-weight
   fallbacks are included only for the subset of files committed to the repo;
   renderers without variable-font support will fall back to the nearest weight. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.4d444017fdf9.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.1cd1b7e6ec79.ttf") format("truetype-variations"),
       url("../fonts/Montserrat-Italic.ba6062606d5a.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- static fallbacks (normal — only files present in repo) --- */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ExtraLight.985b2147a6b9.ttf")  format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.9d496514aedf.ttf")      format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

/* --- static fallbacks (italic — only files present in repo) --- */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ThinItalic.8a84aafae4cb.ttf")      format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic.ba6062606d5a.ttf")          format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-MediumItalic.426a2f39048d.ttf")    format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBoldItalic.7e5c023c68d9.ttf")  format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand palette (PowerPoint theme map) ---------- */
  --ang-dark-1:   #000000;   /* primary text                  */
  --ang-light-1:  #FFFFFF;   /* primary background            */
  --ang-dark-2:   #444655;   /* dark neutral / secondary text */
  --ang-light-2:  #DCE6FB;   /* light blue wash               */

  --ang-accent-1: #1B72F1;   /* primary blue (brand)          */
  --ang-accent-2: #CC2200;   /* alert / destructive red       */
  --ang-accent-3: #0A4AAD;   /* navy blue / pressed blue      */
  --ang-accent-4: #A8AABC;   /* light neutral / muted text    */
  --ang-accent-5: #6AAAFF;   /* light blue tint               */
  --ang-accent-6: #F2F4F8;   /* off-white blue surface        */

  --ang-link:          #1B72F1;
  --ang-link-visited:  #0A4AAD;

  /* ---------- Semantic foreground / surface ---------- */
  --fg-1: var(--ang-dark-1);     /* primary text */
  --fg-2: var(--ang-dark-2);     /* secondary text */
  --fg-3: var(--ang-accent-4);   /* muted / placeholder */
  --fg-on-brand: var(--ang-light-1);

  --bg-1: var(--ang-light-1);    /* page surface */
  --bg-2: var(--ang-accent-6);   /* subdued surface */
  --bg-3: var(--ang-light-2);    /* tinted surface */
  --bg-brand: var(--ang-accent-1);

  --border-1: #E5E7EE;           /* hairline */
  --border-2: #CFD3DE;           /* heavier divider */
  --border-strong: var(--ang-dark-2);

  /* ---------- Semantic states ---------- */
  --state-info:    var(--ang-accent-1);
  --state-success: #1F8A5B;
  --state-warning: #C58A00;
  --state-danger:  var(--ang-accent-2);

  /* ---------- Type stack ---------- */
  --font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* ---------- Type scale (1.250 / major third) ---------- */
  --fs-12: 0.75rem;     /* 12 — micro / eyebrow */
  --fs-14: 0.875rem;    /* 14 — small / caption */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — lede */
  --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.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;   /* small caps eyebrows */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(10, 14, 30, 0.06),
              0 1px 1px rgba(10, 14, 30, 0.04);
  --shadow-2: 0 4px 12px rgba(10, 14, 30, 0.08),
              0 1px 2px rgba(10, 14, 30, 0.04);
  --shadow-3: 0 12px 28px rgba(10, 14, 30, 0.12),
              0 4px 8px rgba(10, 14, 30, 0.06);
  --shadow-4: 0 24px 56px rgba(10, 14, 30, 0.18),
              0 8px 16px rgba(10, 14, 30, 0.08);
  --shadow-focus: 0 0 0 3px rgba(27, 114, 241, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 -1px 0 rgba(10, 14, 30, 0.06);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.5, 0, 0.75, 0);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;
  --duration-4: 480ms;
}

/* =============================================================
   Semantic element styles — drop-in defaults that apply when
   .ang or .ang-prose wraps the content.
   ============================================================= */

.ang,
.ang-prose {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  font-weight: var(--weight-regular);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

.ang h1, .ang-h1 {
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-4);
}

.ang h2, .ang-h2 {
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
}

.ang h3, .ang-h3 {
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}

.ang h4, .ang-h4 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}

.ang h5, .ang-h5 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2);
}

.ang p, .ang-p {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.ang-lede {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  font-weight: var(--weight-regular);
  text-wrap: pretty;
}

.ang-eyebrow {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--ang-accent-1);
}

.ang-display {
  font-size: var(--fs-64);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: var(--weight-bold);
}

.ang small, .ang-small {
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.ang code, .ang-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
}

.ang a, .ang-link {
  color: var(--ang-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.ang a:visited { color: var(--ang-link-visited); }
.ang a:hover   { text-decoration-thickness: 2px; }