/* =========================================================================
   JustAHouse — Color & Type Tokens
   Industrial-editorial. Dark, warm, considered.
   ========================================================================= */

/* Webfonts -------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* === COLOR — Base ================================================= */
  /* Background — near-black, slight warm undertone (not pure #000) */
  --jh-bg:            #0E0C0A;   /* primary canvas */
  --jh-bg-raised:     #15120F;   /* cards, inset panels */
  --jh-bg-sunken:     #080706;   /* deep wells, dropshadow base */
  --jh-bg-stage:      #1B1815;   /* hover, selected row */

  /* Foreground — warm cream, never pure white */
  --jh-fg:            #EDE6D8;   /* primary type */
  --jh-fg-1:          #EDE6D8;   /* alias */
  --jh-fg-2:          #B8AE9C;   /* secondary, captions */
  --jh-fg-3:          #7A7264;   /* tertiary, metadata */
  --jh-fg-4:          #4A453D;   /* disabled, dividers */

  /* Rule lines */
  --jh-rule:          #2A2722;   /* hairline */
  --jh-rule-strong:   #3D3933;   /* emphasized rule */

  /* === COLOR — Accent =============================================== */
  /* De-saturated amber/ochre — references film stock & archive */
  --jh-amber:         #B8893A;   /* primary accent */
  --jh-amber-soft:    #8B6A2E;   /* hover, inactive */
  --jh-amber-deep:    #5C4620;   /* press, embedded */
  --jh-amber-tint:    #1F1A12;   /* amber-tinted bg wash */

  /* Cool industrial blue-grey — secondary accent */
  --jh-steel:         #6B7C88;
  --jh-steel-soft:    #4F5C66;
  --jh-steel-deep:    #2D353C;

  /* === COLOR — Sub-brand accent shifts =============================== */
  /* Each sub-brand gets a subtle shift, not a full palette change */
  --jh-prompt:        #C49247;   /* warmer amber — generative warmth */
  --jh-comp:          #8C7A5A;   /* desaturated khaki — invisible work */
  --jh-scene:         #A87C3E;   /* deeper amber — environment */
  --jh-trace:         #9A8A6E;   /* archival paper */
  --jh-frame:         #707D86;   /* steel — finishing */

  /* === COLOR — Semantic ============================================= */
  --jh-link:          var(--jh-amber);
  --jh-link-hover:    var(--jh-fg);
  --jh-focus:         var(--jh-amber);
  --jh-error:         #A85A3A;   /* warm rust, not red */
  --jh-success:       #6B7C5A;   /* moss, not green */

  /* === TYPE — Families ============================================== */
  --jh-font-display:  "Barlow Condensed", "Oswald", "Impact", sans-serif;
  --jh-font-mono:     "IBM Plex Mono", "Menlo", "Consolas", monospace;
  --jh-font-serif:    "Lora", "Georgia", "Times New Roman", serif;
  --jh-font-ui:       var(--jh-font-mono);

  /* === TYPE — Weights =============================================== */
  --jh-w-light:       300;
  --jh-w-regular:     400;
  --jh-w-medium:      500;
  --jh-w-semibold:    600;
  --jh-w-bold:        700;
  --jh-w-black:       900;

  /* === TYPE — Scale (display sizes) ================================= */
  --jh-display-xl:    clamp(72px, 12vw, 192px);  /* hero wordmark */
  --jh-display-lg:    clamp(56px, 8vw, 120px);
  --jh-display-md:    clamp(40px, 5vw, 72px);
  --jh-display-sm:    clamp(28px, 3.5vw, 48px);

  --jh-h1:            56px;
  --jh-h2:            40px;
  --jh-h3:            28px;
  --jh-h4:            20px;

  --jh-body-lg:       20px;
  --jh-body:          16px;
  --jh-body-sm:       14px;
  --jh-caption:       12px;
  --jh-micro:         11px;

  /* === TYPE — Tracking ============================================== */
  --jh-track-tight:   -0.02em;
  --jh-track-normal:  0;
  --jh-track-loose:   0.04em;
  --jh-track-mono:    0.02em;
  --jh-track-label:   0.18em;   /* monospace UI labels */

  /* === TYPE — Leading =============================================== */
  --jh-lead-tight:    1.0;     /* display */
  --jh-lead-snug:     1.15;
  --jh-lead-body:     1.55;    /* serif body */
  --jh-lead-mono:     1.4;     /* mono UI */

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

  /* === RADII — minimal, mostly square =============================== */
  --jh-r-0:           0;        /* default. things are square. */
  --jh-r-1:           1px;      /* hairline soften */
  --jh-r-2:           2px;      /* buttons, inputs */
  --jh-r-pill:        999px;    /* used sparingly */

  /* === BORDERS ====================================================== */
  --jh-border:        1px solid var(--jh-rule);
  --jh-border-strong: 1px solid var(--jh-rule-strong);
  --jh-border-fg:     1px solid var(--jh-fg);
  --jh-border-amber:  1px solid var(--jh-amber);

  /* === SHADOWS — restrained ========================================= */
  --jh-shadow-1:      0 1px 0 0 rgba(0,0,0,0.4);
  --jh-shadow-2:      0 8px 24px -8px rgba(0,0,0,0.6);
  --jh-shadow-3:      0 24px 48px -16px rgba(0,0,0,0.7);
  --jh-inset:         inset 0 1px 0 0 rgba(255,250,235,0.04);

  /* === MOTION — mechanical ========================================== */
  --jh-ease:          cubic-bezier(0.2, 0, 0.1, 1);    /* sharp out */
  --jh-ease-in:       cubic-bezier(0.6, 0, 1, 1);
  --jh-dur-fast:      120ms;
  --jh-dur:           180ms;
  --jh-dur-slow:      260ms;

  /* === LAYOUT ======================================================= */
  --jh-max-w:         1440px;
  --jh-gutter:        clamp(20px, 4vw, 64px);
  --jh-grain-opacity: 0.035;
}

