/* ============================================================
   CCA — Caglar Celik Architects
   Colors & Type Foundations
   ============================================================
   Bauhaus-inspired minimalism. Architectural line drawing aesthetic.
   Black, white, off-white + thin precise lines + generous negative space.
   ============================================================ */

/* ---------- Fonts ---------- */
/* PRIMARY: Futura (not bundled — licensed font).
   FALLBACK / SUBSTITUTE: Jost (Google Fonts) — a modern geometric
   sans-serif closely modeled on Futura. Use Jost in prototypes;
   swap to licensed Futura in production. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&display=swap');

:root {
  /* ============ CORE PALETTE ============ */
  --cca-black:       #111111;   /* primary ink */
  --cca-white:       #FFFFFF;   /* paper */
  --cca-off-white:   #F5F4F0;   /* monograph paper */

  --cca-gray:        #808080;   /* section-cut gray / secondary */
  --cca-gray-light:  #B3B3B3;   /* drafting guideline */
  --cca-gray-hair:   #E6E5E1;   /* hairline rule, faintest tone */

  --cca-red:         #C8102E;   /* Turkish red — accent only */

  /* ============ SEMANTIC — LIGHT (default) ============ */
  --bg:              var(--cca-off-white);
  --bg-paper:        var(--cca-white);
  --bg-inverse:      var(--cca-black);

  --fg-1:            var(--cca-black);        /* primary text */
  --fg-2:            var(--cca-gray);         /* secondary text / captions */
  --fg-3:            var(--cca-gray-light);   /* tertiary / metadata */
  --fg-inverse:      var(--cca-white);

  --line-1:          var(--cca-black);        /* architectural line */
  --line-2:          var(--cca-gray);         /* section-cut line */
  --line-3:          var(--cca-gray-light);   /* guideline / construction */
  --line-hair:       var(--cca-gray-hair);    /* faintest hairline */

  --accent:          var(--cca-red);

  /* ============ TYPE ============ */
  --font-sans:       "Futura", "Futura PT", "Jost", "Century Gothic",
                     "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --font-display:    var(--font-sans);
  --font-mono:       "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Weights — Futura is used Bold for headlines, Light for body */
  --fw-light:        300;   /* @kind font */
  --fw-regular:      400;   /* @kind font */
  --fw-medium:       500;   /* @kind font */
  --fw-bold:         700;   /* @kind font */

  /* Type scale — architectural, spacious */
  --fs-hero:         clamp(56px, 8vw, 128px);   /* @kind font */
  --fs-display:      clamp(40px, 5vw, 72px);    /* @kind font */
  --fs-h1:           clamp(32px, 3.5vw, 48px);  /* @kind font */
  --fs-h2:           clamp(24px, 2.5vw, 32px);  /* @kind font */
  --fs-h3:           20px;   /* @kind font */
  --fs-body:         15px;   /* @kind font */
  --fs-small:        13px;   /* @kind font */
  --fs-caption:      11px;   /* drafting caption @kind font */

  /* Letter-spacing — tight on display, wide on labels */
  --tracking-tight:  -0.02em;   /* @kind font */
  --tracking-normal: 0;         /* @kind font */
  --tracking-wide:   0.08em;    /* @kind font */
  --tracking-label:  0.18em;    /* wide-spaced uppercase labels @kind font */

  --leading-tight:   1.05;   /* @kind font */
  --leading-snug:    1.25;   /* @kind font */
  --leading-body:    1.55;   /* @kind font */

  /* ============ SPACING (4pt base) ============ */
  --sp-0:  0;       /* @kind spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;   /* monograph margins */

  /* ============ LINES / BORDERS ============ */
  --stroke-hair:     0.5px;
  --stroke-thin:     1px;
  --stroke-regular:  1.5px;
  --stroke-bold:     2px;

  /* Corner radii — architecture doesn't round. Keep square. */
  --radius-0:        0;
  --radius-sm:       0;        /* intentionally square */
  --radius-md:       0;

  /* Shadows — avoid. Architecture relies on line, not depth. */
  --shadow-none:     none;
  --shadow-paper:    0 1px 0 0 var(--cca-gray-hair);  /* subtle baseline only */

  /* ============ MOTION ============ */
  /* --ease-draft: precise, drafting easing */
  --ease-draft:      cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --dur-fast:        120ms;   /* @kind other */
  --dur-base:        220ms;   /* @kind other */
  --dur-slow:        420ms;   /* @kind other */
}

/* ============ DARK VARIANT ============ */
/* White lines on #111 — architect's negative plate */
[data-theme="dark"] {
  --bg:              var(--cca-black);
  --bg-paper:        #0A0A0A;
  --bg-inverse:      var(--cca-white);

  --fg-1:            var(--cca-white);
  --fg-2:            var(--cca-gray-light);
  --fg-3:            var(--cca-gray);
  --fg-inverse:      var(--cca-black);

  --line-1:          var(--cca-white);
  --line-2:          var(--cca-gray-light);
  --line-3:          var(--cca-gray);
  --line-hair:       #222222;

  --shadow-paper:    0 1px 0 0 #222222;
}

/* ============ BASE ELEMENTS ============ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headline — Bauhaus big, Futura Bold, tight */
.cca-hero,
h1.cca-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.cca-display {
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .cca-h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .cca-h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .cca-h3 {
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--leading-snug);
}

p, .cca-body {
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  max-width: 62ch;
}

/* Wide-tracked uppercase label — drafting caption style */
.cca-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-2);
}

.cca-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
  text-transform: uppercase;
}

.cca-small {
  font-size: var(--fs-small);
  font-weight: var(--fw-light);
  color: var(--fg-2);
}

/* Bilingual pair — TR primary, EN secondary */
.cca-bilingual {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.cca-bilingual .tr {
  color: var(--fg-1);
  font-weight: var(--fw-bold);
}
.cca-bilingual .en {
  color: var(--fg-2);
  font-weight: var(--fw-light);
  font-style: italic;
  letter-spacing: var(--tracking-wide);
}

/* Hairline rule — the defining architectural element */
.cca-rule {
  border: 0;
  border-top: var(--stroke-thin) solid var(--line-1);
  margin: var(--sp-5) 0;
}
.cca-rule--hair {
  border-top-width: var(--stroke-hair);
  border-top-color: var(--line-3);
}