/* ============================================================
   ADAAS Design System — Colors & Type
   Source of truth: CSS custom properties used across the kit.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Albert Sans";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-Thin.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-ExtraLight.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/AlbertSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/AlbertSans-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/AlbertSans-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Albert Sans";
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/AlbertSans-BlackItalic.ttf") format("truetype");
}

:root {
  /* ---------- Color: Brand ---------- */
  --adaas-red:        rgb(216, 54, 45);   /* Primary brand red — used for emphasis numbers, headlines, accents */
  --adaas-red-bright: rgb(230, 0, 0);     /* Saturated red — used in pill blocks, surfaces */
  --adaas-red-orange: rgb(245, 44, 33);   /* Slightly orange-shifted red for backgrounds & gradient stops */
  --adaas-orange:     rgb(252, 74, 3);    /* Logo gradient stop (top of "A") */
  --adaas-teal:       rgb(24, 208, 198);  /* Rare accent — used in components/illustrations only */
  --adaas-indigo:     rgb(74, 74, 138);   /* Rare secondary accent */

  /* Brand gradient (the "A" in the logo, and select fills) */
  --adaas-gradient-warm: linear-gradient(180deg, var(--adaas-orange) 0%, var(--adaas-red) 99%);

  /* ---------- Color: Neutrals ---------- */
  --ink-0:    rgb(0, 0, 0);          /* True black — light-card text */
  --ink-1:    rgb(31, 31, 31);       /* Dark surface — primary dark background */
  --ink-2:    rgb(59, 59, 59);       /* Soft dark surface */
  --ink-3:    rgb(68, 68, 68);       /* Section/wash background (Figma canvas) */
  --paper-0:  rgb(255, 255, 255);    /* Pure white surface */
  --paper-1:  rgb(245, 245, 245);    /* Off-white — primary text on dark, soft surface */
  --paper-2:  rgb(238, 238, 238);    /* Lighter wash */
  --paper-3:  rgb(232, 232, 232);    /* Subtle divider */
  --paper-4:  rgb(217, 217, 217);    /* Placeholder/grey blocks */

  /* ---------- Color: Semantic (Light theme — white card) ---------- */
  --bg:        var(--paper-0);
  --bg-muted:  var(--paper-1);
  --fg:        var(--ink-1);
  --fg-muted:  rgb(91, 100, 114);
  --fg-inverse: var(--paper-1);
  --accent:    var(--adaas-red);
  --line:      var(--ink-0);          /* Hairlines on light cards are pure black, 1px */
  --line-soft: var(--paper-3);
  --surface-alt: var(--ink-1);

  /* ---------- Type: Family ---------- */
  --font-sans: "Albert Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Albert Sans", "Inter", system-ui, sans-serif;   /* Same family, used at huge sizes */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type: Tracking ---------- */
  --track-tight:  -0.05em;   /* Display & big numbers — Figma standard */
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-caps:   0.08em;

  /* ---------- Type: Sizes (1080×1080 social card scale) ---------- */
  --fs-mega:      258px;   /* "1", "TOP", giant numerals */
  --fs-display:   78px;    /* Strong red headlines */
  --fs-h1:        64px;    /* Card titles */
  --fs-h2:        52px;    /* List item labels (Light weight) */
  --fs-h3:        48px;    /* Sub-headlines */
  --fs-lg:        40px;    /* Lead body */
  --fs-md:        32px;
  --fs-base:      24px;
  --fs-sm:        20px;
  --fs-xs:        16px;
  --fs-2xs:       14px;

  /* ---------- Spacing (the system uses a 60-padding grid on 1080 cards) ---------- */
  --pad-card:     60px;    /* Default outer padding on a 1080×1080 card */
  --pad-block:    40px;
  --gap-stack:    24px;
  --gap-row:      16px;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  20px;     /* Cards, image blocks, item rows */
  --r-lg:  32px;
  --r-pill: 100px;   /* Pill buttons, arrow chips */
  --r-circle: 9999px;

  /* ---------- Borders ---------- */
  --bw-hair: 1px;       /* Default hairline */
  --bw-bar:  2px;       /* Pill arrow strokes, list divider */
  --bw-thick: 5px;      /* Big rounded "guideposts" used in approach cards */

  /* ---------- Shadows ---------- */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-pop:  0 24px 60px rgba(216, 54, 45, 0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* Dark theme — flip semantic vars when a wrapper is dark */
[data-theme="dark"], .dark {
  --bg:         var(--ink-1);
  --bg-muted:   var(--ink-2);
  --fg:         var(--paper-1);
  --fg-muted:   rgba(245, 245, 245, 0.7);
  --fg-inverse: var(--ink-1);
  --line:       var(--paper-1);   /* Hairlines flip to off-white on dark cards */
  --line-soft:  rgba(245, 245, 245, 0.18);
  --accent:     var(--adaas-red);
}

/* ============================================================
   Semantic element styles
   ============================================================ */
html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.adaas-mega {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-mega);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--accent);
}
.adaas-mega--italic {
  font-style: italic;
  font-weight: 700;
}

h1, .adaas-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--fg);
  margin: 0;
}
h2, .adaas-h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--fg);
  margin: 0;
}
.adaas-h2--light { font-weight: 300; }

h3, .adaas-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: var(--track-tight);
  color: var(--fg);
  margin: 0;
}
.adaas-display-red {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--adaas-red);
}
p, .adaas-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h3);   /* Body on cards is large — 48px */
  line-height: 1.05;
  color: var(--fg);
  margin: 0;
}
.adaas-body-md {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.2;
  color: var(--fg);
}
.adaas-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--fg);
}
.adaas-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
code, .adaas-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ============================================================
   Signature ADAAS components (CSS class versions)
   ============================================================ */

/* The pill-arrow chip — appears in every single card.
   Either as a fixed bottom-right corner mark, an inline arrow, or
   a wide horizontal arrow connecting two ideas. */
.adaas-arrow-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--line);
}
.adaas-arrow-chip svg { display: block; }

/* Bottom-right "↗" mark — every card has one in the corner. */
.adaas-corner-mark {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  color: var(--line);
}

/* The hairline rule above the logo — bottom of every card. */
.adaas-baseline {
  position: absolute;
  left: var(--pad-card);
  right: var(--pad-card);
  bottom: 60px;
  height: 1px;
  background: currentColor;
  color: var(--line);
}

/* Hollow ROUNDED outline boxes used as "guideposts" in approach cards. */
.adaas-guidepost {
  border: 5px solid var(--paper-1);
  border-radius: var(--r-md);
}

/* The 1080 social card frame */
.adaas-card {
  position: relative;
  width: 1080px;
  height: 1080px;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  font-family: var(--font-sans);
}
.adaas-card.dark {
  background: var(--ink-1);
  color: var(--paper-1);
}