/* ============================================================
   H.T.Z STUDIOS — Foundations
   Colors, type, spacing, radii, elevation, motion
   Fonts are loaded via <link> in the document head.
   ============================================================ */

/* ============================================================
   1. COLOR — neutrals, brand green, accents, semantic
   ============================================================ */
:root {
  /* Brand green */
  --green-50:  #ECF2EE;
  --green-100: #D2E0D8;
  --green-200: #A6C2B2;
  --green-300: #76A189;
  --green-400: #4E8068;
  --green-500: #2D5F4B;
  --green-600: #1F4A36;   /* H.T.Z signature */
  --green-700: #163828;
  --green-800: #0F2A1E;
  --green-900: #081710;

  /* Neutrals — warm stone */
  --stone-0:   #FFFFFF;
  --stone-50:  #FAFAF8;
  --stone-100: #F4F4F1;
  --stone-150: #ECECE8;
  --stone-200: #E3E3DE;
  --stone-300: #C9C9C3;
  --stone-400: #9E9E97;
  --stone-500: #707069;
  --stone-600: #4E4E48;
  --stone-700: #36362F;
  --stone-800: #22221D;
  --stone-900: #141411;
  --stone-950: #0A0A08;

  /* PAPER — warm cream surface, a counter-tone to plain white */
  --paper-50:  #FBF7EE;
  --paper-100: #F6EFDE;
  --paper-200: #ECE3CB;
  --paper-300: #DCCFB0;
  --paper-ink: #2A2620;

  /* Accents */
  --accent-terracotta: #C9684A;
  --accent-butter:     #E6B958;
  --accent-sage:       #94B49C;
  --accent-sky:        #6B9BC4;

  /* Semantic */
  --success: #2D7A4F;
  --warn:    #C68A1F;
  --danger:  #B84A3A;
  --info:    #3F6FA8;
}

/* ============================================================
   2. SEMANTIC TOKENS
   ============================================================ */
:root {
  --bg-canvas:    var(--stone-50);
  --bg-surface:   var(--stone-0);
  --bg-raised:    var(--stone-0);
  --bg-sunken:    var(--stone-100);
  --bg-inverse:   var(--green-700);
  --bg-tint:      var(--green-50);
  --bg-paper:     var(--paper-50);
  --bg-paper-2:   var(--paper-100);
  --paper-edge:   rgba(120, 90, 40, 0.18);

  --fg-1: var(--stone-900);
  --fg-2: var(--stone-700);
  --fg-3: var(--stone-500);
  --fg-4: var(--stone-400);
  --fg-on-brand:  var(--stone-0);
  --fg-on-paper:  var(--paper-ink);

  --brand:        var(--green-600);
  --brand-hover:  var(--green-700);
  --brand-press:  var(--green-800);
  --brand-soft:   var(--green-50);
  --brand-ink:    var(--green-900);

  --line-1: rgba(20, 20, 17, 0.08);
  --line-2: rgba(20, 20, 17, 0.14);
  --line-3: rgba(20, 20, 17, 0.22);
  --focus-ring: rgba(31, 74, 54, 0.55);

  --shadow-color: 18 22 18;
}

/* ============================================================
   3. RADII
   ============================================================ */
:root {
  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;
}

/* ============================================================
   4. SPACING — 4px base
   ============================================================ */
:root {
  --space-unit: 4px;
  --space-1:  calc(var(--space-unit) * 1);
  --space-2:  calc(var(--space-unit) * 2);
  --space-3:  calc(var(--space-unit) * 3);
  --space-4:  calc(var(--space-unit) * 4);
  --space-6:  calc(var(--space-unit) * 6);
  --space-8:  calc(var(--space-unit) * 8);
  --space-12: calc(var(--space-unit) * 12);
  --space-16: calc(var(--space-unit) * 16);
  --space-20: calc(var(--space-unit) * 20);
}

/* ============================================================
   5. ELEVATION
   ============================================================ */
