/* ============================================================
   Conica Studio — Colors & Type
   Architectural visualization studio. Editorial, cinematic,
   restrained. The imagery leads; the UI disappears.
   ============================================================ */

/* Webfonts via Google Fonts (substitutes flagged in README) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter+Tight:wght@300;400;500;600&display=swap');

:root {
  /* ─── COLOR ────────────────────────────────────────────────
     Achromatic first. Warm neutrals second. A single restrained
     accent — a warm off-white — used 1–2× per page. The imagery
     must stay the hero; the accent is a whisper, not a shout.
     ─────────────────────────────────────────────────────────── */

  /* Ink — the near-black used for type. Never pure #000. */
  --ink:              #15130F;  /* primary ink, warm black */
  --ink-soft:         #2A2824;  /* body copy on light */
  --ink-mute:         #6B665C;  /* captions, metadata */
  --ink-line:         #D9D4C7;  /* hairline rules */

  /* Paper — the off-white ground. Warm, photographic, paper-like. */
  --paper:            #F4F0E6;  /* primary ground */
  --paper-soft:       #ECE7D8;  /* alt surface, section fills */
  --paper-deep:       #E3DDC9;  /* deepest warm neutral */

  /* Dark surface — for cinematic/image-heavy contexts. */
  --stage:            #0E0D0B;  /* near-black stage */
  --stage-soft:       #1C1A16;  /* elevated dark surface */

  /* Accent — a warm off-white. Used 1–2× per page, almost always
     on the stage (dark) context to mark an active state or to
     quietly draw the eye. Never compete with imagery. */
  --accent:           #EFE6D0;  /* warm off-white */
  --accent-soft:      #D6CCB2;

  /* Semantic aliases — prefer these in components */
  --fg-1:             var(--ink);
  --fg-2:             var(--ink-soft);
  --fg-3:             var(--ink-mute);
  --bg-1:             var(--paper);
  --bg-2:             var(--paper-soft);
  --bg-3:             var(--paper-deep);
  --line:             var(--ink-line);

  /* Dark-mode aliases (for full-bleed hero / stage sections) */
  --on-stage-1:       #F4F0E6;
  --on-stage-2:       #BEB8A8;
  --on-stage-3:       #7C766A;
  --on-stage-line:    #2C2A25;


  /* ─── TYPE ─────────────────────────────────────────────────
     Serif for display (editorial voice).
     Sans for body/UI (quiet, functional).
     ─────────────────────────────────────────────────────────── */

  --font-serif:      'Fraunces', 'GT Sectra', 'Canela',
                      'Playfair Display', Georgia, serif;
  --font-sans:       'Inter Tight', 'Söhne', 'Neue Haas Grotesk',
                      'Helvetica Neue', system-ui, sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — deliberately few sizes. Large for impact. */
  --size-display-xl:  clamp(4rem, 9vw, 9.5rem);   /* 64–152px */
  --size-display-l:   clamp(3rem, 6vw, 6rem);     /* 48–96px  */
  --size-display-m:   clamp(2.25rem, 4vw, 3.75rem);/* 36–60px */
  --size-headline:    clamp(1.5rem, 2vw, 2rem);   /* 24–32px */
  --size-title:       1.25rem;  /* 20px */
  --size-body:        1.0625rem;/* 17px */
  --size-body-sm:     0.9375rem;/* 15px */
  --size-caption:     0.8125rem;/* 13px */
  --size-micro:       0.6875rem;/* 11px — eyebrow/meta */

  /* Line height */
  --lh-tight:         1.02;
  --lh-display:       1.08;
  --lh-headline:      1.18;
  --lh-body:          1.55;
  --lh-caption:       1.45;

  /* Tracking — editorial is open; micro is wide-spaced */
  --tracking-display: -0.02em;
  --tracking-body:    0em;
  --tracking-meta:    0.16em;   /* UPPERCASE eyebrows */
  --tracking-wide:    0.24em;   /* nav + section labels */


  /* ─── SPACING ─────────────────────────────────────────────── */
  --space-0:          0;
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;
  --space-8:          64px;
  --space-9:          96px;
  --space-10:         128px;
  --space-11:         192px;   /* section-to-section */
  --space-12:         256px;   /* hero breathing */

  /* Layout */
  --grid-gutter:      24px;
  --grid-columns:     12;
  --page-margin:      clamp(24px, 5vw, 64px);
  --page-max:         1680px;

  /* Borders — hairlines only */
  --rule:             1px solid var(--line);
  --rule-dark:        1px solid var(--on-stage-line);
  --radius-0:         0;        /* default: no rounding */
  --radius-1:         2px;      /* the one exception (inputs) */

  /* Motion — quiet and unhurried */
  --ease-out:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         180ms;
  --dur-base:         320ms;
  --dur-slow:         600ms;
  --dur-cinematic:    1200ms;
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  letter-spacing: var(--tracking-body);
}

/* Display — serif, editorial. Fraunces: opsz tracks size, wght 400 default. */
.display-xl, h1.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--fg-1);
  margin: 0;
}
.display-l, h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  font-variation-settings: 'opsz' 120, 'SOFT' 30;
  color: var(--fg-1);
  margin: 0;
}
.display-m, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-display-m);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 60, 'SOFT' 30;
  color: var(--fg-1);
  margin: 0;
}

/* Headline — sans, structural */
.headline, h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-headline);
  line-height: var(--lh-headline);
  color: var(--fg-1);
  margin: 0;
}
.title, h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-title);
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0;
}

/* Body */
p, .body {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 64ch;
  text-wrap: pretty;
}
.body-sm { font-size: var(--size-body-sm); line-height: var(--lh-body); }

/* Caption / meta */
.caption {
  font-size: var(--size-caption);
  line-height: var(--lh-caption);
  color: var(--fg-3);
}

/* Eyebrow / section label — UPPERCASE + wide tracking */
.eyebrow, .meta {
  font-family: var(--font-sans);
  font-size: var(--size-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
  color: var(--fg-3);
}

/* Links — underline on hover only, inherit color */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.55; }

/* Editorial figure (image + caption) */
figure { margin: 0; }
figcaption {
  font-size: var(--size-caption);
  color: var(--fg-3);
  margin-top: var(--space-3);
  max-width: 48ch;
}

/* Utility: stage (dark) context */
.on-stage {
  background: var(--stage);
  color: var(--on-stage-1);
}
.on-stage p, .on-stage .body { color: var(--on-stage-2); }
.on-stage .caption, .on-stage .eyebrow { color: var(--on-stage-3); }
.on-stage a { color: inherit; }

/* Rules */
hr {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-7) 0;
}