/* ============================================================
   NICOLE BELTON — Design Foundations
   styles.css · Volume 01 · 2026
   Design + Fine Art — quiet, considered, all grey with one blue accent.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Helvetica Now Display";
  src: url("fonts/HelveticaNowDisplay-Th.ttf") format("truetype"),
       url("fonts/HelveticaNowDisplay-Th.otf") format("opentype");
  font-weight: 100; /* Thin — the only weight we ship for display */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src: url("fonts/InclusiveSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700; /* variable: Light → Bold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inclusive Sans";
  src: url("fonts/InclusiveSans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inclusive Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---------- PRIMARY PALETTE ---------- */
  /* Four colors do almost all the work. */
  --gallery-blue: #328BDD;  /* PMS 279 — the single accent, the open sky */
  --ink:         #242021;  /* PMS Black — type, wordmark, structure */
  --mist:        #D9E0E8;  /* PMS 649 — the gallery wall ground */
  --paper:       #FFFFFF;  /* the breathing room */

  /* ---------- ACCENT PALETTE ---------- */
  /* Used sparingly. One at a time. Never together. */
  --signal: #FC691C;  /* PMS 1655 */
  --amber:  #F68B29;  /* PMS 715  */
  --ochre:  #BA4802;  /* PMS 1525 */
  --clay:   #C8813F;  /* PMS 722  */
  --bronze: #9B582D;  /* PMS 7516 */
  --lime:   #92D50B;  /* PMS 375  */
  --spring: #3CB67B;  /* PMS 7479 */
  --pine:   #0E855D;  /* PMS 7725 */

  /* ---------- GRADIENTS ---------- */
  /* Quiet grounds only. Never behind text. */
  --grad-ascent:   linear-gradient(135deg, #328BDD 0%, #D9E0E8 100%); /* @kind color */ /* 279 → 649 */
  --grad-depth:    linear-gradient(135deg, #328BDD 0%, #242021 100%); /* @kind color */ /* 279 → Black */
  --grad-daybreak: linear-gradient(135deg, #FC691C 0%, #F68B29 100%); /* @kind color */ /* 1655 → 715 */
  --grad-meadow:   linear-gradient(135deg, #92D50B 0%, #0E855D 100%); /* @kind color */ /* 375 → 7725 */

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg:            var(--paper);   /* default page ground */
  --bg-alt:        var(--mist);    /* sectioned / gallery ground */
  --fg1:           var(--ink);     /* primary type */
  --fg2:           #5C5759;        /* secondary type — ink at ~75% */
  --fg3:           #8C8789;        /* tertiary / captions / meta */
  --accent:        var(--gallery-blue);
  --accent-ink:    #1E6FBE;        /* blue pressed/darker */
  --line:          #E4E8ED;        /* hairline dividers on paper */
  --line-strong:   #C3CCD6;        /* dividers on mist */
  --on-accent:     var(--paper);   /* type on gallery blue */
  --on-ink:        var(--paper);   /* type on ink */

  /* ---------- TYPE SCALE ---------- */
  /* Derived from the printed scale (display 30 / h1 20 / h2 12 / body 9 /
     caption 7.5 / label 6.5 pt), translated to a fluid screen scale.    */
  --fs-display: clamp(3rem, 6vw, 5.5rem);   /* @kind font */ /* hero names, tagline */
  --fs-h1:      clamp(2rem, 3.5vw, 3rem);   /* @kind font */
  --fs-h2:      clamp(1.5rem, 2.2vw, 2rem); /* @kind font */
  --fs-h3:      1.25rem;     /* @kind font */
  --fs-body:    1.0625rem;   /* @kind font */ /* 17px */
  --fs-small:   0.9375rem;   /* @kind font */ /* 15px */
  --fs-caption: 0.8125rem;   /* @kind font */ /* 13px */
  --fs-label:   0.6875rem;   /* @kind font */ /* 11px — tracked caps */

  /* ---------- TRACKING ---------- */
  --track-logo:  0.14em;   /* @kind font */ /* monogram spec */
  --track-label: 0.22em;   /* @kind font */ /* tracked caps labels (as seen throughout guide) */
  --track-tight: -0.01em;  /* @kind font */ /* large display */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display: 1.04;   /* @kind font */
  --lh-heading: 1.12;   /* @kind font */
  --lh-body:    1.6;     /* @kind font */

  /* ---------- SPACING (8pt base, generous) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;   /* section air — space is the statement */

  /* ---------- RADII ---------- */
  /* Restrained. Edges are mostly square; radius is a whisper. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Shadows are soft, cool and rare. The page is a gallery wall. */
  --shadow-sm: 0 1px 2px rgba(36, 32, 33, 0.04);
  --shadow-md: 0 8px 30px rgba(36, 32, 33, 0.07);
  --shadow-lg: 0 24px 70px rgba(36, 32, 33, 0.10);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */ /* calm, no bounce */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 280ms;       /* @kind other */
  --dur-slow: 600ms;  /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these classes (or copy the rules) for consistent type.
   ============================================================ */

.nta-display {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

h1, .nta-h1 {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}

h2, .nta-h2 {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg1);
}

h3, .nta-h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg1);
}

p, .nta-body {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.nta-lead {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--fg1);
}

.nta-caption {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg3);
}

/* Tracked caps — the workhorse label style across the brand */
.nta-label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg3);
}

/* The monogram lockup, type-only per spec */
.nta-mark {
  font-family: var(--font-display);
  font-weight: 100;
  letter-spacing: var(--track-logo);
  color: var(--ink);
}