/* ─────────────────────────────────────────────────────────────
   Dolev Shilian · Architecture + Interior Design
   Foundations — colors, type, spacing, motion
   ───────────────────────────────────────────────────────────── */

/* Web fonts ----------------------------------------------------
   Body / UI is Calibri (client's specified body face).
   Carlito is its metric-compatible Google Fonts substitute and
   is loaded as the web fallback. Replace with hosted Calibri WOFFs
   if/when a license is purchased.

   Mono is Space Mono — uploaded by the studio as TTF.            */
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

:root {
  /* ── Color · paper, gray, ink ─────────────────────────────
     The system is black / white / gray. A single warm sand
     token (--sand) is the only beige — used at small surface
     area, never as a default background.                    */
  --white:          #FFFFFF;   /* pure white surfaces             */
  --paper:          #F6F5F2;   /* primary background — warm white */
  --paper-light:    #FBFAF7;   /* lifted surface, hover bg        */

  --gray-50:        #ECEBE8;   /* faint fill, image plates        */
  --gray-100:       #DEDCD7;   /* dividers, hairlines             */
  --gray-200:       #C2BFB8;   /* mid-light, disabled borders     */
  --gray-300:       #9C9890;   /* faint text, tertiary captions   */
  --gray-400:       #6E6A62;   /* secondary text                  */
  --gray-500:       #3D3B36;   /* near-ink                        */

  --ink:            #1A1A17;   /* near-black, primary text        */
  --ink-soft:       #282724;   /* card backgrounds on dark        */

  /* Legacy ink-* tokens map to the new gray scale so existing
     specimens, slides, and components keep working unchanged. */
  --ink-mute:       var(--gray-400);  /* was #5A554B */
  --ink-faint:      var(--gray-300);  /* was #8C8678 */

  /* Beige · now a warm tonal family, used across surfaces ---- */
  --sand-50:        #FBF8F1;   /* barely-there warm white         */
  --sand-100:       #F4EEE0;   /* faint warm surface              */
  --sand-200:       #F0EADA;   /* lifted sand                     */
  --sand-300:       #E8DFC9;   /* the signature sand              */
  --sand-400:       #D9CDB0;   /* deeper sand, edges & fills      */
  --sand-500:       #BCAE8E;   /* deepest usable sand             */

  --sand:           #E8DFC9;   /* the touch of beige, accent      */
  --sand-light:     #F0EADA;   /* lifted sand                     */

  /* Legacy bone/linen tokens map to sand so old code keeps
     reading, but new work should reach for --sand directly.   */
  --paper-tint:     var(--sand-light);
  --linen:          var(--sand);

  --line:           rgba(26, 26, 23, 0.12);
  --line-strong:    rgba(26, 26, 23, 0.28);
  --line-faint:     rgba(26, 26, 23, 0.05);

  /* ── Color · accents (used sparingly) ─────────────────── */
  --clay:           #B85C3C;   /* warm terracotta accent         */
  --olive:          #5B5A3A;   /* deep olive, secondary accent   */
  --bronze:         #8A6E4B;   /* warm metallic, captions        */
  --sky:            #6B7C82;   /* cool dust-blue, rare           */

  /* ── Surface roles (semantic) ─────────────────────────── */
  --bg:             var(--paper);
  --bg-elevated:    var(--paper-light);
  --bg-dark:        var(--ink);
  --fg:             var(--ink);
  --fg-soft:        var(--ink-mute);
  --fg-faint:       var(--ink-faint);
  --fg-on-dark:     var(--paper);

  /* ── Type · families ──────────────────────────────────── */
  --font-body:      'Manrope', 'Heebo', 'Segoe UI', system-ui, sans-serif;
  --font-display:   'Heebo', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-mid:       'Space Mono', 'Heebo', ui-monospace, monospace;
  --font-editorial: 'Manrope', 'Heebo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'Space Mono', 'Heebo', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Type · scale ─────────────────────────────────────── */
  /* Editorial display (oversized, lowercase, bleeds edge) */
  --t-mega:         clamp(48px, 7vw, 100px);   /* @kind font */
  --t-display:      clamp(56px, 8vw, 120px);    /* @kind font */
  --t-hero:         clamp(40px, 5vw, 72px);     /* @kind font */
  --t-h1:           clamp(32px, 3.6vw, 52px);   /* @kind font */
  --t-h2:           clamp(24px, 2.4vw, 36px);   /* @kind font */
  --t-h3:           20px;       /* @kind font */
  --t-body-lg:      18px;       /* @kind font */
  --t-body:         16px;       /* @kind font */
  --t-body-sm:      14px;       /* @kind font */
  --t-meta:         12px;       /* @kind font */
  --t-micro:        10px;       /* @kind font */

  /* ── Type · weights ───────────────────────────────────── */
  --w-thin:         200;        /* @kind font */
  --w-light:        300;        /* @kind font */
  --w-regular:      400;        /* @kind font */
  --w-medium:       500;        /* @kind font */
  --w-semibold:     600;        /* @kind font */
  --w-bold:         700;        /* @kind font */
  --w-black:        800;        /* @kind font */

  /* ── Spacing scale (4px base) ─────────────────────────── */
  --s-0:            0;          /* @kind spacing */
  --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:           160px;

  /* ── Radii ────────────────────────────────────────────── */
  --r-0:            0;          /* @kind radius */
  --r-xs:           2px;
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           14px;       /* image cards            */
  --r-pill:         999px;      /* tags, chips, capsules  */

  /* ── Shadows · soft, low-contrast ─────────────────────── */
  --shadow-0:       none;
  --shadow-1:       0 1px 2px rgba(26,24,20,0.04), 0 1px 1px rgba(26,24,20,0.03);
  --shadow-2:       0 4px 14px rgba(26,24,20,0.06), 0 1px 2px rgba(26,24,20,0.04);
  --shadow-3:       0 18px 48px rgba(26,24,20,0.10), 0 4px 8px rgba(26,24,20,0.04);
  --shadow-inset:   inset 0 0 0 1px rgba(26,24,20,0.08);

  /* ── Motion · slow, considered ───────────────────────── */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --ease-arch:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur-fast:       180ms;      /* @kind other */
  --dur-base:       320ms;      /* @kind other */
  --dur-slow:       640ms;      /* @kind other */
  --dur-compose:    1000ms;     /* @kind other — headings/paragraphs settling into a composed scene */
  --dur-cinematic:  1200ms;     /* @kind other */

  /* ── Layout ───────────────────────────────────────────── */
  --max-content:    1440px;     /* @kind spacing */
  --gutter:         clamp(20px, 4vw, 64px);   /* @kind spacing */
  --rule:           1px;        /* @kind spacing */
}

