/* =========================================================================
   HORIZON23 STUDIO — Colors & Type  (v2 — Editorial Minimalism)
   References: NASA Graphics Standards, Massimo Vignelli, swiss editorial,
   neue grotesque posters. Whitespace is the design. Orange is punctuation.
   ========================================================================= */

/* ---------- Webfonts ---------------------------------------------------- */
/* ---------- Color tokens ------------------------------------------------ */
:root {
  /* Core monochrome — the brand operates in B&W as default */
  --h23-black:        #0A0A0A;   /* ink — never pure black, slightly warm */
  --h23-near-black:   #141414;
  --h23-ink:          #1A1A1A;
  --h23-graphite:     #2A2A2A;
  --h23-iron:         #3D3D3D;
  --h23-steel:        #6E6E6E;
  --h23-fog:          #9A9A9A;
  --h23-ash:          #C2C2C2;
  --h23-bone:         #DEDEDE;
  --h23-paper:        #EFEFEF;   /* light surface, slightly cool */
  --h23-cream:        #F4F2EE;   /* editorial off-white */
  --h23-white:        #FFFFFF;

  /* Accent — Darkroom Safelight. Used as PUNCTUATION, never as background. */
  --h23-safelight:        #FF3B14;
  --h23-safelight-deep:   #C9290A;
  --h23-safelight-glow:   #FF6A3D;
  --h23-ember:            #8C1E08;

  /* Status / semantic */
  --h23-success:      #2F8F4A;
  --h23-warning:      #C28A00;
  --h23-danger:       var(--h23-safelight);
  --h23-info:         var(--h23-steel);

  /* ---------- Semantic tokens (LIGHT mode default) -------------------- */
  --bg:               var(--h23-cream);
  --bg-raised:        var(--h23-white);
  --bg-sunk:          var(--h23-paper);
  --bg-inverse:       var(--h23-black);

  --fg:               var(--h23-ink);
  --fg-1:             var(--h23-ink);
  --fg-2:             var(--h23-iron);
  --fg-3:             var(--h23-steel);
  --fg-muted:         var(--h23-fog);
  --fg-inverse:       var(--h23-white);

  /* Borders — HAIRLINES are the default. No more brutalist 2px. */
  --border:           var(--h23-ink);
  --border-soft:      #D4D4D4;
  --border-faint:     #E4E4E4;
  --border-hair:      1px;
  --border-thick:     1px;        /* deliberately keeping this 1px */

  --accent:           var(--h23-safelight);
  --accent-hover:     var(--h23-safelight-deep);
  --accent-fg:        var(--h23-white);

  --focus-ring:       var(--h23-safelight);
}

/* ---------- Dark theme ------------------------------------------------- */
[data-theme="dark"], .h23-dark {
  --bg:               var(--h23-black);
  --bg-raised:        var(--h23-near-black);
  --bg-sunk:          #050505;
  --bg-inverse:       var(--h23-cream);

  --fg:               var(--h23-white);
  --fg-1:             var(--h23-white);
  --fg-2:             var(--h23-bone);
  --fg-3:             var(--h23-ash);
  --fg-muted:         var(--h23-steel);
  --fg-inverse:       var(--h23-ink);

  --border:           var(--h23-bone);
  --border-soft:      #2A2A2A;
  --border-faint:     #1F1F1F;

  --accent:           var(--h23-safelight);
  --accent-hover:     var(--h23-safelight-glow);
  --accent-fg:        var(--h23-white);
}

/* ---------- Type tokens ----------------------------------------------- */
:root {
  /* Families
     PRIMARY: Syne — display, headlines, body, UI.
     MONO: Google Sans Code — coords, captions, indices, metadata. */
  --font-display:     'Syne', 'Helvetica Neue', Arial, sans-serif;
  --font-tag:         'Syne', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Syne', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:        'Google Sans Code', ui-monospace, Menlo, monospace;

  /* Weights */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semi:    600; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */

  /* Sizes — modular, generous range. Display is HUGE, body is restrained. */
  --t-2xs:  10px;
  --t-xs:   11px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   20px;
  --t-xl:   28px;
  --t-2xl:  40px;
  --t-3xl:  56px;
  --t-4xl:  80px;
  --t-5xl:  120px;
  --t-6xl:  180px;

  /* Tracking */
  --tr-tightest: -0.04em; /* @kind font */
  --tr-tight:    -0.02em; /* @kind font */
  --tr-base:      0;       /* @kind font */
  --tr-wide:      0.06em; /* @kind font */
  --tr-wider:     0.12em; /* @kind font */
  --tr-widest:    0.18em; /* @kind font */

  /* Leading */
  --lh-tight:  0.96; /* @kind font */
  --lh-snug:   1.08; /* @kind font */
  --lh-base:   1.5;  /* @kind font */
  --lh-loose:  1.7;  /* @kind font */

  /* Spacing — generous. Whitespace is the design. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-12: 192px;
  --s-16: 256px;

  /* Radius — hard corners are the brand. Pills only when truly necessary. */
  --r-0: 0px;
  --r-1: 1px;
  --r-2: 2px;
  --r-pill: 999px;

  /* Shadows — virtually NONE. Editorial design relies on type & space.
     Reserved soft shadow only for floating overlays. No more block shadows. */
  --shadow-none:  none;
  --shadow-soft:  0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-deep:  0 2px 4px rgba(0,0,0,.08), 0 24px 48px rgba(0,0,0,.10);

  /* Easing */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.1, 1); /* @kind other */
  --ease-in:     cubic-bezier(0.5, 0, 0.8, 0.4); /* @kind other */
  --ease-inout:  cubic-bezier(0.7, 0, 0.2, 1);   /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    520ms; /* @kind other */
}

/* ---------- Semantic type roles --------------------------------------- */
.h23-display, h1.h23 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(64px, 12vw, var(--t-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tightest);
  text-transform: uppercase;
}
.h23-h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}
.h23-h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
}
.h23-h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.h23-h4, h4 {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.h23-eyebrow, .h23-tag {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
}
.h23-index {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-wider);
  color: var(--fg-3);
}
.h23-body, p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  text-wrap: pretty;
  color: var(--fg-2);
}
.h23-lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-lg);
  line-height: var(--lh-base);
  letter-spacing: var(--tr-tight);
  text-wrap: pretty;
  color: var(--fg-1);
}
.h23-small {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.h23-caption {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.h23-mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0;
}
.h23-data {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-2xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Base reset (scoped via .h23-root) ------------------------- */
.h23-root {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.h23-root *,
.h23-root *::before,
.h23-root *::after { box-sizing: border-box; }

/* ---------- Utility classes ------------------------------------------- */
.h23-rule       { height: var(--border-hair); background: currentColor; border: 0; opacity: 1; }
.h23-rule-faint { height: var(--border-hair); background: currentColor; border: 0; opacity: .25; }
.h23-uppercase  { text-transform: uppercase; letter-spacing: var(--tr-wide); }

/* The brand's signature mark: a tiny safelight square as punctuation. */
.h23-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  vertical-align: baseline;
  margin: 0 0.05em;
}
.h23-dot--lg { width: 14px; height: 14px; }