/* ============================================================
   JDiaz Design System — Colors + Type Tokens
   Personal brand for Jonathan Diaz
   Source: JDiaz Logo & Graphic Standard Guidelines (Jan 2022)
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS
   ------------------------------------------------------------
   PRIMARY (intended): Neue Machina — by Pangram Pangram. PAID.
   Not bundled (no license). If/when licensed, drop the .woff2
   files into /fonts and update the @font-face block below.

   SUBSTITUTE: Space Grotesk — geometric, slightly technical
   sans with a similar squared-yet-rounded skeleton.
   Loaded from Google Fonts. Replace when Neue Machina is
   available.
   ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* When Neue Machina is licensed, uncomment + drop files into /fonts:
@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/NeueMachina-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Machina';
  src: url('fonts/NeueMachina-Ultrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  /* ----------------------------------------------------------
     2. PRIMITIVE COLORS — straight from the guidelines
     ---------------------------------------------------------- */

  /* Black scale */
  --jd-black:        #000000; /* JDiaz Black — primary brand */
  --jd-black-soft:   #0C0C0C;
  --jd-ink:          #1A1A1A;
  --jd-graphite:     #282828;
  --jd-gray:         #757575;

  /* White scale */
  --jd-white:        #FFFFFF; /* JDiaz White */
  --jd-bone:         #FAFAFA;
  --jd-pearl:        #E8E8E8;

  /* Brown / gold scale — the accent ⚫︎ above the "i" */
  --jd-brown:        #D8B783; /* JDiaz Brown — primary accent */
  --jd-brown-mid:    #C6A375;
  --jd-brown-deep:   #B29169;

  /* ----------------------------------------------------------
     3. SEMANTIC ROLES (light surface — default)
     ---------------------------------------------------------- */
  --bg:              var(--jd-white);
  --bg-elevated:     var(--jd-bone);
  --bg-subtle:       var(--jd-pearl);
  --bg-inverse:      var(--jd-black);

  --fg:              var(--jd-black);      /* primary text */
  --fg-muted:        var(--jd-gray);       /* secondary text */
  --fg-subtle:       #B5B5B5;              /* tertiary, derived */
  --fg-inverse:      var(--jd-white);
  --fg-on-accent:    var(--jd-black);

  --accent:          var(--jd-brown);
  --accent-hover:    var(--jd-brown-mid);
  --accent-press:    var(--jd-brown-deep);

  --border:          #ECECEC;
  --border-strong:   #D5D5D5;
  --divider:         var(--jd-pearl);

  /* States — derived since not in guidelines */
  --success:         #2D6A4F;
  --warning:         var(--jd-brown-deep);
  --danger:          #9B2C2C;

  /* ----------------------------------------------------------
     4. TYPOGRAPHY — families
     ---------------------------------------------------------- */
  --font-display:    'Neue Machina', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:       'Neue Machina', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale — modular, 1.250 ratio anchored at 16px */
  --fs-display:      clamp(56px, 8vw, 112px);
  --fs-h1:           clamp(40px, 5vw, 64px);
  --fs-h2:           clamp(32px, 4vw, 44px);
  --fs-h3:           28px;
  --fs-h4:           20px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      11px;

  /* Weights */
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* Line heights */
  --lh-tight:        1.05;
  --lh-snug:         1.2;
  --lh-normal:       1.45;
  --lh-relaxed:      1.6;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.18em;  /* for all-caps eyebrows */

  /* ----------------------------------------------------------
     5. SPACING, RADIUS, SHADOW
     ---------------------------------------------------------- */
  --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;

  --radius-0:  0;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-4:  12px;
  --radius-pill: 999px;
  /* Brand defaults to small radii; the brand itself uses sharp/half-pill shapes */

  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-2: 0 4px 10px -2px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-3: 0 16px 32px -8px rgba(0,0,0,0.10), 0 4px 8px -2px rgba(0,0,0,0.05);
  --shadow-inset: inset 0 0 0 1px rgba(0,0,0,0.06);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.68, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   420ms;

  /* Layout */
  --maxw-prose:   68ch;
  --maxw-content: 1240px;
  --gutter:       clamp(20px, 4vw, 48px);
}

/* ----------------------------------------------------------
   6. DARK SURFACE — invert the semantic roles
   ---------------------------------------------------------- */
[data-theme="dark"], .surface-dark {
  --bg:            var(--jd-black);
  --bg-elevated:   var(--jd-ink);
  --bg-subtle:     var(--jd-graphite);
  --bg-inverse:    var(--jd-white);

  --fg:            var(--jd-white);
  --fg-muted:      #B5B5B5;
  --fg-subtle:     var(--jd-gray);
  --fg-inverse:    var(--jd-black);
  --fg-on-accent:  var(--jd-black);

  --border:        #2A2A2A;
  --border-strong: #3A3A3A;
  --divider:       var(--jd-graphite);
}

/* ----------------------------------------------------------
   7. ELEMENT DEFAULTS — opinionated base styles
   ---------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-normal);
  color:       var(--fg);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-snug); }

p  { margin: 0; text-wrap: pretty; }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* All-caps eyebrow label — used for section labels */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Display headline — the "billboard" style */
.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* The signature accent dot — used as a period in headlines */
.accent-dot::after {
  content: "";
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  background: var(--accent);
  border-radius: 999px;
  margin-left: 0.08em;
  vertical-align: 0.18em;
}