/* ============================================================
   TimeMatch — Design Tokens
   Import into any HTML built against this system:
     <link rel="stylesheet" href="colors_and_type.css" />
   ============================================================ */

/* ---------- Webfonts ----------
   Display:   Instrument Serif  (editorial, academic warmth)
   Body:      Geist              (technical, precise sans)
   Mono:      Geist Mono         (data, code, schedule cells)
   ----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color — raw palette ---------- */

  /* Ink (primary text + dark surfaces). A near-black navy, not pure black —
     reads as printed ink on paper, not as a screen. */
  --tm-ink-900: #0B1426;
  --tm-ink-800: #131C33;
  --tm-ink-700: #1F2A44;
  --tm-ink-600: #2C3957;
  --tm-ink-500: #3D4B6B;

  /* Slate (secondary text, muted UI) */
  --tm-slate-600: #5B6473;
  --tm-slate-500: #7C8597;
  --tm-slate-400: #A2A9B8;
  --tm-slate-300: #C8CCD6;

  /* Paper (warm ivory surfaces — NOT pure white, this matters) */
  --tm-paper-50:  #FBF9F4;  /* page background */
  --tm-paper-100: #F6F2EA;  /* primary surface */
  --tm-paper-200: #EFEADD;  /* raised surface */
  --tm-paper-300: #E2DBCD;  /* hairline / divider */
  --tm-paper-400: #CFC6B3;  /* heavy divider */

  /* Citron — the signature accent. The "match" in TimeMatch.
     A vivid highlighter-on-printed-schedule chartreuse. Use SPARINGLY:
     a single CTA, a single highlight, a single matched cell.  */
  --tm-citron-300: #E8F289;
  --tm-citron-400: #D9F23E;   /* THE accent */
  --tm-citron-500: #B8D324;
  --tm-citron-600: #8FA61C;

  /* Supporting accents — for schedule cell colors, not branding */
  --tm-lilac-400:  #C6BFFF;
  --tm-lilac-600:  #6B5BD6;
  --tm-coral-400:  #FFB39A;
  --tm-coral-600:  #E97557;
  --tm-sage-400:   #BDD9C3;
  --tm-sage-600:   #5C8F6B;
  --tm-sky-400:    #B8D4F0;
  --tm-sky-600:    #4A7AB8;

  /* Semantic */
  --tm-success:    #5C8F6B;
  --tm-warning:    #C99A2E;
  --tm-danger:     #B84A3E;
  --tm-info:       #4A7AB8;

  /* ---------- Color — semantic tokens (use these in components) ---------- */
  --tm-bg:              var(--tm-paper-50);
  --tm-bg-surface:      var(--tm-paper-100);
  --tm-bg-raised:       var(--tm-paper-200);
  --tm-bg-inverse:      var(--tm-ink-900);

  --tm-fg:              var(--tm-ink-900);   /* primary text */
  --tm-fg-muted:        var(--tm-slate-600); /* secondary text */
  --tm-fg-subtle:       var(--tm-slate-500); /* tertiary, captions */
  --tm-fg-inverse:      var(--tm-paper-50);  /* text on dark */
  --tm-fg-on-accent:    var(--tm-ink-900);   /* citron is light → ink on top */

  --tm-border:          var(--tm-paper-300); /* hairline */
  --tm-border-strong:   var(--tm-paper-400);
  --tm-border-inverse:  var(--tm-ink-700);

  --tm-accent:          var(--tm-citron-400);
  --tm-accent-hover:    var(--tm-citron-500);
  --tm-accent-soft:     var(--tm-citron-300);

  /* ---------- Type — families ---------- */
  --tm-font-display: 'Instrument Serif', 'Source Serif 4', Georgia, serif;
  --tm-font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tm-font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type — scale ---------- */
  --tm-text-xs:   12px;
  --tm-text-sm:   14px;
  --tm-text-base: 16px;
  --tm-text-md:   18px;
  --tm-text-lg:   20px;
  --tm-text-xl:   24px;
  --tm-text-2xl:  32px;
  --tm-text-3xl:  44px;
  --tm-text-4xl:  60px;
  --tm-text-5xl:  84px;
  --tm-text-6xl:  120px;

  /* ---------- Type — weight ---------- */
  --tm-weight-light:    300;
  --tm-weight-regular:  400;
  --tm-weight-medium:   500;
  --tm-weight-semibold: 600;
  --tm-weight-bold:     700;

  /* ---------- Type — leading ---------- */
  --tm-leading-tight:   1.05;
  --tm-leading-snug:    1.2;
  --tm-leading-normal:  1.45;
  --tm-leading-relaxed: 1.6;

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

  /* ---------- Radii (restrained — this brand is squarish) ---------- */
  --tm-radius-none: 0;
  --tm-radius-xs:   2px;
  --tm-radius-sm:   4px;
  --tm-radius-md:   6px;
  --tm-radius-lg:   10px;
  --tm-radius-pill: 999px;

  /* ---------- Elevation (whisper-quiet — hairlines do most of the work) ---------- */
  --tm-shadow-hairline: inset 0 0 0 1px var(--tm-border);
  --tm-shadow-xs: 0 1px 0 rgba(11, 20, 38, 0.04), 0 1px 2px rgba(11, 20, 38, 0.04);
  --tm-shadow-sm: 0 1px 2px rgba(11, 20, 38, 0.05), 0 2px 6px rgba(11, 20, 38, 0.04);
  --tm-shadow-md: 0 2px 4px rgba(11, 20, 38, 0.06), 0 8px 24px rgba(11, 20, 38, 0.06);
  --tm-shadow-lg: 0 4px 8px rgba(11, 20, 38, 0.07), 0 24px 48px rgba(11, 20, 38, 0.08);

  /* ---------- Motion ---------- */
  --tm-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --tm-ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --tm-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --tm-dur-fast:   120ms;
  --tm-dur-base:   200ms;
  --tm-dur-slow:   360ms;

  /* ---------- Grid (the brand motif) ---------- */
  --tm-grid-cell: 56px;          /* one timetable cell */
  --tm-grid-line: var(--tm-paper-300);
}

