/* ABSLI presentation design system — tokens.
   Brand values come from official sources (see ASSETS.md). Everything else derives from them. */

@font-face { font-family: "Anek Latin"; src: url(../assets/fonts/AnekLatin-Light.woff2) format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Anek Latin"; src: url(../assets/fonts/AnekLatin-Regular.woff2) format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Anek Latin"; src: url(../assets/fonts/AnekLatin-Medium.woff2) format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Anek Latin"; src: url(../assets/fonts/AnekLatin-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Anek Latin"; src: url(../assets/fonts/AnekLatin-Bold.woff2) format("woff2"); font-weight: 700; font-display: block; }

:root {
  /* Brand — official */
  --brand-primary: #C91429;      /* ABSLI --primary / wordmark red */
  --brand-red-deep: #8B151B;     /* site hover maroon */
  --brand-maroon: #660D0A;       /* site dark maroon */
  --brand-gold: #F7A600;         /* lockup rule (site amber #F7A500) */
  --brand-orange: #F15C2E;       /* sun-mark orange */
  --brand-cream: #FFF4D9;        /* ABSLI --brand-color-alt */
  --brand-blush: #FDF7F7;        /* site pink-tint surface */

  /* Surfaces & text (warm neutrals that sit beside the red) */
  --surface: #FFFFFF;
  --surface-warm: #FBF8F4;
  --surface-alt: #F3EEE8;
  --surface-ink: #1A1213;        /* near-black with a red undertone, for dark moments */
  --text-primary: #1F1718;
  --text-secondary: #5E5455;
  --text-tertiary: #8E8486;
  --text-on-brand: #FFFFFF;
  --line: #E6DFD9;
  --line-strong: #CFC5BE;

  /* States (workflow) */
  --state-done: var(--brand-primary);
  --state-live: var(--brand-gold);
  --state-next: var(--line-strong);

  /* Type — 1920×1080 stage units (px) */
  --font: "Anek Latin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-display: 96px;
  --fs-h1: 68px;
  --fs-h2: 60px;
  --fs-h3: 34px;
  --fs-body-lg: 32px;
  --fs-body: 26px;
  --fs-label: 18px;
  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.4;
  --track-label: 0.16em;
  --track-display: -0.02em;

  /* Space — 8px base */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px;
  --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 160px;
  --margin-x: 128px;
  --margin-y: 96px;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 28px;
  --border: 1.5px solid var(--line);
  --shadow-1: 0 1px 2px rgb(31 23 24 / .06), 0 4px 12px rgb(31 23 24 / .05);
  --shadow-2: 0 2px 6px rgb(31 23 24 / .06), 0 24px 48px -12px rgb(31 23 24 / .16);
  --shadow-phone: 0 40px 80px -24px rgb(31 23 24 / .35), 0 0 0 1px rgb(31 23 24 / .08);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --dur-xs: 180ms;
  --dur-s: 360ms;
  --dur-m: 640ms;
  --dur-l: 1100ms;
  --stagger: 90ms;
}