/* ── Base reset & body ──────────────────────────────────── */
html { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: var(--w-regular);
  letter-spacing: 0;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic type styles ───────────────────────────────── */
.t-mega,
.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.t-mega    { font-size: var(--t-mega); }
.t-display { font-size: var(--t-display); }

.t-hero {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-hero);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

.t-editorial {
  font-family: var(--font-editorial);
  font-weight: var(--w-light);
  font-style: italic;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h3, .t-h3 {
  font-family: var(--font-body);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: 0;
}

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-soft);
  text-wrap: pretty;
}
.t-body-lg { font-size: var(--t-body-lg); line-height: 1.55; }
.t-body-sm { font-size: var(--t-body-sm); line-height: 1.5; color: var(--fg-soft); }

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: var(--w-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-regular);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.t-coord {
  /* lat/long, project codes — quiet decorative metadata */
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--fg-faint);
  letter-spacing: 0.02em;
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-tint);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}

/* ── Surfaces & lines ───────────────────────────────────── */
.surface       { background: var(--bg); color: var(--fg); }
.surface-elev  { background: var(--bg-elevated); }
.surface-dark  { background: var(--bg-dark); color: var(--fg-on-dark); }
.surface-tint  { background: var(--paper-tint); }

.rule          { border: 0; border-top: var(--rule) solid var(--line); }
.rule-strong   { border: 0; border-top: var(--rule) solid var(--line-strong); }
.rule-v        { width: 1px; background: var(--line); align-self: stretch; }

/* ── Hover / press primitives ───────────────────────────── */
.hover-fade      { transition: opacity var(--dur-base) var(--ease-out); }
.hover-fade:hover{ opacity: 0.6; }

.press-shrink    { transition: transform var(--dur-fast) var(--ease-out); }
.press-shrink:active { transform: scale(0.985); }