/* =========================================================================
   NODO Design System — colors_and_type.css
   Retro-Macintosh inspired. Beige platinum + ink + rainbow accents.
   ========================================================================= */

/* ---- Google Fonts fallback (Chicago substitute + body) ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Silkscreen:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');

/* Display = Oswald Bold — condensed editorial, reliable everywhere.
   Retro-Mac feeling comes from Silkscreen pixel accents + Plex Mono + window chrome. */

:root {
  /* =====================================================================
     COLORS — platinum base + ink + Apple '77 rainbow accents
     ===================================================================== */

  /* Base surfaces */
  --platinum:        #EEE5CF;  /* primary background — Mac Classic plastic */
  --cream:           #F7F1DF;  /* raised surface, cards */
  --bone:            #E2D8BE;  /* dividers, soft borders */
  --paper:           #FAF6EA;  /* highest surface / modals */

  /* Text */
  --ink:             #1C1B18;  /* primary text, frames — warm black */
  --graphite:        #555149;  /* secondary text */
  --stone:           #8A8578;  /* tertiary / muted */

  /* Accents — inspired by the Apple 1977 rainbow */
  --signal-red:      #D93A2B;  /* primary CTA, alerts */
  --mustard:         #E8B43B;  /* highlight, secondary */
  --amber:           #E9642A;  /* warning, dock details */
  --crt-green:       #2E8B57;  /* ok, online */
  --terminal-blue:   #2B5DB8;  /* links, info */
  --violet:          #6B4AA8;  /* rare, playful */

  /* Semantic tokens */
  --bg:              var(--platinum);
  --bg-raised:       var(--cream);
  --bg-elevated:     var(--paper);
  --fg:              var(--ink);
  --fg-muted:        var(--graphite);
  --fg-subtle:       var(--stone);
  --border:          var(--ink);
  --border-soft:     var(--bone);
  --link:            var(--terminal-blue);
  --link-hover:      var(--ink);
  --accent:          var(--signal-red);
  --success:         var(--crt-green);
  --warning:         var(--amber);
  --danger:          var(--signal-red);

  /* =====================================================================
     TYPOGRAPHY
     ===================================================================== */

  --font-display:    'Oswald', 'IBM Plex Sans', system-ui, sans-serif;
  --font-pixel:      'Silkscreen', ui-monospace, monospace;
  --font-body:       'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:       'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:      'IBM Plex Serif', Georgia, serif;

  /* Type scale */
  --fs-xs:     12px;
  --fs-sm:     14px;
  --fs-base:   16px;
  --fs-md:     18px;
  --fs-lg:     22px;
  --fs-xl:     28px;
  --fs-2xl:    36px;
  --fs-3xl:    48px;
  --fs-4xl:    64px;
  --fs-5xl:    88px;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  /* Letter spacing — retro bitmap fonts like wider tracking at small sizes */
  --ls-tight:  -0.01em;
  --ls-base:   0;
  --ls-wide:   0.04em;
  --ls-mega:   0.08em;

  /* =====================================================================
     SPACING — 8px base grid
     ===================================================================== */
  --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;

  /* =====================================================================
     RADII — small only. No pill buttons. No 16px cards.
     ===================================================================== */
  --r-0: 0;
  --r-1: 2px;    /* default */
  --r-2: 4px;    /* window top corners */
  --r-full: 999px; /* only for tiny dots / status indicators */

  /* =====================================================================
     SHADOWS — hard System-7 drop shadows. No blur.
     ===================================================================== */
  --sh-0: none;
  --sh-1: 2px 2px 0 0 var(--ink);
  --sh-2: 4px 4px 0 0 var(--ink);
  --sh-soft: 2px 2px 0 0 rgba(28,27,24,0.18);
  --sh-inset: inset 0 0 0 1px var(--ink);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container: 1200px;
  --gutter: 24px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================= */

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 700;
  font-stretch: condensed;
  color: var(--fg);
  margin: 0 0 var(--s-4);
}
/* Global rule: anything using the display font gets Oswald's intended weight
   and tight tracking for editorial feel. */
[style*="font-display"], .display, h1, .h1 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

h2, .h2 {
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

h5, .h5, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--s-2);
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }

small, .small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease-snap);
}
a:hover { color: var(--link-hover); }

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--cream);
  box-shadow: var(--sh-1);
  font-size: var(--fs-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--ink);
  color: var(--platinum);
}

/* =========================================================================
   UTILITY CLASSES — lightweight
   ========================================================================= */

.display { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

.ink { color: var(--ink); }
.graphite { color: var(--graphite); }
.red { color: var(--signal-red); }
.mustard { color: var(--mustard); }
.green { color: var(--crt-green); }
.blue { color: var(--terminal-blue); }

.bg-platinum { background: var(--platinum); }
.bg-cream { background: var(--cream); }
.bg-ink { background: var(--ink); color: var(--platinum); }

/* Dither texture — 3% opacity dot pattern, optional overlay */
.dither {
  background-image: radial-gradient(circle at 1px 1px, rgba(28,27,24,0.35) 1px, transparent 0);
  background-size: 4px 4px;
}