/* ==========================================================================
   Publicus — colors_and_type.css
   Semantic helpers that sit ON TOP of tokens.css. Import tokens.css first.

       <link rel="stylesheet" href="fonts/switzer.css">
       <link rel="stylesheet" href="tokens.css">
       <link rel="stylesheet" href="colors_and_type.css">

   tokens.css contains the raw scales and the elevated primitives
   (surface-card, cta-primary, etc.). This file maps the scales to
   ready-to-use semantic CSS classes for h1..h6, body, p, code, eyebrow,
   fg1/fg2, bg1/bg2, etc. Use these classes inside marketing, deck, and
   document surfaces. Use tokens directly inside product UI.
   ========================================================================== */

@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------------------
     SEMANTIC FOREGROUND / BACKGROUND ALIASES
     fg1..fg4 from highest contrast to lowest; bg1..bg3 from page to deep.
     ---------------------------------------------------------------------- */
  --fg1: var(--color-text-primary);        /* body / heading default     */
  --fg2: var(--color-text-secondary);      /* supporting copy            */
  --fg3: var(--color-text-muted);          /* metadata, utility          */
  --fg4: var(--color-text-inverse);        /* text on dark surfaces      */
  --fg-brand: var(--color-text-brand);     /* purple text, eyebrows      */

  --bg1: var(--color-bg-primary);          /* page background            */
  --bg2: var(--color-bg-surface);          /* surface / divider          */
  --bg-tint: var(--color-bg-tinted);       /* light branded section      */
  --bg-dark: var(--color-bg-dark);         /* dark branded section       */
  --bg-deep: var(--color-bg-deep);         /* deepest band, footer       */

  --line:        var(--color-border);
  --line-subtle: var(--color-border-subtle);
  --line-strong: var(--color-border-strong);
  --line-brand:  var(--color-border-brand);
}

/* ==========================================================================
   BASE — make body + heading defaults work out of the box
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPE — semantic classes
   Display headings use Switzer Medium (500). Body uses Inter.
   ========================================================================== */

.display-hero,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);      /* 500 — the canonical wordmark weight */
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--fg1);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--fg1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-4xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--fg1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--fg1);
  margin: 0;
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--fg1);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  margin: 0;
}

.body-lg {                                  /* marketing body 18px */
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.body-sm {                                  /* UI / table body 14px */
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.body-relaxed {                             /* long-form 1.625 */
  line-height: var(--leading-relaxed);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--fg2);
  text-wrap: pretty;
}

.caption {                                  /* metadata, captions */
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg3);
}

.label {                                    /* UI labels, nav, buttons */
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--fg1);
}

.eyebrow {                                  /* uppercase brand eyebrow */
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-brand);
}

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-medium);
  color: var(--fg1);
  background: var(--bg2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-subtle);
}
.num, .tabular {                            /* tabular numerals for tables */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ==========================================================================
   LINKS
   ========================================================================== */
a {
  color: var(--fg-brand);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--easing-standard);
}
a:hover { text-decoration: underline; }

/* Within dark mood sections, lighten links + eyebrows */
.section-dark a,
.section-dark .eyebrow { color: var(--purple-200); }
.section-dark { color: var(--fg4); }
.section-dark p, .section-dark .body { color: rgba(255,255,255,0.78); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--fg4); }

/* ==========================================================================
   UTILITY HELPERS
   ========================================================================== */
.text-brand   { color: var(--fg-brand); }
.text-muted   { color: var(--fg3); }
.text-secondary { color: var(--fg2); }
.text-inverse { color: var(--fg4); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-critical{ color: var(--color-critical); }

.bg-page    { background: var(--bg1); }
.bg-surface { background: var(--bg2); }
.bg-tint    { background: var(--bg-tint); }
.bg-dark    { background: var(--bg-dark); color: var(--fg4); }
.bg-deep    { background: var(--bg-deep); color: var(--fg4); }

.copy-balance { text-wrap: balance; }
.copy-pretty  { text-wrap: pretty; }