/* =================================================================
   colors_and_type.css  ·  CANONICAL SOURCE OF TRUTH
   SMC Practice design system tokens. One spine, three rooms.

   Master file:  00_Cowork OS/01_Resources/colors_and_type.css
   Consumers reference this master, never a private fork:
     · UI kits (advisory / practice / library) via ../../colors_and_type.css
     · timetogrow.com via site.css @import ./colors_and_type.css (synced copy)

   Deploy note: each site is a separate Cloudflare Pages project, so it
   ships its own byte-identical copy of this file. To change a token,
   edit this master first, then re-sync every site copy so all match.

   Exceptions pending review (2026-07-04): customera.cx uses an
   assets/smc-practice.css overlay with --smc- prefixed tokens, and
   silviamonterocollado.com is on a different type spine. Neither
   references this file yet. Do not fork token values. No em-dashes, no emoji.
   Last reconciled: 2026-07-04.
   ================================================================= */

/* =================================================================
   SMC PRACTICE · Design System Tokens
   One spine. Three rooms. Locked: Palette D.
   ================================================================= */

/* Fonts loaded from Google Fonts · see fonts.css if hosting locally */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root {

  /* -----------------------------------------------------------------
     TYPE · one spine, two faces.
     Hanken Grotesk for everything. Instrument Serif italic ONLY for
     emphasis inside headlines (the <em>) and rare display fragments.
     No third typeface. No mono. No outline / stroke effects.
     ----------------------------------------------------------------- */
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-italic:  'Instrument Serif', Georgia, serif;

  --font-feat: "ss01", "ss02", "cv01";

  /* Type scale · fluid display, fixed body */
  --fs-display-1: clamp(56px, 5.6vw, 88px);   /* hero h1 */
  --fs-display-2: clamp(40px, 4.2vw, 64px);   /* section h2 / large h1 */
  --fs-display-3: 36px;                        /* card h1 */
  --fs-h1:        40px;
  --fs-h2:        32px;
  --fs-h3:        22px;
  --fs-body-lg:   17px;                        /* lede */
  --fs-body:      15px;
  --fs-body-sm:   13.5px;
  --fs-caption:   12px;                        /* eyebrows, meta */
  --fs-micro:     11px;                        /* numerals, tags */

  /* Weights · Hanken is on a single thread: 400 body, 500 UI/h, 600 wordmark.
     Avoid 300 (looks anemic) and 700 (breaks the whisper). */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;

  /* Tracking · display tightens, micro spaces */
  --ls-display:    -0.045em;
  --ls-h:          -0.02em;
  --ls-italic:     -0.02em;
  --ls-body:       -0.005em;
  --ls-caption:    0.02em;
  --ls-mono-cap:   0.06em;

  /* Line height */
  --lh-display:    0.94;
  --lh-h:          1.05;
  --lh-body:       1.5;
  --lh-tight:      1.35;

  /* -----------------------------------------------------------------
     COLOR · Palette D, locked.

     Neutrals: all rooms share a warm earth axis at hue 75°.
     Paper, clay and ink read as one family across the practice.

     Accents: each room rotates the accent's hue.
       Counsel  · dusty burgundy  (25°,  L 0.44, C 0.065)  · louder
       Library  · dusty sage      (155°, L 0.55, C 0.045)
       Practice · slate blue      (250°, L 0.55, C 0.045)

     Counsel's accent is deliberately deeper than the other two: it
     carries the strongest fingerprint because it IS the practice.
     ----------------------------------------------------------------- */

  /* Shared neutrals (warm earth, hue 75°) -- used by all three rooms */
  --paper:        oklch(0.94 0.010 75);   /* warm cream */
  --paper-2:      oklch(0.88 0.020 75);   /* slightly deeper paper */
  --clay:         oklch(0.78 0.035 75);   /* chip / pill background */
  --ink:          oklch(0.18 0.012 75);   /* primary text */
  --ink-2:        oklch(0.30 0.012 75);   /* secondary text */
  --muted:        oklch(0.50 0.012 75);   /* meta, eyebrow, numbers */
  --rule:         oklch(0.18 0.012 75 / 0.10);
  --rule-strong:  oklch(0.18 0.012 75 / 0.30);

  /* Counsel · silviamonterocollado.com · dusty burgundy */
  --counsel-paper:    var(--paper);
  --counsel-paper-2:  var(--paper-2);
  --counsel-clay:     var(--clay);
  --counsel-ink:      var(--ink);
  --counsel-ink-2:    var(--ink-2);
  --counsel-muted:    var(--muted);
  --counsel-rule:     var(--rule);
  --counsel-accent:       oklch(0.44 0.065 25);
  --counsel-accent-soft:  oklch(0.44 0.065 25 / 0.10);

  /* Library · timetogrow.com · dusty sage */
  --library-paper:    oklch(0.94 0.010 155);
  --library-paper-2:  oklch(0.88 0.020 155);
  --library-clay:     oklch(0.78 0.035 155);
  --library-ink:      oklch(0.18 0.012 155);
  --library-ink-2:    oklch(0.30 0.012 155);
  --library-muted:    oklch(0.50 0.012 155);
  --library-rule:     oklch(0.18 0.012 155 / 0.10);
  --library-accent:       oklch(0.55 0.045 155);
  --library-accent-soft:  oklch(0.55 0.045 155 / 0.10);

  /* Practice · customera.cx · slate blue */
  --practice-paper:    oklch(0.94 0.010 250);
  --practice-paper-2:  oklch(0.88 0.020 250);
  --practice-clay:     oklch(0.78 0.035 250);
  --practice-ink:      oklch(0.18 0.012 250);
  --practice-ink-2:    oklch(0.30 0.012 250);
  --practice-muted:    oklch(0.50 0.012 250);
  --practice-rule:     oklch(0.18 0.012 250 / 0.10);
  --practice-accent:       oklch(0.55 0.045 250);
  --practice-accent-soft:  oklch(0.55 0.045 250 / 0.10);

  /* Signal · status colours (used sparingly) */
  --signal-live:  oklch(0.55 0.13 145);   /* "accepting engagements" dot */

  /* -----------------------------------------------------------------
     SPACING · 4pt base. Aim for the lower density.
     ----------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -----------------------------------------------------------------
     RADII · soft pills + light card rounding only. No hard corners.
     ----------------------------------------------------------------- */
  --radius-card:   8px;
  --radius-chip:   999px;
  --radius-input:  6px;

  /* -----------------------------------------------------------------
     ELEVATION · paper sits on paper. One real shadow, used rarely.
     ----------------------------------------------------------------- */
  --shadow-page:  0 2px 0 oklch(0.18 0.012 75 / 0.04),
                  0 30px 60px -30px oklch(0.18 0.012 75 / 0.18);
  --shadow-focus: 0 0 0 3px oklch(0.55 0.13 145 / 0.30);

  /* -----------------------------------------------------------------
     MOTION · quiet. No bounces.
     ----------------------------------------------------------------- */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  450ms;
}

