/* =========================================================================
   Eetos Design System — Colors & Type
   Petrol-accented, industrial, blunt. White-black with one alive teal.
   ========================================================================= */

/* -------------------------- Fonts -------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ---------------------- COLORS — base palette ---------------------- */
  --paper:        #F4F1EA;   /* warm off-white, the default page */
  --paper-deep:   #ECE7DC;   /* slightly deeper, for cards-on-paper */
  --paper-edge:   #DDD6C5;   /* hairline tone */
  --ink:          #131313;   /* near-black, all type */
  --ink-soft:     #2A2A2A;
  --ink-mute:     #5C5C5C;
  --ink-faint:    #8A8377;   /* on paper, gives a worn/printed feel */
  --rule:         #1B1B1B;   /* hard rules and borders */

  /* Petrol — the one and only accent */
  --petrol:       #15616D;
  --petrol-deep:  #0E4750;
  --petrol-bright:#1E8A99;
  --petrol-wash:  #D6E4E7;   /* tinted-paper highlight */

  /* Functional accents (sparingly) */
  --amber:        #E0A02A;   /* "stamp" warning / highlight */
  --crimson:      #B5322B;   /* errors / negative */

  /* ---------------------- COLORS — semantic --------------------- */
  --bg:           var(--paper);
  --bg-raised:    #FAF8F2;
  --bg-sunken:    var(--paper-deep);
  --bg-invert:    var(--ink);

  --fg:           var(--ink);
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-soft);
  --fg-3:         var(--ink-mute);
  --fg-4:         var(--ink-faint);
  --fg-invert:    var(--paper);

  --accent:       var(--petrol);
  --accent-fg:    #FFFFFF;
  --accent-soft:  var(--petrol-wash);

  --border:       var(--paper-edge);
  --border-strong:var(--rule);

  --selection-bg: var(--petrol);
  --selection-fg: #FFFFFF;

  /* ---------------------- TYPE — families ----------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------------- TYPE — scale -------------------------- */
  /* Display sizes lean BIG. We commit to bold typographic moments. */
  --fs-display-xl: clamp(56px, 9vw,  148px);
  --fs-display-l:  clamp(44px, 6.4vw, 96px);
  --fs-display-m:  clamp(36px, 4.4vw, 64px);
  --fs-h1:         clamp(32px, 3.2vw, 48px);
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    11px;     /* uppercase mono labels */

  --lh-tight:    0.92;
  --lh-display:  1.02;
  --lh-heading:  1.15;
  --lh-body:     1.55;

  --tracking-display:  -0.02em;
  --tracking-body:      0em;
  --tracking-eyebrow:   0.14em;

  /* ---------------------- SPACING & SHAPE ----------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — deliberately small. Industrial, not consumer-soft. */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Borders — hairlines on paper, hard rules where needed. */
  --bw-hair:   1px;
  --bw-rule:   2px;
  --bw-stamp:  3px;

  /* Shadows: minimal. Print doesn't have shadows; we mostly don't either. */
  --shadow-card:  0 1px 0 0 var(--paper-edge);
  --shadow-pop:   0 8px 24px -12px rgba(19,19,19,0.18), 0 2px 0 0 var(--paper-edge);
  --shadow-stamp: 4px 4px 0 0 var(--ink);   /* hard offset, no blur — stamped */

  /* Motion */
  --ease-snap:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-stamp:  cubic-bezier(0.6, 0, 0.4, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ---------------------- DARK MODE TOKENS ----------------------- */
:root[data-theme="dark"], .theme-dark {
  --bg:        #0E0E0E;
  --bg-raised: #161616;
  --bg-sunken: #0A0A0A;
  --bg-invert: var(--paper);

  --fg-1: #F0EDE5;
  --fg-2: #D5D0C2;
  --fg-3: #9A9588;
  --fg-4: #6A6557;
  --fg-invert: var(--ink);

  --accent: var(--petrol-bright);
  --accent-soft: #102A2E;

  --border: #262626;
  --border-strong: #F0EDE5;

  --shadow-card:  0 1px 0 0 #1F1F1F;
  --shadow-pop:   0 8px 24px -12px rgba(0,0,0,0.6), 0 2px 0 0 #1F1F1F;
  --shadow-stamp: 4px 4px 0 0 var(--petrol-bright);
}

/* ---------------------- BASE / SEMANTIC ELEMENTS ----------------------- */
::selection { background: var(--selection-bg); color: var(--selection-fg); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0; text-wrap: pretty; }

.display-xl, .display-l, .display-m {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
}
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.display-l  { font-size: var(--fs-display-l); }
.display-m  { font-size: var(--fs-display-m); }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

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

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--border-strong);
  margin: var(--space-6) 0;
}

/* ---------------------- UTILITIES ----------------------- */
.rule        { border-top: var(--bw-rule) solid var(--ink); }
.rule-hair   { border-top: var(--bw-hair) solid var(--border); }
.rule-dashed { border-top: var(--bw-hair) dashed var(--ink); }

/* "Stamped" container — hard offset shadow, square corners */
.stamp {
  border: var(--bw-stamp) solid var(--ink);
  box-shadow: var(--shadow-stamp);
  border-radius: 0;
  background: var(--bg-raised);
}

/* Halftone dot texture — uses radial-gradient. Layer over solids. */
.halftone {
  background-image: radial-gradient(rgba(19,19,19,0.45) 1px, transparent 1.4px);
  background-size: 6px 6px;
}
.halftone-fine {
  background-image: radial-gradient(rgba(19,19,19,0.35) 0.6px, transparent 1px);
  background-size: 4px 4px;
}

/* Grain overlay — apply to ::after of a container */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.18;
  z-index: 1;
}

/* Petrol duotone treatment for B&W imagery */
.duotone {
  filter: grayscale(1) contrast(1.05);
  background: var(--petrol);
}
.duotone img {
  mix-blend-mode: lighten;
  filter: contrast(1.1) brightness(0.95);
  opacity: 0.92;
}

/* Stencil cut — masks horizontal bridges through text/shape */
.stencil {
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 18%, transparent 18% 22%, #000 22% 100%);
          mask-image: repeating-linear-gradient(0deg, #000 0 18%, transparent 18% 22%, #000 22% 100%);
}

/* ASCII-style horizontal divider */
.ascii-rule {
  font-family: var(--font-mono);
  color: var(--fg-3);
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
}
.ascii-rule::before { content: "+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+----+"; }

/* Schematic blueprint background tile */
.blueprint {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(19,19,19,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,19,19,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}