/* ============================================================
   Base type styles — applied semantically.
   Use the classes (.tm-h1, .tm-body) OR style your tags
   directly; the cascade below covers tag defaults.
   ============================================================ */

html {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-base);
  color: var(--tm-fg);
  background: var(--tm-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--tm-font-sans);
  font-weight: var(--tm-weight-regular);
  line-height: var(--tm-leading-normal);
  color: var(--tm-fg);
}

/* ---------- Display (serif) ---------- */
.tm-display-xl, h1.tm-display {
  font-family: var(--tm-font-display);
  font-weight: var(--tm-weight-regular);
  font-size: var(--tm-text-6xl);
  line-height: var(--tm-leading-tight);
  letter-spacing: -0.025em;
}

.tm-display-lg {
  font-family: var(--tm-font-display);
  font-weight: var(--tm-weight-regular);
  font-size: var(--tm-text-5xl);
  line-height: var(--tm-leading-tight);
  letter-spacing: -0.02em;
}

.tm-display {
  font-family: var(--tm-font-display);
  font-weight: var(--tm-weight-regular);
  font-size: var(--tm-text-4xl);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

/* ---------- Headings (sans by default; pair with .tm-display for serif hero) ---------- */
h1, .tm-h1 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-3xl);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-snug);
  letter-spacing: -0.015em;
  color: var(--tm-fg);
}
h2, .tm-h2 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-2xl);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-snug);
  letter-spacing: -0.012em;
}
h3, .tm-h3 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-xl);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-snug);
  letter-spacing: -0.008em;
}
h4, .tm-h4 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-snug);
}

/* ---------- Body ---------- */
p, .tm-body {
  font-size: var(--tm-text-base);
  line-height: var(--tm-leading-relaxed);
  color: var(--tm-fg);
  text-wrap: pretty;
}
.tm-body-lg {
  font-size: var(--tm-text-md);
  line-height: var(--tm-leading-relaxed);
  color: var(--tm-fg-muted);
}
.tm-body-sm {
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-normal);
  color: var(--tm-fg-muted);
}

/* ---------- Utility ---------- */
.tm-eyebrow {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tm-fg-muted);
}
.tm-caption {
  font-size: var(--tm-text-xs);
  line-height: 1.4;
  color: var(--tm-fg-subtle);
}
.tm-mono, code, kbd, samp {
  font-family: var(--tm-font-mono);
  font-size: 0.92em;
}
.tm-mono-tabular {
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Links ---------- */
a {
  color: var(--tm-fg);
  text-decoration: underline;
  text-decoration-color: var(--tm-border-strong);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--tm-dur-fast) var(--tm-ease);
}
a:hover { text-decoration-color: var(--tm-fg); }