/* =========================================================
   Swaze Design System — Core Tokens
   Stijn Zwaard, design engineer · "Building with intent."
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/PublicSans-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/PublicSans-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/PublicSans-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/PublicSans-Italic-VariableFont_wght.ttf") format("truetype");
}

:root {
  /* -----------------------------------------------------
     COLOR · Ink (dark, warm-cool with green cast)
     ----------------------------------------------------- */
  --ink-100: #4A5450;
  --ink-200: #2A302E;
  --ink-300: #1A1F1D;   /* base */
  --ink-400: #0F1413;
  --ink-500: #050807;

  /* -----------------------------------------------------
     COLOR · Cream (light, warm — never pure white)
     ----------------------------------------------------- */
  --cream-50:  #FFFEFB;
  --cream-100: #FBF8F0;
  --cream-200: #F5EFDF;   /* base background */
  --cream-300: #EBE2CB;

  /* -----------------------------------------------------
     COLOR · Teal (accent on dark only)
     ----------------------------------------------------- */
  --teal-400: #2A8E8C;
  --teal-500: #00786E;   /* base */
  --teal-600: #005C55;
  --teal-700: #00443F;

  /* -----------------------------------------------------
     COLOR · Red (rare oxblood emphasis — 3% only)
     ----------------------------------------------------- */
  --red-500: #A8201A;
  --red-600: #8C1814;

  /* -----------------------------------------------------
     SEMANTIC · Surfaces
     Backgrounds: cream-200 or ink-300 only.
     ----------------------------------------------------- */
  --surface:           var(--cream-200);
  --surface-raised:    var(--cream-100);
  --surface-sunken:    var(--cream-300);
  --surface-dark:      var(--ink-300);
  --surface-dark-raised: var(--ink-200);
  --surface-dark-sunken: var(--ink-400);

  /* -----------------------------------------------------
     SEMANTIC · Foreground (text + line)
     ----------------------------------------------------- */
  --fg-1:       var(--ink-300);         /* primary text on cream */
  --fg-2:       var(--ink-200);         /* secondary */
  --fg-3:       var(--ink-100);         /* tertiary, meta */
  --fg-on-dark: var(--cream-100);       /* primary text on ink */
  --fg-on-dark-2: rgba(251, 248, 240, 0.66);
  --fg-on-dark-3: rgba(251, 248, 240, 0.42);

  /* -----------------------------------------------------
     SEMANTIC · Accent
     teal is for dark surfaces only. red is single-use.
     ----------------------------------------------------- */
  --accent:           var(--teal-500);
  --accent-hover:     var(--teal-400);
  --accent-press:     var(--teal-600);
  --emphasis:         var(--red-500);    /* one moment per page */
  --emphasis-hover:   var(--red-600);

  /* -----------------------------------------------------
     SEMANTIC · Lines and rules
     ----------------------------------------------------- */
  --rule-on-cream:    rgba(26, 31, 29, 0.14);
  --rule-on-cream-strong: rgba(26, 31, 29, 0.28);
  --rule-on-dark:     rgba(251, 248, 240, 0.14);
  --rule-on-dark-strong: rgba(251, 248, 240, 0.28);

  /* -----------------------------------------------------
     TYPE · Family stacks
     ----------------------------------------------------- */
  --font-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -----------------------------------------------------
     TYPE · Weights
     ----------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* -----------------------------------------------------
     TYPE · Scale
     ----------------------------------------------------- */
  --size-tiny:  10px;     /* mono */
  --size-meta:  11px;     /* mono labels */
  --size-body:  15px;     /* default body */
  --size-h6:    14px;
  --size-h5:    16px;
  --size-h4:    20px;
  --size-h3:    24px;
  --size-h2:    32px;
  --size-h1:    40px;
  --size-h1-fluid: clamp(32px, 4.8vw, 56px);
  --size-h2-fluid: clamp(26px, 3.2vw, 40px);

  /* -----------------------------------------------------
     TYPE · Line-height, tracking
     ----------------------------------------------------- */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-mono:    0.02em;
  --tracking-meta:    0.08em;   /* UPPER mono meta */
  --tracking-display: -0.05em;  /* big display crunches in */
  --tracking-body:    0em;

  /* -----------------------------------------------------
     SPACING · 4px base grid
     ----------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -----------------------------------------------------
     RADII · Restrained. Never pill-shapes on big surfaces.
     ----------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;   /* tags and chips only */

  /* -----------------------------------------------------
     SHADOW · Ambient soft only. No drop shadows.
     ----------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(26, 31, 29, 0.06);
  --shadow-2: 0 1px 2px rgba(26, 31, 29, 0.05), 0 8px 24px -16px rgba(26, 31, 29, 0.18);
  --shadow-inset: inset 0 0 0 1px var(--rule-on-cream);
  --shadow-inset-dark: inset 0 0 0 1px var(--rule-on-dark);

  /* -----------------------------------------------------
     MOTION · Fast start, slow end. No bounce. No springs.
     ----------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick:  180ms;
  --dur-base:   320ms;
  --dur-medium: 520ms;
  --dur-long:   720ms;

  /* -----------------------------------------------------
     LAYOUT
     ----------------------------------------------------- */
  --container-max:   1240px;
  --container-text:  680px;
  --gutter:          clamp(20px, 4vw, 48px);

  /* -----------------------------------------------------
     TEXTURE · subtle film grain overlay
     ----------------------------------------------------- */
  --grain-opacity: 0.05;
}

/* =========================================================
   ELEMENT DEFAULTS
   ========================================================= */

html {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--fg-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11";
}

/* Headings ------------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--size-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--size-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--size-h3);
  line-height: var(--leading-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h4);
  line-height: var(--leading-snug);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h5);
  line-height: var(--leading-snug);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h6);
  line-height: var(--leading-snug);
  margin: 0;
}

p {
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

/* Mono meta — used for labels, captions, coordinates */
.meta, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-mono);
}

.meta--upper {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

.tiny {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  letter-spacing: var(--tracking-mono);
}

/* Selection ----------------------------------------------- */
::selection {
  background: var(--ink-300);
  color: var(--cream-100);
}

/* =========================================================
   UTILITY · film grain overlay
   add <div class="grain"></div> as a sibling, or apply to ::after
   ========================================================= */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =========================================================
   DARK-SURFACE CONTEXT
   wrap any region in .on-dark to flip foreground colors.
   ========================================================= */
.on-dark {
  color: var(--fg-on-dark);
  background: var(--surface-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3,
.on-dark h4, .on-dark h5, .on-dark h6 {
  color: var(--fg-on-dark);
}
.on-dark .accent { color: var(--accent); }
.on-dark .meta--upper { color: var(--fg-on-dark-3); }