@import "tailwindcss";

@theme {
  /* ─── Colors ─────────────────────────────────────────────────────────────── */
  --color-midnight: #102022;
  --color-snow: #F3F3F3;

  /*
   * brand-blue and brand-red are GRADIENT ENDPOINTS ONLY.
   * Never use them as standalone flat colors — always via --gradient-brand.
   */
  --color-brand-blue: #5257E4;
  --color-brand-red: #F71E3E;

  /* ─── Typography: font families ──────────────────────────────────────────── */
  --font-archia: "Archia", ui-sans-serif, system-ui, sans-serif;

  /* ─── Typography: font sizes ─────────────────────────────────────────────── */
  /*
   * Tailwind's default scale (text-xs → text-9xl) covers general use.
   * These semantic aliases map to the Qumo heading hierarchy.
   */
  --text-display: 4.5rem;      /* Hero heading — desktop */
  --text-display--line-height: 1.05;
  --text-headline: 3rem;       /* Section headings (h2) */
  --text-headline--line-height: 1.1;
  --text-subheading: 1.75rem;  /* Card titles, sub-headings (h3) */
  --text-subheading--line-height: 1.2;
  --text-label: 0.75rem;       /* Uppercase labels / tags */
  --text-label--line-height: 1;

  /* ─── Typography: letter spacing ─────────────────────────────────────────── */
  /*
   * Tailwind defaults: tight (-0.025em), normal (0em), wide (0.025em),
   * wider (0.05em), widest (0.1em).
   * Brand heading style uses uppercase + medium tracking:
   */
  --tracking-heading: 0.06em;  /* Qumo uppercase headings */
  --tracking-label: 0.12em;    /* Uppercase label / tag text */

  /* ─── Typography: font weights ───────────────────────────────────────────── */
  /*
   * Tailwind defaults (font-thin → font-black) cover all weights.
   * Archia weights available: Thin (100), Light (300), Regular (400),
   * Medium (500), SemiBold (600), Bold (700).
   * No custom weight overrides needed — use font-semibold / font-bold.
   */
}

/* ─── Gradient ──────────────────────────────────────────────────────────────
 * Defined in :root (not @theme) because Tailwind processes @theme as raw
 * values and can't resolve var() references at extraction time.
 * Always reference color tokens — never hardcode hex values here.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  --gradient-brand: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-red));
}

/* ─── Gradient utilities ─────────────────────────────────────────────────── */
@utility bg-brand-gradient {
  background-image: var(--gradient-brand);
}

@utility text-brand-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Font faces ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Archia";
  src: url("../assets/fonts/archia/archia-thin-webfont.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archia";
  src: url("../assets/fonts/archia/archia-light-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archia";
  src: url("../assets/fonts/archia/archia-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archia";
  src: url("../assets/fonts/archia/archia-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archia";
  src: url("../assets/fonts/archia/archia-semibold-webfont.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archia";
  src: url("../assets/fonts/archia/archia-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
