/* =========================================================================
   KAYU HOUSE — colors_and_type.css
   Boutique custom music studio · Lombok, Indonesia
   Dark, warm, minimal, architectural. Cinematic sound for premium brands.
   ========================================================================= */

/* ---------- Webfonts (Google Fonts CDN) ----------
   Instrument Serif — editorial display serif, high contrast, considered
   Space Grotesk   — humanist geometric sans for UI and body
   JetBrains Mono  — precise monospace for technical/credit metadata
   -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* =======================================================================
     COLOR — "Kayu" palette
     A near-black theatrical base (keynote stage) warmed by teak, brass and
     ember, cut with deep Lombok jungle green and cold steel highlights.
     Light surfaces exist but are rare — the brand is dark-first.
     ======================================================================= */

  /* Core neutrals — warm blacks, the stage */
  --kh-ink:          #0b0906;   /* deepest — true theatrical black, warm undertone */
  --kh-charcoal:    #141110;   /* primary bg — "studio at night" */
  --kh-obsidian:    #1c1815;   /* raised surface, panel */
  --kh-umber:       #2a241f;   /* card / hairline fill */
  --kh-shadow:      #3a3128;   /* border, subtle divider */
  --kh-stone:       #6b5e52;   /* muted type, secondary */
  --kh-linen:       #b8a999;   /* tertiary type, captions */
  --kh-paper:       #e8dfd3;   /* fg1 on dark — not pure white */
  --kh-bone:        #f5efe6;   /* highest contrast fg, rare */

  /* Warm brand accents — wood, brass, ember */
  --kh-teak:        #7a4f2b;   /* signature wood brown, brand primary */
  --kh-teak-deep:   #4e2f18;   /* oiled teak shadow */
  --kh-teak-light:  #a06d3e;   /* lit wood highlight */
  --kh-brass:       #c08a3e;   /* brass knob, hover emphasis */
  --kh-ember:       #d97d3a;   /* warm pendant light, rare focal */
  --kh-ember-soft:  #b85f22;   /* ember pressed / link */

  /* Cool supporting — jungle, keynote steel */
  --kh-jungle:      #2c3d2a;   /* deep Lombok green, surface variant */
  --kh-moss:        #4b5d3f;   /* mid green, subtle accents */
  --kh-fern:        #7a8a5e;   /* lit foliage */
  --kh-steel:       #5d6a72;   /* keynote lab steel / cool neutral */
  --kh-mist:        #8e9ba2;   /* cool captions on cool surfaces */

  /* Semantic — used sparingly */
  --kh-signal:      #d97d3a;   /* = ember — primary signal / CTA glow */
  --kh-positive:    #7a8a5e;   /* = fern */
  --kh-warning:     #c08a3e;   /* = brass */
  --kh-danger:      #a84a2a;   /* oxidized copper */

  /* Surfaces — semantic assignment */
  --bg:             var(--kh-charcoal);
  --bg-deep:        var(--kh-ink);
  --surface:        var(--kh-obsidian);
  --surface-raised: var(--kh-umber);
  --border:         var(--kh-shadow);
  --border-strong:  var(--kh-teak-deep);
  --hairline:       color-mix(in oklab, var(--kh-paper) 8%, transparent);

  /* Foreground — semantic */
  --fg1:            var(--kh-bone);     /* highest contrast, display */
  --fg2:            var(--kh-paper);    /* body */
  --fg3:            var(--kh-linen);    /* tertiary */
  --fg4:            var(--kh-stone);    /* muted */
  --fg5:            var(--kh-shadow);   /* decorative, near bg */

  /* Brand accents — semantic */
  --accent:         var(--kh-teak-light);
  --accent-hover:   var(--kh-brass);
  --accent-press:   var(--kh-ember-soft);
  --focal:          var(--kh-ember);

  /* =======================================================================
     TYPOGRAPHY
     Three voices:
     1. Display serif (Instrument Serif) — editorial, considered, boutique
     2. Grotesk sans  (Space Grotesk)     — UI, body, navigation
     3. Mono caps     (JetBrains Mono)    — credits, metadata, specs
     ======================================================================= */

  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — architectural, cinematic
     Huge display sizes (posters, hero), austere body. */
  --fs-hero:   clamp(4.5rem, 10vw, 9rem);    /* 72 → 144px */
  --fs-h1:     clamp(3rem, 6vw, 5.25rem);    /* 48 → 84px */
  --fs-h2:     clamp(2rem, 3.8vw, 3.25rem);  /* 32 → 52px */
  --fs-h3:     clamp(1.5rem, 2.4vw, 2rem);   /* 24 → 32px */
  --fs-h4:     1.25rem;                       /* 20px */
  --fs-body-lg: 1.125rem;                     /* 18px */
  --fs-body:   1rem;                          /* 16px */
  --fs-small:  0.875rem;                      /* 14px */
  --fs-caption: 0.75rem;                      /* 12px */
  --fs-micro:  0.6875rem;                     /* 11px — mono credits */

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  --tracking-micro:  0.22em;   /* mono caps credits */
  --tracking-caps:   0.14em;   /* small caps labels */
  --tracking-tight:  -0.02em;  /* display serif */
  --tracking-hero:   -0.035em; /* hero display */
  --tracking-normal: 0;

  /* =======================================================================
     SPACING — architectural grid, golden ratios honored but practical
     ======================================================================= */
  --s-0:   0;
  --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-11:  192px;
  --s-12:  256px;

  /* =======================================================================
     RADII — mostly square/crisp. Architectural. Wood and steel don't bend.
     ======================================================================= */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;       /* max for most UI */
  --r-lg:   12px;      /* rare, for large image frames only */
  --r-full: 999px;     /* pill, badges, never buttons */

  /* =======================================================================
     ELEVATION — directional light, warm side-lit interior
     Shadows are warm-tinted, never neutral gray.
     ======================================================================= */
  --shadow-inset:   inset 0 1px 0 color-mix(in oklab, var(--kh-paper) 6%, transparent);
  --shadow-sm:      0 1px 0 rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
  --shadow-md:      0 2px 0 rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:      0 4px 0 rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.65);
  --shadow-ember:   0 0 0 1px color-mix(in oklab, var(--kh-ember) 30%, transparent),
                    0 0 32px color-mix(in oklab, var(--kh-ember) 18%, transparent);

  /* =======================================================================
     MOTION — slow, deliberate, cinematic. Zero bounce.
     ======================================================================= */
  --ease-cine:     cubic-bezier(0.22, 1, 0.36, 1);    /* primary */
  --ease-stage:    cubic-bezier(0.65, 0, 0.35, 1);    /* symmetrical */
  --ease-in:       cubic-bezier(0.5, 0, 1, 1);
  --dur-fast:      180ms;
  --dur-med:       360ms;
  --dur-slow:      720ms;
  --dur-cine:      1200ms;

  /* =======================================================================
     LAYOUT
     ======================================================================= */
  --container: 1440px;
  --gutter:    var(--s-6);
  --grid-cols: 12;

  /* Cinematic letterbox aspect */
  --aspect-cine: 2.39 / 1;
  --aspect-16-9: 16 / 9;
}

/* =========================================================================
   SEMANTIC TYPE ROLES
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'ss02', 'kern';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.kh-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  color: var(--fg1);
  font-weight: 400;
}

.kh-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  font-weight: 400;
}

.kh-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  font-weight: 400;
}

.kh-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  font-weight: 400;
  font-style: italic;  /* h3 frequently italic for editorial rhythm */
}

.kh-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg1);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
}

.kh-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  font-weight: 400;
}

.kh-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.kh-small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

/* Mono credits — the "TRT · CLIENT · YEAR" metadata strip */
.kh-credit, .kh-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 400;
}

/* Small-caps eyebrow — the "002 · PORTFOLIO" section marker */
.kh-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 500;
}

/* Pull quote / editorial italic */
.kh-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--fg1);
  letter-spacing: -0.01em;
}

/* Code / technical — BPM, TRT, SR etc */
code, .kh-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg2);
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

/* Link — editorial underline, warm on hover */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-med) var(--ease-cine),
              border-color var(--dur-med) var(--ease-cine);
}
a:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* Film grain utility — apply to dark heroes */
.kh-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Hairline rule — architectural divider */
.kh-hairline {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--s-6) 0;
}