/* ============================================================
   PABLO MESA — DESIGN SYSTEM
   colors_and_type.css
   ------------------------------------------------------------
   "Present. Oracular. Tectonic."
   A meta-aesthetic research practice. Three colors as three
   modes of attention: Blue (Ideas), Green (Objects), Orange
   (Methods). They overlap. They never resolve.
   ============================================================ */

/* ---------- TYPOGRAPHY -------------------------------------- */
/* TWO families only:
   1. HW Topol  — display, text, and "mono" role (Light 300 stands
      in for monospace duties: meta-data, captions, system marks).
   2. Instrument Serif — RESERVED for quotation only.
   No third family. No JetBrains Mono. The Light weight of Topol
   carries the meta-register so the system stays disciplined.    */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

@font-face {
  font-family: "HW Topol";
  src: url("fonts/HW-Topol-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HW Topol";
  src: url("fonts/HW-Topol-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HW Topol";
  src: url("fonts/HW-Topol-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- TYPE FAMILIES ------------------------------------- */
  --font-display: "HW Topol", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "HW Topol", "Helvetica Neue", Arial, sans-serif;
  /* No real monospace — Topol Light (300) carries the meta register.
     Use --font-mono for labels/captions/system marks, but render in
     Topol Light with positive tracking + uppercase. */
  --font-mono:    "HW Topol", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", serif;

  /* Weight reserved for the meta/mono register */
  --fw-mono:      300;

  /* ---- TYPE SCALE (modular, brutalist — wide range) ------ */
  --fs-mono:    11px;   /* mono labels, footnotes */
  --fs-meta:    12px;   /* eyebrows, captions */
  --fs-body:    16px;   /* default body */
  --fs-lede:    20px;
  --fs-h6:      18px;
  --fs-h5:      22px;
  --fs-h4:      28px;
  --fs-h3:      40px;
  --fs-h2:      64px;
  --fs-h1:      104px;
  --fs-mega:    180px;  /* hero title */
  --fs-tectonic: 280px; /* full-bleed numerals, section breaks */

  /* ---- LINE HEIGHTS -------------------------------------- */
  --lh-tight:   0.92;
  --lh-display: 0.98;
  --lh-snug:    1.12;
  --lh-text:    1.45;
  --lh-loose:   1.6;

  /* ---- TRACKING (negative on display, positive on mono) -- */
  --tr-tight:   -0.04em;
  --tr-display: -0.02em;
  --tr-text:     0;
  --tr-mono:     0.02em;
  --tr-eyebrow:  0.16em;

  /* ---- WEIGHTS ------------------------------------------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  400;   /* HW Topol has 300/400/700 — medium maps to regular */
  --fw-bold:    700;

  /* ============================================================
     COLOR — three practices + warm neutrals
     ------------------------------------------------------------
     Blue   = Ideas       (concept, art, the highest)
     Green  = Objects     (materialization, garments, things)
     Orange = Methods     (consultancy, frameworks, practice)
     ============================================================ */

  /* ---- THREE PRACTICES (each with a scale) --------------- */
  /* CONCEPTS — Pablo blue (HSL-derived around 400 core) */
  --concepts-50:   #F0F2F4;
  --concepts-100:  #DBDFE6;
  --concepts-200:  #B2BFD2;
  --concepts-300:  #7993B9;
  --concepts-400:  #5F81B2;   /* core — locked */
  --concepts-500:  #375177;
  --concepts-600:  #22344E;
  --concepts-700:  #131C2A;
  --concepts-800:  #0A0F16;
  --concepts:      var(--concepts-400);
  /* aliases for legacy --ideas-* references */
  --ideas-50:   var(--concepts-50);
  --ideas-100:  var(--concepts-100);
  --ideas-200:  var(--concepts-200);
  --ideas-300:  var(--concepts-300);
  --ideas-400:  var(--concepts-400);
  --ideas-500:  var(--concepts-500);
  --ideas-600:  var(--concepts-600);
  --ideas-700:  var(--concepts-700);
  --ideas-800:  var(--concepts-800);
  --ideas:      var(--concepts-400);

  /* OBJECTS — deep botanical green (HSL-derived around 400 core) */
  --objects-50:  #EEF6F2;
  --objects-100: #D4EDE1;
  --objects-200: #9FE5C3;
  --objects-300: #53DF9C;
  --objects-400: #0F6D40;   /* core — locked */
  --objects-500: #0C5734;
  --objects-600: #09673A;
  --objects-700: #053820;
  --objects-800: #021810;
  --objects:     var(--objects-400);

  /* METHODS — burnt sienna / oxide (HSL-derived around 400 core) */
  --methods-50:  #F6F1EE;
  --methods-100: #EEDBD3;
  --methods-200: #E7B39C;
  --methods-300: #E47C4E;
  --methods-400: #A03C10;   /* core — locked */
  --methods-500: #82310C;
  --methods-600: #6B2406;
  --methods-700: #3A1403;
  --methods-800: #1E0A02;
  --methods:     var(--methods-400);

  /* ---- WARM NEUTRALS (paper, stone, ink) ----------------- */
  --paper:    #F4F0E8;   /* primary background — off-white, warm */
  --paper-2:  #EBE5D6;   /* secondary surface */
  --stone-1:  #D6CFBE;   /* dividers, subtle blocks */
  --stone-2:  #A89F8A;   /* secondary text on paper */
  --stone-3:  #6B6354;   /* meta */
  --ink:      #1B1814;   /* primary text — warm near-black */
  --ink-2:    #2D2822;   /* secondary text */
  --ink-soft: #3F392F;
  --void:     #0E0C09;   /* darkest, full-bleed sections */

  /* ---- SEMANTIC FOREGROUND / BACKGROUND ------------------ */
  --bg:         var(--paper);
  --bg-alt:     var(--paper-2);
  --bg-dark:    var(--void);
  --bg-deep:    var(--ink);

  --fg:         var(--ink);
  --fg-soft:    var(--ink-soft);
  --fg-muted:   var(--stone-3);
  --fg-faint:   var(--stone-2);
  --fg-on-dark: var(--paper);

  --rule:       var(--ink);          /* primary hairline */
  --rule-soft:  var(--stone-1);

  /* ---- SEMANTIC ACCENTS ---------------------------------- */
  --accent-concepts: var(--concepts);
  --accent-ideas:    var(--concepts);
  --accent-objects:  var(--objects);
  --accent-methods:  var(--methods);

  /* ---- FOCUS / SELECTION --------------------------------- */
  --focus-ring: 2px solid var(--ink);
  --selection-bg: var(--methods-200);
  --selection-fg: var(--ink);

  /* ============================================================
     SPACING — based on 4px / 8px grid, plus tectonic jumps
     ============================================================ */
  --sp-0:   0;
  --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;
  --sp-12: 256px;

  /* ============================================================
     RADII — almost none. Brutalist, square, with one exception.
     ============================================================ */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;
  --r-pill: 999px;   /* used sparingly, only on tags/chips */

  /* ============================================================
     BORDERS — hairlines, structural rules, and TRIPLE-LINE marks
     (three-line brutalism: a stack of three coloured rules used
      as register marks across sections, headers, and dividers)
     ============================================================ */
  --bw-hair:   1px;
  --bw-rule:   1.5px;
  --bw-bold:   2px;
  --bw-heavy:  4px;
  --tri-gap:   3px;   /* gap between the three rules */
  --tri-w:     2px;   /* weight of each of the three rules */

  /* ============================================================
     ELEVATION — almost flat. One drop for floating panels.
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--ink);                 /* underline-as-shadow */
  --shadow-2: 4px 4px 0 0 var(--ink);               /* offset, brutalist */
  --shadow-3: 8px 8px 0 0 var(--ink);               /* offset, larger */
  --shadow-soft: 0 12px 32px -8px rgba(14,12,9,0.18);

  /* ============================================================
     MOTION — slow, mechanical, no bounce
     ============================================================ */
  --ease-tectonic: cubic-bezier(0.2, 0.7, 0, 1);
  --ease-sharp:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
  --dur-glacial: 900ms;

  /* ============================================================
     LAYOUT — column grid for editorial work
     ============================================================ */
  --col-count: 12;
  --col-gap:   var(--sp-5);
  --max-w:     1440px;
  --gutter:    var(--sp-7);
}

/* ============================================================
   BASE — semantic element styles
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-medium);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-medium);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-medium);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  margin: 0;
}
h6, .h6 {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
  margin: 0;
}

.mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-medium);
}
.tectonic {
  font-family: var(--font-display);
  font-size: var(--fs-tectonic);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-weight: var(--fw-medium);
}

p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
  text-wrap: balance;
}

.eyebrow, .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-mono);
}
.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  line-height: 1.35;
  font-weight: var(--fw-mono);
  color: var(--fg-muted);
}
.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  font-weight: var(--fw-mono);
}
.serif-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}
.serif {
  font-family: var(--font-serif);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tr-mono);
  font-weight: var(--fw-mono);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: var(--bw-hair) solid currentColor;
  transition: color var(--dur-fast) var(--ease-sharp);
}
a:hover { color: var(--accent-methods); }

hr {
  border: 0;
  border-top: var(--bw-rule) solid var(--rule);
  margin: var(--sp-7) 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.fg-concepts { color: var(--accent-concepts); }
.fg-ideas    { color: var(--accent-concepts); }
.fg-objects  { color: var(--accent-objects); }
.fg-methods  { color: var(--accent-methods); }
.bg-concepts { background: var(--accent-concepts); }
.bg-ideas    { background: var(--accent-concepts); }
.bg-objects  { background: var(--accent-objects); }
.bg-methods  { background: var(--accent-methods); }
.bg-paper    { background: var(--paper); }
.bg-paper-2  { background: var(--paper-2); }
.bg-ink      { background: var(--ink); color: var(--fg-on-dark); }
.bg-void     { background: var(--void); color: var(--fg-on-dark); }

.rule-t { border-top:    var(--bw-rule) solid var(--rule); }
.rule-b { border-bottom: var(--bw-rule) solid var(--rule); }
.rule-l { border-left:   var(--bw-rule) solid var(--rule); }
.rule-r { border-right:  var(--bw-rule) solid var(--rule); }

/* ============================================================
   THREE-LINE BRUTALISM
   ------------------------------------------------------------
   The signature divider of the Pablo Mesa system: three
   stacked rules — Concepts blue, Objects green, Methods orange.
   Read as the studio's spine. Use on section breaks, page
   tops/bottoms, card frames, and as a graphic register mark.
   ============================================================ */
.tri-rule {
  display: block;
  width: 100%;
  height: calc(var(--tri-w) * 3 + var(--tri-gap) * 2);
  background-image:
    linear-gradient(var(--concepts), var(--concepts)),
    linear-gradient(var(--objects),  var(--objects)),
    linear-gradient(var(--methods),  var(--methods));
  background-repeat: no-repeat;
  background-size:
    100% var(--tri-w),
    100% var(--tri-w),
    100% var(--tri-w);
  background-position:
    0 0,
    0 calc(var(--tri-w) + var(--tri-gap)),
    0 calc(var(--tri-w) * 2 + var(--tri-gap) * 2);
}
.tri-rule-vert {
  display: block;
  height: 100%;
  width: calc(var(--tri-w) * 3 + var(--tri-gap) * 2);
  background-image:
    linear-gradient(to right, var(--concepts), var(--concepts)),
    linear-gradient(to right, var(--objects),  var(--objects)),
    linear-gradient(to right, var(--methods),  var(--methods));
  background-repeat: no-repeat;
  background-size:
    var(--tri-w) 100%,
    var(--tri-w) 100%,
    var(--tri-w) 100%;
  background-position:
    0 0,
    calc(var(--tri-w) + var(--tri-gap)) 0,
    calc(var(--tri-w) * 2 + var(--tri-gap) * 2) 0;
}
/* Three-line frame as a top/bottom border on a section */
.tri-border-t { border-top: 0; padding-top: calc(var(--tri-w) * 3 + var(--tri-gap) * 2 + 14px); position: relative; }
.tri-border-t::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--tri-w) * 3 + var(--tri-gap) * 2);
  background-image:
    linear-gradient(var(--concepts), var(--concepts)),
    linear-gradient(var(--objects),  var(--objects)),
    linear-gradient(var(--methods),  var(--methods));
  background-repeat: no-repeat;
  background-size: 100% var(--tri-w), 100% var(--tri-w), 100% var(--tri-w);
  background-position: 0 0, 0 calc(var(--tri-w) + var(--tri-gap)), 0 calc(var(--tri-w) * 2 + var(--tri-gap) * 2);
}
.tri-border-b { padding-bottom: calc(var(--tri-w) * 3 + var(--tri-gap) * 2 + 14px); position: relative; }
.tri-border-b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--tri-w) * 3 + var(--tri-gap) * 2);
  background-image:
    linear-gradient(var(--concepts), var(--concepts)),
    linear-gradient(var(--objects),  var(--objects)),
    linear-gradient(var(--methods),  var(--methods));
  background-repeat: no-repeat;
  background-size: 100% var(--tri-w), 100% var(--tri-w), 100% var(--tri-w);
  background-position: 0 0, 0 calc(var(--tri-w) + var(--tri-gap)), 0 calc(var(--tri-w) * 2 + var(--tri-gap) * 2);
}