@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* ============================================================================
   AKBARS VISUALS — DESIGN FOUNDATIONS
   colors_and_type.css
   A photography-first system for a cinematic real-estate & architecture film
   studio. Museum-gallery layout, strictly monochrome accents, Inter typography.

   FONT NOTE: The system is set in INTER (loaded from Google Fonts in each HTML
   file) — the same family rendering across the whole site. Load it with:
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* ---- TYPE FAMILIES ---------------------------------------------------- */
  --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- COLOR · BRAND & ACCENT (MONOCHROME) ------------------------------ */
  /* The single interactive color is ink black on light surfaces and white on
     dark surfaces — no chromatic accent. Actions read as solid black/white. */
  --primary:          #1d1d1f;   /* Action / Ink — interactive on light        */
  --primary-focus:    #000000;   /* pressed / focus-ring black                 */
  --primary-on-dark:  #ffffff;   /* interactive & links on dark surfaces       */
  --on-primary:       #ffffff;   /* text on a solid black action               */

  /* ---- COLOR · INK / TEXT ----------------------------------------------- */
  --ink:           #1d1d1f;   /* near-black — every headline & body on light  */
  --body:          #1d1d1f;
  --body-on-dark:  #ffffff;
  --body-muted:    #cccccc;   /* secondary copy on dark tiles                 */
  --ink-muted-80:  #333333;   /* body on pearl surface                        */
  --ink-muted-48:  #7a7a7a;   /* disabled text, legal fine print              */
  --on-dark:       #ffffff;

  /* ---- COLOR · SURFACE -------------------------------------------------- */
  --canvas:            #ffffff;   /* dominant white canvas        */
  --canvas-parchment:  #f5f5f7;   /* signature off-white          */
  --surface-pearl:     #fafafc;   /* ghost-button fill            */
  --surface-tile-1:    #272729;   /* primary dark tile            */
  --surface-tile-2:    #2a2a2c;   /* micro-lighter dark tile      */
  --surface-tile-3:    #252527;   /* micro-darker dark tile       */
  --surface-black:     #000000;   /* true void — nav, video       */
  --surface-chip:      #d2d2d7;   /* translucent chip base (~64% alpha over photo) */

  /* ---- COLOR · HAIRLINES & DIVIDERS ------------------------------------- */
  --divider-soft:  #f0f0f0;   /* soft ring on secondary buttons (rgba(0,0,0,.04)) */
  --hairline:      #e0e0e0;   /* 1px hairline on cards & chips                    */
  --hairline-rgba: rgba(0, 0, 0, 0.08);

  /* ---- RADII ------------------------------------------------------------ */
  --r-none: 0px;
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* ---- SPACING (base 8) ------------------------------------------------- */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  17px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-section: 80px;

  /* ---- ELEVATION -------------------------------------------------------- */
  /* The ONLY shadow in the system — reserved for product/photo renders.     */
  --shadow-product: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);
  --blur-frost: saturate(180%) blur(20px); /* @kind other */

  /* ---- TYPE SCALE · raw tokens ------------------------------------------ */
  --t-hero-size: clamp(27px, 5.2vw, 56px);   --t-hero-ls: -0.28px;   --t-hero-lh: 1.07; /* @kind other */
  --t-dlg-size:  clamp(22px, 4vw, 40px);   --t-dlg-ls:  0; /* @kind other */        --t-dlg-lh:  1.10; /* @kind other */
  --t-dmd-size:  clamp(20px, 3.2vw, 34px);   --t-dmd-ls:  -0.374px;  --t-dmd-lh:  1.47; /* @kind other */
  --t-lead-size: clamp(17px, 2.4vw, 28px);   --t-lead-ls: 0.196px;   --t-lead-lh: 1.14; /* @kind other */
  --t-leadair-size: clamp(16px, 2vw, 24px); --t-leadair-lh: 1.5; /* @kind other */
  --t-tag-size:  clamp(16px, 1.9vw, 21px);   --t-tag-ls:  0.231px;   --t-tag-lh:  1.19; /* @kind other */
  --t-body-size: 17px;   --t-body-ls: -0.374px;  --t-body-lh: 1.47; /* @kind other */
  --t-cap-size:  14px;   --t-cap-ls:  -0.224px;  --t-cap-lh:  1.43; /* @kind other */
  --t-fine-size: 12px;   --t-fine-ls: -0.12px;
  --t-micro-size:10px;   --t-micro-ls:-0.08px;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================== */

