/* =========================================================
   Tossit — Colors & Type
   ---------------------------------------------------------
   Premium, restrained, white-glove. Charcoal + cream + one
   strong red accent. Aktiv Grotesk for confident headlines
   and UI; Perfectly Nineties for lighter, trust-building
   editorial moments.
   ========================================================= */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-XBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("fonts/AktivGrotesk-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Extralight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Perfectly Nineties";
  src: url("fonts/PerfectlyNineties-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Brand palette (raw) */
  --tossit-charcoal: #1A0B08;   /* near-black, warm undertone */
  --tossit-red:      #243349;   /* the one accent — navy from the design system */
  --tossit-cream:    #F2EDE3;   /* tan / off-white page */
  --tossit-gray:     #D4D4D4;   /* neutral light gray */
  --tossit-white:    #FFFFFF;

  /* Extended neutrals (derived, used for hierarchy) */
  --tossit-charcoal-90: #2B1C18;
  --tossit-charcoal-70: #4A3C38;
  --tossit-charcoal-50: #756863;
  --tossit-charcoal-30: #A8A09C;
  --tossit-cream-dark:  #E6DFD0;  /* hairline / divider on cream */
  --tossit-cream-deep:  #EDEAE4;  /* warm gray surface */
  --tossit-red-dark:    #1A2535;  /* hover/pressed accent */
  --tossit-red-tint:    #E4E8EE;  /* very faint accent wash */

  /* Semantic — surfaces */
  --bg-page:        var(--tossit-cream);
  --bg-page-alt:    var(--tossit-white);
  --bg-inverse:     var(--tossit-charcoal);
  --bg-card:        var(--tossit-white);
  --bg-muted:       var(--tossit-cream-dark);
  --bg-accent:      var(--tossit-red);

  /* Semantic — foreground */
  --fg1: var(--tossit-charcoal);          /* primary text */
  --fg2: var(--tossit-charcoal-70);       /* secondary text */
  --fg3: var(--tossit-charcoal-50);       /* tertiary / labels */
  --fg-on-dark:    var(--tossit-cream);
  --fg-on-accent:  var(--tossit-white);
  --fg-accent:     var(--tossit-red);

  /* Borders */
  --border-1: var(--tossit-cream-dark);   /* default hairline on cream */
  --border-2: var(--tossit-charcoal-30);  /* a little stronger */
  --border-strong: var(--tossit-charcoal);
  --border-on-dark: rgba(242, 237, 227, 0.18);

  /* Status */
  --status-success: #2F7A55;
  --status-warning: #C18B2A;
  --status-danger:  var(--tossit-red);
  --status-info:    var(--tossit-charcoal);

  /* Type families */
  --font-sans:    "Aktiv Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Perfectly Nineties", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (display in serif/sans handled per role) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  60px;
  --fs-5xl:  84px;
  --fs-6xl: 120px;

  /* Line heights */
  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  /* Letter spacing — eyebrows/labels are uppercase tracked */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;

  /* Spacing — 4pt base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — sharp by default. Soft only for chips/inputs. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* Shadows — quiet, warm. Premium, not floaty. */
  --shadow-1: 0 1px 0 rgba(26, 11, 8, 0.04), 0 1px 2px rgba(26, 11, 8, 0.04);
  --shadow-2: 0 1px 2px rgba(26, 11, 8, 0.04), 0 8px 24px -8px rgba(26, 11, 8, 0.10);
  --shadow-3: 0 2px 4px rgba(26, 11, 8, 0.06), 0 24px 48px -16px rgba(26, 11, 8, 0.16);
  --shadow-inset: inset 0 0 0 1px var(--border-1);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 24px;
}

/* ---------- Base elements ---------- */

html, body {
  background: var(--bg-page);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display (giant marketing) — sans, very tight */
.display, h1.display {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

/* Editorial display — serif, light, italic accents */
.display-serif {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-5xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-snug);
}
.display-serif em, .display-serif .italic {
  font-style: italic;
  font-weight: 300;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.18;
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.25;
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.35;
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg1);
  margin: 0;
}
.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
.body-sm {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg2);
}

/* Editorial / quote */
.lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-xl);
  line-height: 1.45;
  color: var(--fg1);
}
.quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.3;
  color: var(--fg1);
}

/* Eyebrow / label — uppercase tracked sans */
.eyebrow, .label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}

/* UI text */
.ui {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.2;
  letter-spacing: 0;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Links */
a {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-accent); }

::selection { background: var(--tossit-red); color: var(--tossit-white); }