globals.css

@import "tailwindcss";

/* =============================================================================
   MSAIL design tokens  ·  "Michigan research-editorial"
   A serious student AI lab with collegiate color confidence. SINGLE LIGHT THEME.

   Identity: U-M Blue #00274C (dominant structural color, real navy fields/bands)
   plus U-M Maize #FFCB05 (bold accent: thick rules, big type accents, highlights)
   on a warm paper base #F7F4EC. Maize is text ONLY on navy fields.

   Type: Anton (display headlines + wordmark; display-only, single weight) + Inter
   (body/UI) + IBM Plex Mono (small labels). Edit DESIGN here; content in src/data.
   ============================================================================= */

@theme inline {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-plex-mono), ui-monospace, "SF Mono", "SFMono-Regular", monospace;
}

@theme {
  /* --- Surfaces ----------------------------------------------------------- */
  --color-paper: #f7f4ec; /* warm paper, the page background */
  --color-paper-deep: #efeadd; /* slightly deeper warm tone for subtle blocks */
  --color-paper-raised: #fffdf7; /* lifted card on paper */

  /* --- Michigan blue, the dominant structural color ----------------------- */
  --color-navy: #00274c;
  --color-navy-deep: #001a33; /* reserved: extra-dark navy for navy-on-navy depth (currently unused; the footer uses --color-navy via .navy-field) */
  --color-navy-soft: #16395e; /* lifted navy: cards/hover on a navy field */

  /* --- Michigan maize, the bold accent ------------------------------------ */
  --color-maize: #ffcb05;
  --color-maize-deep: #f0b400; /* maize hover/pressed */

  /* --- Text --------------------------------------------------------------- */
  --color-ink: #0a1a2f; /* deep-navy ink, primary text on paper */
  --color-muted: #44546a; /* secondary text on paper */
  --color-faint: #596779; /* meta on paper — 5.25:1 on paper, 4.8:1 on paper-deep (AA at 13px) */
  --color-on-navy: #f4efe2; /* cream text on navy fields */
  --color-on-navy-muted: #aec1d6; /* secondary text on navy */

  /* --- Lines -------------------------------------------------------------- */
  --color-border: rgba(0, 39, 76, 0.16); /* hairline on paper */
  --color-border-strong: rgba(0, 39, 76, 0.32);
  --color-border-on-navy: rgba(244, 239, 226, 0.18); /* hairline on navy */

  /* --- Signals ------------------------------------------------------------ */
  --color-ring: #00274c;
  --color-selection-bg: #ffcb05;
  --color-selection-fg: #00274c;

  /* --- Type scale. Bold grotesk display + clean grotesk text + mono labels.
         Confident, heavy, tight tracking on the big sizes. ------------------- */
  --text-meta: 0.8125rem;
  --text-meta--line-height: 1.45;
  --text-meta--letter-spacing: 0.02em;

  --text-label: 0.9375rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-body: 1.0625rem;
  --text-body--line-height: 1.65;

  --text-lead: 1.375rem;
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: -0.005em;

  /* Anton runs tall and tight, so the display tiers use comfortable line-height
     and neutral (non-negative) tracking so the tall caps never crowd.
     (h2 and mega are defined-but-unused tiers of the ramp; first use deserves a
     visual review.) */
  --text-h3: 1.875rem;
  --text-h3--line-height: 1.18;
  --text-h3--letter-spacing: 0em;
  --text-h3--font-weight: 400;

  --text-h2: 2.625rem;
  --text-h2--line-height: 1.12;
  --text-h2--letter-spacing: 0em;
  --text-h2--font-weight: 400;

  --text-h1: clamp(2.25rem, 7vw, 4.5rem);
  --text-h1--line-height: 1.1;
  --text-h1--letter-spacing: 0.004em;
  --text-h1--font-weight: 400;

  --text-display: clamp(2.5rem, 8vw, 6.75rem);
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: 0.006em;
  --text-display--font-weight: 400;

  --text-mega: clamp(3.75rem, 13vw, 9.5rem);
  --text-mega--line-height: 1.02;
  --text-mega--letter-spacing: 0.008em;
  --text-mega--font-weight: 400;

  /* --- Editorial rhythm (8px base) ---------------------------------------- */
  --spacing-gutter: 1.5rem;
  --spacing-section: 7rem;
  --spacing-section-sm: 4rem;

  --container-page: 72rem;
  --container-bleed: 88rem;
  --container-prose: 40rem;
  /* Unset Tailwind's deprecated 65ch default so `max-w-prose` falls through to
     --container-prose above (otherwise the 40rem token is silently dead). */
  --max-width-prose: initial;

  /* Near-square radii: editorial color blocks read as crisp rectangles. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Restrained motion. */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-rise: rise 0.42s var(--ease-expo) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   Base layer
   ============================================================================= */
@layer base {
  :root {
    color-scheme: light;
  }

  *,
  ::before,
  ::after {
    border-color: var(--color-border);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    /* Reserve the scrollbar gutter so the mobile-menu scroll lock doesn't
       reflow the page on classic-scrollbar platforms. */
    scrollbar-gutter: stable;
  }

  body {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-fg);
  }

  :focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* On navy fields the navy focus ring is invisible, so switch it to maize. */
  .navy-field :focus-visible {
    outline-color: var(--color-maize);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* Warm, subtle scrollbar tuned to paper. */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
  }
  ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-border-strong);
    border-radius: 999px;
    border: 3px solid var(--color-paper);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* =============================================================================
   Design-language utilities
   ============================================================================= */

/* The display face: Anton (display-only, single weight). font-synthesis:none so
   the bold utility classes elsewhere never synthesize a distorted Anton; it
   always renders its one true weight. Falls back to Inter then the system stack. */
@utility font-display {
  font-family: var(--font-anton), var(--font-inter), system-ui, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

/* A full navy color-block: cream text, navy background. */
@utility navy-field {
  background-color: var(--color-navy);
  color: var(--color-on-navy);
}

/* The maize highlight: a bold marker behind a word; navy text stays legible.
   This is how maize appears in text on paper (never as a maize text color). */
@utility maize-highlight {
  background-color: var(--color-maize);
  color: var(--color-navy);
  padding-inline: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Centered measure + responsive gutters. */
@utility container-page {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* Wider "bleed" frame for the editorial grid + masthead. */
@utility container-bleed {
  width: 100%;
  max-width: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* =============================================================================
   Reduced motion: page transition (rise) + hover motion collapse.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}