/* ============================================================
   JMDW · J. Michael D. Woodard Jr. Design System
   Colors + Typography foundations
   ============================================================ */

/* ----- Fonts ----- */
@font-face {
  font-family: "After";
  src: url("fonts/After-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Extralight.ttf") format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Light.ttf") format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Medium.ttf") format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Semibold.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Bold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Extrabold.ttf") format("truetype");
  font-weight: 800;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Black.ttf") format("truetype");
  font-weight: 900;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* ---------- Color · Base ---------- */
  /* The "off-white" surface — warm, paper-like. Inspired by aged paper. */
  --jmdw-cream:        #fff6e5;
  --jmdw-cream-soft:   #fbf0d8;   /* slightly deeper cream, for divisions */
  --jmdw-cream-deep:   #f4e6c6;   /* used for blocks / cards on cream */

  /* Type colors */
  --jmdw-ink:          #000003;   /* near-black, primary type & marks */
  --jmdw-teal:         #095951;   /* deep teal, secondary type */

  /* Single accent: "Golden Era" — emphasis only */
  --jmdw-gold:         #c8901f;
  --jmdw-gold-deep:    #a4731a;

  /* Boundless Designs (AR sub-brand) — runs darker, more cinematic */
  --bd-bg:             #0a0a0c;
  --bd-bg-2:           #14141a;
  --bd-line:           #2a2a32;
  --bd-fg:             #efe9d8;   /* same cream, on dark */
  --bd-accent:         #c8901f;   /* shared gold */

  /* Semantic — main brand */
  --bg:                var(--jmdw-cream);
  --bg-soft:           var(--jmdw-cream-soft);
  --fg:                var(--jmdw-ink);
  --fg-2:              var(--jmdw-teal);
  --fg-mute:           rgba(0, 0, 3, 0.55);
  --fg-faint:          rgba(0, 0, 3, 0.18);
  --hairline:          rgba(0, 0, 3, 0.14);
  --hairline-strong:   rgba(0, 0, 3, 0.32);
  --accent:            var(--jmdw-gold);

  /* ---------- Typography · Families ---------- */
  --font-display:  "After", "Helvena", "Helvetica Neue", Arial, sans-serif;
  --font-sans:     "Helvena", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Typography · Scale ----------
     Display sizes are intentionally architectural — large, all-caps, tight tracking. */
  --type-hero:        clamp(72px, 12vw, 220px);  /* full-bleed display */
  --type-display-1:   clamp(56px, 8vw, 140px);   /* page H1 */
  --type-display-2:   clamp(40px, 5.5vw, 96px);  /* section header */
  --type-h1:          56px;
  --type-h2:          40px;
  --type-h3:          28px;
  --type-subhead:     20px;   /* Helvena Black sub-headings */
  --type-eyebrow:     11px;   /* small all-caps labels */
  --type-body:        16px;
  --type-body-lg:     18px;
  --type-small:       13px;
  --type-micro:       10px;

  /* ---------- Type behavior ---------- */
  --tracking-tight:    -0.025em;  /* large display — tight, but readable */
  --tracking-snug:     -0.015em;  /* mid display */
  --tracking-normal:    0em;
  --tracking-wide:     0.08em;    /* eyebrows, tabs */
  --tracking-xwide:    0.16em;    /* micro labels, tags */

  --leading-display:   0.88;
  --leading-tight:     1.05;
  --leading-snug:      1.2;
  --leading-body:      1.5;
  --leading-loose:     1.65;

  /* ---------- Spacing (8-pt base, with intentional architectural gaps) ---------- */
  --space-0:   0px;
  --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;

  /* ---------- Layout ---------- */
  --gutter:           24px;
  --page-pad:         48px;
  --page-pad-tight:   24px;
  --max-content:      1440px;

  /* ---------- Radii (mostly square, rare soft corner) ---------- */
  --radius-0:   0px;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hair:   1px solid var(--hairline);
  --border-line:   1px solid var(--hairline-strong);
  --border-ink:    1px solid var(--fg);

  /* ---------- Shadows (used sparingly) ---------- */
  --shadow-soft:  0 1px 0 rgba(0,0,3,.05), 0 8px 24px -12px rgba(0,0,3,.18);
  --shadow-card:  0 1px 0 rgba(0,0,3,.04), 0 24px 60px -28px rgba(0,0,3,.32);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);     /* smooth, decelerating */
  --ease-in-out: cubic-bezier(.7, 0, .3, 1);     /* cinematic */
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
  --dur-xslow:  900ms;
}

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — After, ALL CAPS, very tight */
.jmdw-display-1,
.jmdw-hero {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-display);
  color: var(--fg);
}
.jmdw-hero       { font-size: var(--type-hero); }
.jmdw-display-1  { font-size: var(--type-display-1); }
.jmdw-display-2  { font-family: var(--font-display);
                   font-weight: 400;
                   text-transform: uppercase;
                   letter-spacing: var(--tracking-snug);
                   line-height: var(--leading-tight);
                   font-size: var(--type-display-2); }

/* Subheadings — Helvena Black */
.jmdw-subhead {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: var(--type-subhead);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

/* Eyebrows / page tabs / small labels — Helvena, tracked out */
.jmdw-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-xwide);
  color: var(--fg-2);
}
.jmdw-tab {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg);
}

/* Body */
.jmdw-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--fg);
}
.jmdw-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body-lg);
  line-height: var(--leading-loose);
  color: var(--fg);
  max-width: 56ch;
}
.jmdw-small  {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-small);
  color: var(--fg-2);
}
.jmdw-micro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-xwide);
  color: var(--fg-mute);
}

/* Accent / emphasis */
.jmdw-emph {
  color: var(--accent);
}
.jmdw-rule  {
  display: block;
  height: 1px;
  background: var(--fg);
  border: 0;
  width: 100%;
}
.jmdw-rule--hair { background: var(--hairline); }

/* Standard tag aliases — convenient drop-in */
h1, .h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: var(--leading-display); font-size: var(--type-display-1); }
h2, .h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-snug);  line-height: var(--leading-tight);  font-size: var(--type-display-2); }
h3, .h3 { font-family: var(--font-sans);    font-weight: 900; line-height: var(--leading-snug); font-size: var(--type-h3); }
h4, .h4 { font-family: var(--font-sans);    font-weight: 900; line-height: var(--leading-snug); font-size: var(--type-subhead); }
p       { font-family: var(--font-sans); font-weight: 400; line-height: var(--leading-body); }
small   { font-size: var(--type-small); color: var(--fg-2); }

/* ============================================================
   BOUNDLESS DESIGNS — dark sub-theme
   Apply with class="bd-theme" on a root container.
   ============================================================ */
.bd-theme {
  background: var(--bd-bg);
  color: var(--bd-fg);
  --bg: var(--bd-bg);
  --bg-soft: var(--bd-bg-2);
  --fg: var(--bd-fg);
  --fg-2: rgba(239, 233, 216, 0.62);
  --fg-mute: rgba(239, 233, 216, 0.42);
  --hairline: rgba(239, 233, 216, 0.12);
  --hairline-strong: rgba(239, 233, 216, 0.28);
}