/* =========================================================================
   Semantic element styles — apply these directly via tag or class
   ========================================================================= */

html, body {
  background: var(--jh-bg);
  color: var(--jh-fg);
  font-family: var(--jh-font-serif);
  font-size: var(--jh-body);
  line-height: var(--jh-lead-body);
  font-weight: var(--jh-w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .jh-display {
  font-family: var(--jh-font-display);
  font-weight: var(--jh-w-bold);
  line-height: var(--jh-lead-tight);
  letter-spacing: var(--jh-track-tight);
  color: var(--jh-fg);
  text-transform: uppercase;
  margin: 0;
}

h1 { font-size: var(--jh-h1); font-weight: var(--jh-w-black); }
h2 { font-size: var(--jh-h2); font-weight: var(--jh-w-bold); }
h3 { font-size: var(--jh-h3); font-weight: var(--jh-w-semibold); letter-spacing: var(--jh-track-normal); }
h4 { font-size: var(--jh-h4); font-weight: var(--jh-w-semibold); letter-spacing: var(--jh-track-loose); text-transform: uppercase; }

p {
  margin: 0 0 1em 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.jh-eyebrow,
.jh-label,
.jh-meta {
  font-family: var(--jh-font-mono);
  font-size: var(--jh-caption);
  font-weight: var(--jh-w-regular);
  text-transform: uppercase;
  letter-spacing: var(--jh-track-label);
  color: var(--jh-fg-3);
  line-height: var(--jh-lead-mono);
}

.jh-eyebrow {
  color: var(--jh-amber);
}

code, kbd, samp, pre, .jh-mono {
  font-family: var(--jh-font-mono);
  font-size: 0.92em;
  letter-spacing: var(--jh-track-mono);
}

a {
  color: var(--jh-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--jh-dur) var(--jh-ease),
              border-color var(--jh-dur) var(--jh-ease);
}
a:hover {
  color: var(--jh-link-hover);
  border-bottom-color: currentColor;
}

::selection {
  background: var(--jh-amber);
  color: var(--jh-bg);
}

/* Wordmark logic — "just a NOUN" -------------------------------------- */
.jh-wordmark {
  font-family: var(--jh-font-display);
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  color: var(--jh-fg);
}
.jh-wordmark .jh-wm-just,
.jh-wordmark .jh-wm-a {
  font-weight: var(--jh-w-light);
  font-size: 0.55em;
  color: var(--jh-fg-2);
  letter-spacing: 0.04em;
}
.jh-wordmark .jh-wm-noun {
  font-weight: var(--jh-w-black);
  font-size: 1em;
  letter-spacing: -0.02em;
}

/* Grain overlay — apply to a fixed full-viewport element -------------- */
.jh-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--jh-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}