/* ============================================================
   Hal's CV Design System — Foundations
   Colors, typography & spacing tokens.
   Import this file once at the top of every artifact.
   ============================================================ */

/* ---------- 1. Fonts ---------------------------------------- */

@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("fonts/Inconsolata-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/CourierPrime-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens --------------------------------------- */

:root {
  /* — Palette ------------------------------------------------ */
  /* Ink + paper carry the page. Coral and sky are accents only. */
  --ink:          #000000;   /* primary text, rules, marks      */
  --ink-80:       #2b2b2b;   /* near-black secondary text       */
  --ink-60:       #5e5e5e;   /* tertiary text, meta             */
  --ink-40:       #9a9a9a;   /* hairline labels, placeholders   */
  --ink-20:       #d4d4d4;   /* dividers, borders               */
  --ink-08:       #ededed;   /* card wells, hover fills         */
  --ink-04:       #f5f5f3;   /* page surface alt                */
  --paper:        #ffffff;   /* primary surface                 */
  --paper-warm:   #fbf8f3;   /* warm off-white, "linen"         */

  --sun:          #fd816a;   /* coral / sun — primary accent    */
  --sun-soft:     #ffd9cf;   /* tint                            */
  --sun-deep:     #c95538;   /* hover / press                   */

  --sky:          #0089eb;   /* blue — secondary accent / link  */
  --sky-soft:     #cee5fa;
  --sky-deep:     #0064b0;

  /* — Semantic surface/text --------------------------------- */
  --fg-1:         var(--ink);
  --fg-2:         var(--ink-80);
  --fg-3:         var(--ink-60);
  --fg-mute:      var(--ink-40);
  --fg-inverse:   var(--paper);

  --bg-1:         var(--paper);
  --bg-2:         var(--paper-warm);
  --bg-3:         var(--ink-04);
  --bg-well:      var(--ink-08);

  --rule:         var(--ink);          /* primary rule          */
  --rule-soft:    var(--ink-20);
  --rule-hair:    var(--ink-08);

  --accent:       var(--sun);
  --accent-2:     var(--sky);
  --link:         var(--ink);          /* underline, never blue */
  --link-hover:   var(--sun-deep);

  /* — Typography -------------------------------------------- */
  --font-display: "Inconsolata", "JetBrains Mono", ui-monospace,
                  SFMono-Regular, Menlo, Consolas, monospace;
  --font-body:    "Courier Prime", "Courier New", ui-monospace,
                  Menlo, Consolas, monospace;
  --font-mono:    var(--font-body);

  /* Scale — sizes match Hal's Figma type rules               */
  /* CV register: 7 sizes. Don't invent intermediates.        */
  --t-h1:    34px;   --lh-h1: 51px;
  --t-h2:    27px;   --lh-h2: 40.5px;
  --t-h3:    22px;   --lh-h3: 33px;
  --t-h4:    18px;   --lh-h4: 27px;
  --t-body:  14px;   --lh-body: 21px;
  --t-small: 11px;   --lh-small: 16.5px;
  /* 9px --t-meta removed — too small to be readable. Use --t-small. */

  /* Desktop register — for the web portfolio only.           */
  /* Sits above H1 for hero moments; sits beside body for     */
  /* longform case-study prose. Don't mix into the CV.        */
  --t-display-1: 96px;  --lh-display-1: 100px;  /* hero name, once per page */
  --t-display-2: 64px;  --lh-display-2: 68px;   /* case-study opener        */
  --t-body-lg:   17px;  --lh-body-lg:   27px;   /* longform prose, 1.59     */

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* — Spacing (4px base) ------------------------------------ */
  --sp-0:  0px;
  --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: 160px;          /* hero → first content (desktop)  */
  --sp-12: 240px;          /* between unrelated regions       */

  /* — Radius ------------------------------------------------ */
  /* The brand is rectilinear. Radii are rare and small.      */
  --r-0:  0px;
  --r-1:  2px;
  --r-2:  4px;     /* swatches, small chips                   */
  --r-3:  8px;     /* cards, only when necessary              */
  --r-pill: 999px; /* tags / pills                            */

  /* — Borders ----------------------------------------------- */
  --bw-hair:  1px;
  --bw-rule:  2px;   /* the "ink rule" — section separators    */
  --bw-heavy: 4px;

  /* — Elevation (used sparingly) ---------------------------- */
  --sh-0: none;
  --sh-1: 0 1px 0 0 var(--ink-08);                /* hairline   */
  --sh-2: 0 2px 0 0 var(--ink);                   /* "stamp"    */
  --sh-3: 0 1px 2px rgba(0,0,0,.04),
          0 8px 24px -8px rgba(0,0,0,.12);        /* lift       */

  /* — Motion ------------------------------------------------ */
  --ease-quiet: cubic-bezier(.2,.6,.2,1);
  --ease-step:  steps(2, end);
  --dur-1:  120ms;
  --dur-2:  220ms;
  --dur-3:  360ms;

  /* — Layout ------------------------------------------------ */
  --page-max:   1080px;
  --page-pad:   var(--sp-7);
  --gutter:     var(--sp-5);

  /* — Desktop layout register ------------------------------- */
  /* Three content widths instead of one — the single biggest */
  /* unlock for the portfolio site. Prose stays tight, images */
  /* breathe, chrome aligns to "wide".                        */
  --content-narrow:  720px;        /* prose column           */
  --content-wide:   1080px;        /* default page max       */
  --content-bleed:  1440px;        /* image showcase ceiling */
  --measure:          64ch;        /* line-length cap, prose */

  /* 12-column grid contract */
  --grid-cols:    12;
  --grid-gap:     var(--sp-5);     /* 24px column gap        */
  --grid-gap-y:   var(--sp-7);     /* 48px row gap           */

  /* Breakpoints (consume via media queries directly;         */
  /* listed here so authors share one set of numbers.)        */
  --bp-sm:    640px;
  --bp-md:    880px;
  --bp-lg:   1200px;
  --bp-xl:   1600px;
}

/* ---------- 4. Desktop layout primitives -------------------- */

.measure       { max-width: var(--measure); }
.col-narrow    { max-width: var(--content-narrow); }
.col-wide      { max-width: var(--content-wide); }
.col-bleed     { max-width: var(--content-bleed); }
.col-centered  { margin-left: auto; margin-right: auto; }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap-y);
}

/* ---------- 3. Element defaults ----------------------------- */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  color: var(--fg-1);
  margin: 0;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--t-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--t-h4); line-height: var(--lh-h4); }

p { margin: 0; }

small, .text-small { font-size: var(--t-small); line-height: var(--lh-small); }
.text-meta        { font-size: var(--t-small);  line-height: var(--lh-small);
                    letter-spacing: var(--tracking-wide); }
/* .text-meta kept as an alias of .text-small + wide tracking, so existing
   markup keeps working. The size is no longer 9px. */
.text-caps        { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.text-mono        { font-family: var(--font-mono); }
.text-display     { font-family: var(--font-display); font-weight: 700; }

a, .link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-quiet);
}
a:hover, .link:hover { color: var(--link-hover); }

hr, .rule {
  border: 0;
  border-top: var(--bw-rule) solid var(--ink);
  margin: var(--sp-5) 0;
}
.rule-hair { border-top-width: var(--bw-hair); border-color: var(--ink-20); }

/* utility */
.stack       { display: flex; flex-direction: column; gap: var(--sp-3); }
.row         { display: flex; flex-direction: row;    gap: var(--sp-3); align-items: center; }
.between     { justify-content: space-between; }