/* =========================================================================
   Trevor Lewis Photography — Design Tokens
   Base + semantic CSS variables for color, type, layout, motion.
   Import once at the top of every page.
   ========================================================================= */

/* ---- Webfonts ---------------------------------------------------------- */
/* Both families served from local brand-supplied variable font files.     */

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

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

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

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

:root {
  /* ---- Color: base ----------------------------------------------------- */
  --paper:        #E8E1D0;            /* warm cream — only light bg */
  --paper-deep:   #DDD3BC;            /* slightly darker paper for accents */
  --ink:          #14110D;            /* near-black — primary type, dark sections */
  --ink-soft:     #2E2A22;            /* body text alternative */
  --ink-mute:     #5A5447;            /* captions, plate numbers, meta */
  --rust:         #A03D1F;            /* signature accent — italics, hovers, links */
  --ochre:        #B8842B;            /* secondary accent — dark sections only */
  --rule:         rgba(20, 17, 13, 0.15); /* hairline borders */

  /* ---- Color: semantic ------------------------------------------------- */
  --bg:           var(--paper);
  --bg-deep:      var(--paper-deep);
  --bg-dark:      var(--ink);
  --fg:           var(--ink);
  --fg-soft:      var(--ink-soft);
  --fg-mute:      var(--ink-mute);
  --fg-on-dark:   var(--paper);
  --accent:       var(--rust);
  --accent-dark:  var(--ochre);
  --link:         var(--ink);
  --link-hover:   var(--rust);
  --border:       var(--rule);

  /* ---- Typography: families ------------------------------------------- */
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-serif);
  --font-body:    var(--font-serif);
  --font-label:   var(--font-mono);

  /* ---- Typography: variation defaults --------------------------------- */
  --opsz-display: "opsz" 144;
  --opsz-text:    "opsz" 14;

  /* ---- Type scale (clamp, fluid) -------------------------------------- */
  --fs-hero:        clamp(3.5rem, 11vw, 10rem);     /* homepage hero */
  --fs-cover:       clamp(4rem,   11vw, 10rem);     /* portfolio cover */
  --fs-h2:          clamp(2.5rem, 5vw,  4.5rem);    /* section h2 */
  --fs-feature:     clamp(2.5rem, 4.5vw, 4rem);     /* portfolio feature title */
  --fs-blurb:       clamp(1.4rem, 2.4vw, 2.1rem);   /* manifesto body */
  --fs-plate-title: 1rem;                            /* plate caption italic */
  --fs-body:        0.95rem;                         /* mono body, rare */
  --fs-label:       0.7rem;                          /* uppercase labels */
  --fs-label-sm:    0.65rem;                         /* plate numbers, meta */

  /* ---- Line height & tracking ----------------------------------------- */
  --lh-hero:        0.88;
  --lh-display:     0.95;
  --lh-blurb:       1.35;
  --lh-body:        1.55;
  --tr-hero:        -0.035em;
  --tr-display:     -0.025em;
  --tr-label:       0.2em;
  --tr-label-wide:  0.3em;

  /* ---- Layout --------------------------------------------------------- */
  --max-w:          90rem;          /* 1440px */
  --max-prose:      38rem;          /* prose max line length */
  --pad-page:       2.5rem;         /* desktop page padding */
  --pad-page-sm:    1.25rem;        /* mobile page padding */
  --grid-cols:      12;
  --gap-x:          1.5rem;
  --gap-y:          4rem;
  --shift-down:     5rem;           /* editorial rhythm offset */
  --bp:             900px;

  /* ---- Motion --------------------------------------------------------- */
  --ease:           cubic-bezier(.22, .61, .36, 1);
  --dur-hover:      0.3s;
  --dur-hover-long: 0.7s;
  --dur-reveal:     1.1s;
  --dur-reveal-slow:1.4s;
  --dur-zoom:       1.4s;

  /* ---- Misc ----------------------------------------------------------- */
  --grain-opacity:  0.22;
  --hairline:       1px;
}

/* =========================================================================
   Semantic element styles — drop-in for a base layer.
   Pages can rely on these without further setup.
   ========================================================================= */

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: var(--lh-body);
}

/* Paper-grain overlay — non-negotiable brand texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: multiply;
}

/* ---- Headings -------------------------------------------------------- */

h1, .h-hero {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-variation-settings: var(--opsz-display);
  margin: 0;
}

h2, .h-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
}

h3, .h-feature {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-feature);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin: 0;
}

/* ---- Body & prose ---------------------------------------------------- */

p, .p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-blurb);
  line-height: var(--lh-blurb);
  max-width: var(--max-prose);
  margin: 0 0 1.2em;
  text-wrap: pretty;
}

.p--small {
  font-size: 1rem;
  line-height: 1.6;
}

/* Italics are signature: rust by default inside titles + emphasized prose */
em, i, .em {
  font-style: italic;
  color: var(--rust);
}

/* ---- Mono / labels --------------------------------------------------- */

.label,
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.label--wide {
  letter-spacing: var(--tr-label-wide);
}

.meta,
.plate-no {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
}

/* ---- Links ----------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}
a:hover { color: var(--link-hover); }

/* ---- Rule / hairline ------------------------------------------------- */

hr, .rule {
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  margin: 2rem 0;
}

/* ---- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}