/* =================================================================
   ROOM SCOPES
   Apply .room-counsel, .room-library or .room-practice to a region
   to re-alias the semantic tokens for that room.
   ================================================================= */

.room-counsel {
  --bg:        var(--counsel-paper);
  --bg-2:      var(--counsel-paper-2);
  --chip-bg:   var(--counsel-clay);
  --fg:        var(--counsel-ink);
  --fg-2:      var(--counsel-ink-2);
  --fg-muted:  var(--counsel-muted);
  --line:      var(--counsel-rule);
  --accent:    var(--counsel-accent);
  --accent-soft: var(--counsel-accent-soft);
}

.room-library {
  --bg:        var(--library-paper);
  --bg-2:      var(--library-paper-2);
  --chip-bg:   var(--library-clay);
  --fg:        var(--library-ink);
  --fg-2:      var(--library-ink-2);
  --fg-muted:  var(--library-muted);
  --line:      var(--library-rule);
  --accent:    var(--library-accent);
  --accent-soft: var(--library-accent-soft);
}

.room-practice {
  --bg:        var(--practice-paper);
  --bg-2:      var(--practice-paper-2);
  --chip-bg:   var(--practice-clay);
  --fg:        var(--practice-ink);
  --fg-2:      var(--practice-ink-2);
  --fg-muted:  var(--practice-muted);
  --line:      var(--practice-rule);
  --accent:    var(--practice-accent);
  --accent-soft: var(--practice-accent-soft);
}