:root {
  --shadow-1: 0 1px 2px rgba(var(--shadow-color) / .06),
              0 1px 1px rgba(var(--shadow-color) / .04);
  --shadow-2: 0 4px 12px -2px rgba(var(--shadow-color) / .08),
              0 2px 4px -1px rgba(var(--shadow-color) / .04);
  --shadow-3: 0 12px 32px -8px rgba(var(--shadow-color) / .14),
              0 4px 8px -2px rgba(var(--shadow-color) / .06);
  --shadow-4: 0 24px 56px -16px rgba(var(--shadow-color) / .22),
              0 8px 16px -4px rgba(var(--shadow-color) / .08);

  /* Paper-specific shadow — warmer */
  --shadow-paper:
    0 1px 0 rgba(120, 90, 40, .06),
    0 2px 4px rgba(80, 60, 20, .08),
    0 14px 30px -12px rgba(80, 60, 20, .14);
}

/* ============================================================
   6. TYPE
   ============================================================ */
:root {
  --font-sans:      "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display:   "Bricolage Grotesque", "Heebo", sans-serif;
  --font-editorial: "Frank Ruhl Libre", "Georgia", "Heebo", serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 12px; --lh-12: 16px;
  --fs-13: 13px; --lh-13: 18px;
  --fs-14: 14px; --lh-14: 20px;
  --fs-15: 15px; --lh-15: 22px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 26px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-24: 24px; --lh-24: 30px;
  --fs-30: 30px; --lh-30: 36px;
  --fs-36: 36px; --lh-36: 42px;
  --fs-48: 48px; --lh-48: 52px;
  --fs-60: 60px; --lh-60: 62px;
  --fs-72: 72px; --lh-72: 72px;
  --fs-96: 96px; --lh-96: 92px;

  --tr-tight:   -0.025em;
  --tr-snug:    -0.012em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-eyebrow:  0.16em;
}

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

h1, .t-display {
  font-family: var(--font-display);
  font-size: var(--fs-72); line-height: var(--lh-72);
  letter-spacing: var(--tr-tight);
  font-weight: 600; color: var(--fg-1);
  font-variation-settings: "opsz" 72;
}
h2, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48); line-height: var(--lh-48);
  letter-spacing: var(--tr-tight); font-weight: 600; color: var(--fg-1);
  font-variation-settings: "opsz" 48;
}
h3, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-30); line-height: var(--lh-30);
  letter-spacing: var(--tr-snug); font-weight: 600; color: var(--fg-1);
  font-variation-settings: "opsz" 30;
}
h4, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-20); line-height: var(--lh-20);
  letter-spacing: var(--tr-snug); font-weight: 600; color: var(--fg-1);
}
h5, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-16); line-height: var(--lh-16);
  font-weight: 600; color: var(--fg-1);
}

p, .t-body { font-family: var(--font-sans); font-size: var(--fs-15); line-height: var(--lh-15); color: var(--fg-2); }
.t-small   { font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-13); color: var(--fg-3); }
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12); line-height: var(--lh-12);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--fg-3);
}
.t-mono, code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* ============================================================
   7. DIRECTION
   ============================================================ */
[dir="rtl"] { text-align: right; }
[dir="ltr"] { text-align: left; }
[dir="rtl"] .lang-mixed { unicode-bidi: plaintext; }
[lang="he"] { line-height: 1.55; }
[lang="he"] h1, [lang="he"] h2, [lang="he"] h3 { letter-spacing: 0; }

/* ============================================================
   8. FOCUS
   ============================================================ */
:where(button, a, input, textarea, select, [role="button"]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On dark sections a green ring disappears — use light. */
.hero :focus-visible,
.stack :focus-visible,
.cta :focus-visible,
.foot :focus-visible,
.marquee :focus-visible { outline-color: rgba(250, 250, 248, .8); }

/* ============================================================
   9. MOTION
   ============================================================ */
:root {
  --motion-fast:  120ms;
  --motion-base:  200ms;
  --motion-slow:  360ms;
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.5, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.4, 1);
}