/* ============================================================
   RACHEL STARK VIDEOGRAPHY — Design Tokens
   Volume One · v1.0 · Issued April 2026
   ============================================================ */

/* -- Web fonts -----------------------------------------------
   EB Garamond is self-hosted from /fonts (brand-supplied TTFs).
   Inter (utility-only — eyebrows, metadata, nav) is still pulled
   from Google Fonts as no brand cut was supplied.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* ===== COLOR — warm-neutral palette, no chromatic accent ===== */

  /* Base */
  --white:    #FFFFFF;   /* optional cool surface — use sparingly */
  --offwhite: #FAFAF7;   /* primary background — almost white, a touch warm */
  --bone:     #F4F0E8;   /* secondary editorial background */
  --paper: #EAE5DA;   /* secondary background */
  --mist:  #C8C2B5;   /* dividers / UI lines */
  --stone: #8B8579;   /* eyebrows / meta */
  --slate: #524F4A;   /* body / secondary */
  --ink:   #1C1B19;   /* primary type */

  /* Semantic surfaces */
  --bg:           var(--offwhite);
  --bg-secondary: var(--bone);
  --bg-inverse:   var(--ink);

  /* Semantic text */
  --fg-1:        var(--ink);    /* primary */
  --fg-2:        var(--slate);  /* secondary / body */
  --fg-3:        var(--stone);  /* tertiary, eyebrows, metadata */
  --fg-on-dark:  var(--bone);

  /* Lines & dividers */
  --rule:        var(--mist);
  --rule-strong: var(--stone);

  /* ===== TYPE FAMILIES ===== */
  --font-serif:  'EB Garamond', 'Garamond', 'Adobe Garamond Pro', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   ui-monospace, 'SF Mono', Menlo, monospace;

  /* ===== TYPE SCALE — exact spec from style guide ===== */
  /* Display */
  --type-display-1:  italic 400 80px/1.05  var(--font-serif);
  --type-display-2:  italic 400 56px/1.15 var(--font-serif);

  /* Headings */
  --type-h1:         400 36px/1.2   var(--font-serif);
  --type-h2:         700 26px/1.3   var(--font-serif);
  --type-h3:         italic 500 22px/1.35 var(--font-serif);

  /* Body & captions */
  --type-body:       400 18px/1.7   var(--font-serif);
  --type-body-sm:    400 16px/1.65  var(--font-serif);
  --type-caption:    italic 400 14px/1.5 var(--font-serif);

  /* Utility (Inter) */
  --type-eyebrow:    500 11.5px/1   var(--font-sans);
  --type-meta:       400 11px/1.4   var(--font-sans);
  --type-nav:        500 13px/1     var(--font-sans);

  --tracking-eyebrow: 0.36em;
  --tracking-meta:    0.22em;
  --tracking-nav:     0.18em;

  /* ===== SPACING — generous, editorial rhythm ===== */
  --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;

  /* ===== BORDERS / RADII — almost none ===== */
  --radius-none: 0;
  --radius-sm:   2px;   /* the most we ever round */
  --radius-pill: 999px; /* reserved for the very rare chip */

  --border-hairline: 1px solid var(--rule);
  --border-strong:   1px solid var(--ink);

  /* ===== SHADOWS — used sparingly. Editorial paper shadow. ===== */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(28, 27, 25, 0.06);
  --shadow-md:   0 8px 24px -12px rgba(28, 27, 25, 0.18);
  --shadow-lg:   0 24px 60px -24px rgba(28, 27, 25, 0.28);

  /* ===== MOTION ===== */
  --ease-quiet:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-1:  160ms;
  --duration-2:  320ms;
  --duration-3:  640ms;
}

/* ===== BASE / SEMANTIC ELEMENTS =====
   Drop colors_and_type.css onto any page and HTML elements
   take their styling automatically. */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--bone); }

h1 { font: var(--type-display-1); letter-spacing: -0.01em; margin: 0; color: var(--fg-1); }
h2 { font: var(--type-h1);        letter-spacing: -0.005em; margin: 0; color: var(--fg-1); }
h3 { font: var(--type-h2);        margin: 0; color: var(--fg-1); }
h4 { font: var(--type-h3);        margin: 0; color: var(--fg-1); }

p  { font: var(--type-body); color: var(--fg-2); margin: 0 0 1em; max-width: 62ch; }
small, .meta { font: var(--type-meta); letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--fg-3); }

em, i { font-style: italic; }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--duration-1) var(--ease-quiet),
              color        var(--duration-1) var(--ease-quiet);
}
a:hover { border-bottom-color: var(--ink); color: var(--ink); }

hr { border: 0; border-top: var(--border-hairline); margin: var(--space-7) 0; }

/* ===== UTILITY CLASSES ===== */
.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-block;
}

.display-1 { font: var(--type-display-1); letter-spacing: -0.01em; }
.display-2 { font: var(--type-display-2); }

.caption   { font: var(--type-caption); color: var(--fg-3); }

/* "On dark" inversion for ink backgrounds */
.on-ink {
  background: var(--ink);
  color: var(--fg-on-dark);
}
.on-ink p, .on-ink h1, .on-ink h2, .on-ink h3 { color: var(--bone); }
.on-ink .eyebrow, .on-ink .caption, .on-ink small { color: var(--mist); }
.on-ink a { border-bottom-color: var(--stone); }
.on-ink a:hover { color: var(--bone); border-bottom-color: var(--bone); }