/* =================================================================
   ELEMENT DEFAULTS · opt-in via .ds-* classes
   ================================================================= */

.ds-base {
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  color: var(--fg, var(--ink));
  background: var(--bg, var(--paper));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines */
.ds-h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0;
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-h);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-h);
  letter-spacing: var(--ls-h);
  margin: 0;
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-h);
  letter-spacing: var(--ls-h);
  margin: 0;
}

/* The signature: italic emphasis inside a sans headline.
   ALWAYS solid (never outlined). ALWAYS the room's accent. */
.ds-h-display em,
.ds-h1 em,
.ds-h2 em,
.ds-em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-italic);
  color: var(--accent, var(--counsel-accent));
}

/* Body */
.ds-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2, var(--ink-2));
  text-wrap: pretty;
  margin: 0;
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2, var(--ink-2));
  margin: 0;
}

/* Eyebrow: a 6px filled dot + small medium-weight label */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caption);
  color: var(--fg-muted, var(--muted));
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ds-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg, var(--ink));
  display: inline-block;
}

/* Caption: tag/meta line, no dot */
.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caption);
  color: var(--fg-muted, var(--muted));
}

/* Chip / pill */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  color: var(--fg, var(--ink));
  background: var(--chip-bg, var(--clay));
  padding: 4px 10px;
  border-radius: var(--radius-chip);
}

/* Buttons */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  padding: 10px 18px;
  border-radius: var(--radius-chip);
  border: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.ds-btn-primary {
  background: var(--accent, var(--counsel-accent));
  color: var(--paper);
}
.ds-btn-primary:hover {
  background: var(--fg, var(--ink));
}
.ds-btn-outline {
  background: transparent;
  color: var(--fg, var(--ink));
  box-shadow: inset 0 0 0 1.5px var(--fg, var(--ink));
}
.ds-btn-outline:hover {
  background: var(--fg, var(--ink));
  color: var(--bg, var(--paper));
}
.ds-btn-link {
  background: transparent;
  color: var(--fg, var(--ink));
  padding: 0 0 3px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--fg, var(--ink));
}

/* Wordmark + family mark */
.ds-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--fg, var(--ink));
}
.ds-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, var(--counsel-accent));
  display: inline-block;
  transform: translateY(-1px);
}

/* Live indicator (the green pulse used in meta bars) */
.ds-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-live);
  margin-right: 6px;
  vertical-align: middle;
}

/* Rule */
.ds-rule { border: 0; border-top: 1px solid var(--line, var(--rule)); margin: 0; }

/* Family footer (cross-site row) */
.ds-family-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--fg-muted, var(--muted));
}
.ds-family-footer .ff-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ds-family-footer .ff-item.is-other { opacity: 0.55; }
.ds-family-footer .ff-item.is-self  { color: var(--fg, var(--ink)); }
.ds-family-footer .ff-sq {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-1px);
}
.ds-family-footer .ff-sq.ff-counsel  { background: var(--counsel-accent); }
.ds-family-footer .ff-sq.ff-library  { background: var(--library-accent); }
.ds-family-footer .ff-sq.ff-practice { background: var(--practice-accent); }