/* =============================================================
   Aeberli Digital — Design Tokens
   Colors + Typography + Base semantic styles
   ============================================================= */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "TT Interfaces";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/TTInterfaces-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "TT Interfaces";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/TTInterfaces-Light.woff2") format("woff2");
}
@font-face {
  font-family: "TT Interfaces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/TTInterfaces-Bold.woff2") format("woff2"),
       url("fonts/TTInterfaces-Bold.woff") format("woff");
}

@font-face {
  font-family: "Capitolium News";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Capitolium-News-Italic.woff") format("woff");
}
@font-face {
  font-family: "Capitolium News";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Capitolium-News-Bold-Italic.woff") format("woff");
}

/* ---------- TOKENS ---------- */
:root {
  /* Brand colors */
  --ad-red: #da291c;            /* primary accent — the dot, eyebrows, the mark */
  --ad-red-deep: #b81f14;       /* hover/pressed state for red */
  --ad-anthrazit: #333f48;      /* dark surface, body color on light bg */
  --ad-anthrazit-deep: #1f262c; /* even darker, for closing banners */
  --ad-blue: #0078d4;           /* Microsoft accent — Copilot/M365 only */
  --ad-blue-soft: rgba(0,120,212,.07);

  /* Surfaces */
  --ad-paper: #f5f3ee;          /* page background, warm off-white */
  --ad-paper-2: #efece4;        /* slightly deeper warm tint */
  --ad-surface: #ffffff;        /* cards, info panels */
  --ad-border: #e3dfd6;         /* hairline rule, separators */
  --ad-border-strong: #c9c3b3;  /* stronger rule */

  /* Text */
  --ad-fg: #1a1a1a;             /* primary text */
  --ad-fg-2: #333f48;           /* secondary, anthrazit */
  --ad-muted: #666666;          /* lead text, support copy */
  --ad-subtle: #bbbbbb;         /* tertiary, scroll hints */
  --ad-on-dark: #ffffff;
  --ad-on-dark-muted: rgba(255,255,255,.55);
  --ad-on-dark-subtle: rgba(255,255,255,.4);

  /* Typography stacks */
  --ad-sans: "TT Interfaces", "Helvetica Neue", Arial, sans-serif;
  --ad-serif-italic: "Capitolium News", "DM Serif Display", Georgia, "Times New Roman", serif;

  /* Type scale (fluid, anchored to a 16px root) */
  --ad-text-xs:   .68rem;   /* eyebrows, tags */
  --ad-text-sm:   .82rem;   /* small UI, format-card body */
  --ad-text-base: 1rem;     /* body */
  --ad-text-md:   1.1rem;   /* large lead */
  --ad-text-lg:   clamp(1.6rem, 2.4vw, 2rem);   /* h3 */
  --ad-text-xl:   clamp(1.8rem, 3.5vw, 3.2rem); /* h2, section heads */
  --ad-text-2xl:  clamp(3rem, 7vw, 6.5rem);     /* h1, hero */

  /* Tracking */
  --ad-track-tight: -.035em;   /* hero */
  --ad-track-snug:  -.025em;   /* h2 */
  --ad-track-base:  0;
  --ad-track-eyebrow: .14em;   /* uppercase eyebrows */
  --ad-track-mini:    .06em;   /* small caps labels */

  /* Spacing scale (4px base) */
  --ad-space-1:  .25rem;
  --ad-space-2:  .5rem;
  --ad-space-3:  .75rem;
  --ad-space-4:  1rem;
  --ad-space-5:  1.5rem;
  --ad-space-6:  2rem;
  --ad-space-7:  3rem;
  --ad-space-8:  4rem;
  --ad-space-9:  6rem;
  --ad-space-10: 8rem;

  /* Layout */
  --ad-wrap: 1240px;
  --ad-wrap-pad: clamp(1.5rem, 5vw, 4rem);
  --ad-section-pad: clamp(5rem, 9vw, 8rem);
  --ad-grid-cell: 60px; /* the page-bg grid */

  /* Radii — Aeberli is mostly square. Rare soft radii on dots and pills. */
  --ad-radius-0: 0;
  --ad-radius-1: 2px;
  --ad-radius-pill: 999px;

  /* Borders */
  --ad-bw: 1px;             /* hairline */
  --ad-bw-accent: 3px;      /* left-accent stripe on info cards */
  --ad-bw-button: 1.5px;    /* button outlines */
  --ad-bar: 4px;            /* top accent bar */

  /* Shadows — restrained; Aeberli reads more "editorial print" than glossy */
  --ad-shadow-sm: 0 1px 2px rgba(26,26,26,.04);
  --ad-shadow-md: 0 4px 14px rgba(26,26,26,.06);
  --ad-shadow-lg: 0 18px 40px rgba(26,26,26,.10);

  /* Motion */
  --ad-ease: cubic-bezier(.22, .61, .36, 1);
  --ad-dur-fast: 150ms;
  --ad-dur:      250ms;
  --ad-dur-slow: 450ms;
}

/* ---------- BASE / SEMANTIC STYLES ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ad-sans);
  font-weight: 300;
  font-size: var(--ad-text-base);
  line-height: 1.6;
  color: var(--ad-fg);
  background: var(--ad-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--ad-fg); letter-spacing: var(--ad-track-snug); line-height: 1.05; }
h1 { font-size: var(--ad-text-2xl); line-height: .93; letter-spacing: var(--ad-track-tight); }
h2 { font-size: var(--ad-text-xl); }
h3 { font-size: var(--ad-text-lg); letter-spacing: -.01em; }
h4 { font-size: var(--ad-text-base); }
h5 { font-size: var(--ad-text-sm); text-transform: uppercase; letter-spacing: var(--ad-track-mini); font-weight: 600; }

/* Italic serif accent — used inside headings as the brand voice flourish */
h1 em, h2 em, h3 em, .ad-italic {
  font-family: var(--ad-serif-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--ad-red);
}
/* Microsoft-themed pages override accent to blue */
.ad-blue-accent h1 em,
.ad-blue-accent h2 em,
.ad-blue-accent h3 em { color: var(--ad-blue); }

p { margin: 0 0 1rem; }
a { color: var(--ad-fg); text-decoration: none; transition: color var(--ad-dur) var(--ad-ease); }
/* :where() drops the global hover specificity so button classes (.am-btn-red,
   .uu-btn-red, etc.) can keep their own text color on hover without each
   page redeclaring it. */
:where(a):hover { color: var(--ad-red); }

small, .ad-small { font-size: var(--ad-text-sm); color: var(--ad-muted); }

/* Eyebrow — the brand's signature label pattern */
.ad-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--ad-text-xs);
  font-weight: 500;
  letter-spacing: var(--ad-track-eyebrow);
  text-transform: uppercase;
  color: var(--ad-red);
  margin-bottom: 1.5rem;
}
.ad-eyebrow::before {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  flex: 0 0 20px;
}

/* Page chrome */
.ad-accent-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--ad-bar); background: var(--ad-red); z-index: 100; }
.ad-page-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: var(--ad-grid-cell) var(--ad-grid-cell);
}

::selection { background: var(--ad-red); color: #fff; }