/* Antimetal Design Tokens — distilled, self-contained.
   For the full product authoritative file, see styles/colors.css. */

@font-face {
  font-family: "ABCDiatypePlusVariable";
  src: url("fonts/ABCDiatypePlusVariable-Regular.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: "ABCDiatypePlusVariableMono";
  src: url("fonts/ABCDiatypePlusVariable-Regular.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-variation-settings: "MONO" 1;
  font-display: swap;
}
@font-face {
  font-family: "IvarDisplay";
  src: url("fonts/IvarDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IvarDisplay";
  src: url("fonts/IvarDisplay-SemiBold.otf") format("opentype");
  font-weight: 600;
}
@font-face {
  font-family: "IvarDisplay";
  src: url("fonts/IvarDisplay-Bold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "IvarHeadline";
  src: url("fonts/IvarHeadline-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "IvarHeadline";
  src: url("fonts/IvarHeadline-SemiBold.otf") format("opentype");
  font-weight: 600;
}
@font-face {
  font-family: "AntimetalLogo";
  src: url("fonts/DBCoAntimetalLogoVF.ttf") format("truetype-variations");
  font-weight: 100 900;
}

:root {
  /* ==== Aether brand documentation palette ==== */
  --aether-ink: #090703;          /* near-black doc bg */
  --aether-gold: #ab8f5c;         /* section heading gold */
  --aether-cream: #faf4dd;        /* doc body cream */
  --aether-text: #040711;         /* deep cool text */

  /* ==== Aether 3-step palette (R/Y/G/B/V + Signal) ==== */
  --signal: #dbfe01;              /* Aether signal (bright) */
  --signal-label: #dbef01;        /* White-label signal */

  /* ==== raw color scale (light) ==== */
  --bg-1: #ffffff;
  --bg-2: #fafafa;
  --bg-sidebar: #f6f6f6;

  --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #eff0f0;
  --gray-4: #e7e8e8; --gray-5: #e0e1e1; --gray-6: #d8d9d9;
  --gray-7: #cdcece; --gray-8: #babbbb; --gray-9: #8c8d8d;
  --gray-10: #828383; --gray-11: #636464; --gray-12: #1f2020;

  --signal-9: #dbef00; --signal-10: #d1e410; --signal-11: #717c00; --signal-12: #3b3f1d;
  --signal-3: #f1fac7; --signal-4: #e8f4a8; --signal-5: #ddec8c; --signal-8: #a8b642;

  --green-3: #e6f7e9; --green-9: #038f43; --green-11: #008237; --green-12: #1b3c24;
  --yellow-3: #fff1c1; --yellow-9: #ffc100; --yellow-11: #a06c00; --yellow-12: #48381c;
  --red-3: #ffeae6; --red-9: #e52818; --red-11: #da1606; --red-12: #631f16;
  --violet-3: #f2efff; --violet-9: #8d5cf8; --violet-11: #7141ce; --violet-12: #381d6c;
  --blue-3: #eaf2ff; --blue-9: #015ffe; --blue-11: #0859e8; --blue-12: #0d2d6a;

  --controls-primary: #035dfe;
  --controls-border: #0a3ec6;
  --controls-shade: #0f3dc0;
  --controls-foreground: #ffffff;
  --controls-destructive: #e62818;

  /* ==== semantic slots ==== */
  --fg-1: var(--gray-12);
  --fg-2: var(--gray-11);
  --fg-3: var(--gray-9);
  --fg-onInvert: var(--bg-1);
  --border-default: var(--gray-6);
  --border-subtle: rgba(0,0,0,0.08);
  --focus-ring: var(--blue-9);

  /* ==== fonts ==== */
  --font-sans: "ABCDiatypePlusVariable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "ABCDiatypePlusVariableMono", ui-monospace, Menlo, monospace;
  --font-serif-display: "IvarDisplay", "Fraunces", Georgia, serif;
  --font-serif-headline: "IvarHeadline", "Newsreader", Georgia, serif;
  --font-logo: "AntimetalLogo", var(--font-sans);

  /* ==== diatype-specific weight remap ==== */
  --fw-normal: 300;
  --fw-medium: 400;
  --fw-semibold: 500;
  --fw-bold: 600;
  --fw-black: 800;

  /* ==== type scale ==== */
  --text-title-1: 28px;    --lh-title-1: 36px;
  --text-title-2: 20px;    --lh-title-2: 28px;
  --text-title-3: 16px;    --lh-title-3: 20px;
  --text-title-4: 14px;    --lh-title-4: 20px;
  --text-body-1: 16px;     --lh-body-1: 1.8;
  --text-body-2: 14px;     --lh-body-2: 22px;
  --text-body-3: 12px;     --lh-body-3: 18px;
  --text-label-1: 16px;    --lh-label-1: 22px;
  --text-label-2: 14px;    --lh-label-2: 20px;
  --text-label-3: 12px;    --lh-label-3: 18px;

  /* ==== radii ==== */
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 8px; --radius-xl: 10px;

  /* ==== elevation (hairline-first) ==== */
  --shadow-border: 0 0 0 1px rgba(0,0,0,0.08);
  --shadow-sm: var(--shadow-border), 0 2px 2px rgba(0,0,0,0.04);
  --shadow-md: var(--shadow-border), 0 2px 2px rgba(0,0,0,0.04), 0 8px 8px -8px rgba(0,0,0,0.04);
  --shadow-menu: var(--shadow-border), 0 1px 1px rgba(0,0,0,0.02), 0 4px 8px -4px rgba(0,0,0,0.04), 0 16px 24px -8px rgba(0,0,0,0.06);
  --shadow-modal: var(--shadow-border), 0 4px 8px -2px rgba(0,0,0,0.04);

  /* ==== motion ==== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tight: cubic-bezier(0.87, 0, 0.13, 1);
  --dur-fast: 150ms;
}

.dark, [data-theme="dark"] {
  --bg-1: #212121; --bg-2: #000; --bg-sidebar: #2c2c2c;
  --gray-1: #292929; --gray-2: #292929; --gray-3: #303131; --gray-4: #3a3a3a;
  --gray-5: #474848; --gray-6: #606060; --gray-7: #6e6f6f; --gray-8: #7b7c7c;
  --gray-9: #b3b4b4; --gray-10: #eee; --gray-11: #eee; --gray-12: #eee;
  --fg-1: #eee; --fg-2: #b3b4b4; --fg-3: #7b7c7c;
  --border-default: #474848; --border-subtle: rgba(255,255,255,0.10);
  --green-9: #038f43; --red-9: #e52818; --yellow-9: #fea104; --blue-9: #0184fe; --violet-9: #8d5cf8;
}

/* ==== semantic element defaults ==== */
html, body { font-family: var(--font-sans); font-weight: var(--fw-normal); color: var(--fg-1); background: var(--bg-1); }

h1, .h1 { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--text-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-medium); }
h3, .h3 { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: var(--fw-medium); }
h4, .h4 { font-size: var(--text-title-4); line-height: var(--lh-title-4); font-weight: var(--fw-medium); }

p, .body { font-size: var(--text-body-2); line-height: var(--lh-body-2); font-weight: var(--fw-normal); color: var(--fg-1); }
.body-lg { font-size: var(--text-body-1); line-height: var(--lh-body-1); }
.body-sm { font-size: var(--text-body-3); line-height: var(--lh-body-3); }
.label { font-size: var(--text-label-2); line-height: var(--lh-label-2); font-weight: var(--fw-medium); }
.caption { font-size: var(--text-label-3); line-height: var(--lh-label-3); color: var(--fg-2); }

code, .mono { font-family: var(--font-mono); font-size: 13px; font-variation-settings: "MONO" 1; }

strong { font-weight: var(--fw-medium); } /* diatype medium reads as bold */
em { font-style: oblique 10deg; } /* diatype has no italic */

.display { font-family: var(--font-serif-display); font-weight: 400; letter-spacing: -0.02em; }
.headline { font-family: var(--font-serif-headline); font-weight: 400; }

.eyebrow { font-size: 11px; line-height: 14px; font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-2); }