.t-hero {            /* hero headline — signature "tight" tracking */
  font-family: var(--font-display);
  font-size: var(--t-hero-size);
  font-weight: 600;
  line-height: var(--t-hero-lh);
  letter-spacing: var(--t-hero-ls);
}
.t-display-lg {      /* tile headlines */
  font-family: var(--font-display);
  font-size: var(--t-dlg-size);
  font-weight: 600;
  line-height: var(--t-dlg-lh);
  letter-spacing: var(--t-dlg-ls);
}
.t-display-md {      /* section heads */
  font-family: var(--font-text);
  font-size: var(--t-dmd-size);
  font-weight: 600;
  line-height: var(--t-dmd-lh);
  letter-spacing: var(--t-dmd-ls);
}
.t-lead {            /* tile subcopy */
  font-family: var(--font-display);
  font-size: var(--t-lead-size);
  font-weight: 400;
  line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-ls);
}
.t-lead-airy {       /* airy lead — rare weight 300 */
  font-family: var(--font-text);
  font-size: var(--t-leadair-size);
  font-weight: 300;
  line-height: var(--t-leadair-lh);
}
.t-tagline {         /* sub-nav category / tagline */
  font-family: var(--font-display);
  font-size: var(--t-tag-size);
  font-weight: 600;
  line-height: var(--t-tag-lh);
  letter-spacing: var(--t-tag-ls);
}
.t-body-strong {
  font-family: var(--font-text);
  font-size: var(--t-body-size);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--t-body-ls);
}
.t-body {            /* default paragraph — 17px, not 16px */
  font-family: var(--font-text);
  font-size: var(--t-body-size);
  font-weight: 400;
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
}
.t-dense-link {      /* footer / utility link lists — relaxed leading */
  font-family: var(--font-text);
  font-size: var(--t-body-size);
  font-weight: 400;
  line-height: 2.41;
}
.t-caption {
  font-family: var(--font-text);
  font-size: var(--t-cap-size);
  font-weight: 400;
  line-height: var(--t-cap-lh);
  letter-spacing: var(--t-cap-ls);
}
.t-caption-strong {
  font-family: var(--font-text);
  font-size: var(--t-cap-size);
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: var(--t-cap-ls);
}
.t-eyebrow {         /* uppercase tracked label — portfolio caption grammar */
  font-family: var(--font-text);
  font-size: var(--t-fine-size);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.t-fine {
  font-family: var(--font-text);
  font-size: var(--t-fine-size);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: var(--t-fine-ls);
}
.t-micro {
  font-family: var(--font-text);
  font-size: var(--t-micro-size);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--t-micro-ls);
}

/* ============================================================================
   ELEMENT DEFAULTS  (opt-in via .av-prose or apply directly)
   ========================================================================== */
.av-prose h1 { font: 600 var(--t-hero-size)/var(--t-hero-lh) var(--font-display); letter-spacing: var(--t-hero-ls); color: var(--ink); margin: 0; }
.av-prose h2 { font: 600 var(--t-dlg-size)/var(--t-dlg-lh) var(--font-display); color: var(--ink); margin: 0; }
.av-prose h3 { font: 600 var(--t-dmd-size)/var(--t-dmd-lh) var(--font-text); letter-spacing: var(--t-dmd-ls); color: var(--ink); margin: 0; }
.av-prose p  { font: 400 var(--t-body-size)/var(--t-body-lh) var(--font-text); letter-spacing: var(--t-body-ls); color: var(--body); margin: 0 0 var(--sp-md); }
.av-prose a  { color: var(--primary); text-decoration: none; }