/* === tokens/fonts.css === */
/* =====================================================================
   FONTS — Shelton Furr Photography
   Display serif = Cormorant Garamond · Sans = Jost. Both Google Fonts —
   exact brand match (see brand/fonts.md). Loaded from Google's CDN so the
   webfont @font-face rules ship to consumers automatically.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

/* === tokens/colors.css === */
/* =====================================================================
   COLORS — Shelton Furr Photography
   A warm-neutral, light-and-airy foundation pulled from Shelton's own
   editing — soft creams, warm sand, gentle sage, a quiet clay accent —
   so her imagery stays the hero and the site never reads like a template.
   ===================================================================== */
:root {
  /* ---- Base neutrals (warm whites → warm near-black) ---- */
  --sf-alabaster: #FAF6F0;   /* warm off-white — page background */
  --sf-ivory:     #F3ECE2;   /* section bands / cards / secondary surface */
  --sf-sand:      #E7DCCD;   /* dividers, borders, hover fills */
  --sf-greige:    #C8BBA9;   /* hairlines, muted UI lines */

  /* ---- Ink (warm, never pure black) ---- */
  --sf-espresso:  #2B2620;   /* headings — warm near-black */
  --sf-ink:       #3D372F;   /* primary body text */
  --sf-stone:     #6B6155;   /* captions / muted text */

  /* ---- Accents (use sparingly — clay is a whisper) ---- */
  --sf-clay:      #B07A5B;   /* primary accent — underlines, hovers, flourishes */
  --sf-clay-deep: #8A5536;   /* AA-safe accent TEXT variant */
  --sf-sage:      #8D9A82;   /* secondary accent — optional organic touch */

  /* ---- Scrim / overlay (text over imagery) ---- */
  --sf-scrim-soft:   rgba(43, 38, 32, 0.28);  /* light veil — keeps photo bright */
  --sf-scrim-strong: rgba(43, 38, 32, 0.50);  /* bottom-weighted text protection */
  --sf-scrim-flat:   rgba(43, 38, 32, 0.40);  /* even veil for feature bands */
  --sf-on-dark:      #F4ECE2;  /* warm cream text over photos/footer */

  /* ---------------------------------------------------------------
     SEMANTIC ALIASES — what components actually reference
     --------------------------------------------------------------- */
  --sf-bg:            var(--sf-alabaster);
  --sf-surface:       var(--sf-ivory);
  --sf-surface-deep:  var(--sf-sand);
  --sf-text:          var(--sf-ink);
  --sf-text-muted:    var(--sf-stone);
  --sf-heading:       var(--sf-espresso);
  --sf-border:        var(--sf-sand);
  --sf-hairline:      var(--sf-greige);
  --sf-accent:        var(--sf-clay);
  --sf-accent-text:   var(--sf-clay-deep);

  /* Links — ink text with a clay underline */
  --sf-link:           var(--sf-ink);
  --sf-link-underline: var(--sf-clay);
  --sf-link-hover:     var(--sf-clay-deep);

  /* Buttons — espresso fill + alabaster text */
  --sf-button-bg:       var(--sf-espresso);
  --sf-button-text:     var(--sf-alabaster);
  --sf-button-bg-hover: var(--sf-clay-deep);

  /* Focus ring */
  --sf-focus: var(--sf-clay-deep);
}

/* === tokens/typography.css === */
/* =====================================================================
   TYPOGRAPHY — Shelton Furr Photography
   Display serif (Cormorant Garamond) for headings + wordmark; quiet sans
   (Jost) for nav, labels, buttons, captions, body. Editorial, timeless.
   ===================================================================== */
:root {
  /* ---- Families ---- */
  --sf-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sf-font-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* ---- Fluid display scale (desktop → mobile, ~20–25% down) ---- */
  --sf-display: clamp(2.6rem, 1.6rem + 4vw, 5rem); /* @kind other */
  --sf-h1:      clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* @kind other */
  --sf-h2:      clamp(2rem, 1.4rem + 2.2vw, 3rem); /* @kind other */
  --sf-h3:      clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem); /* @kind other */

  /* ---- Body + small ---- */
  --sf-body:  1.0625rem; /* @kind other */
  --sf-lead:  1.15rem;   /* @kind other */
  --sf-small: 0.8rem;    /* @kind other */
  --sf-eyebrow-size: 0.72rem; /* @kind other */

  /* ---- Weights ---- */
  --sf-w-light:   300; /* @kind other */
  --sf-w-regular: 400; /* @kind other */
  --sf-w-medium:  500; /* @kind other */
  --sf-w-semi:    600; /* @kind other */

  /* ---- Line heights ---- */
  --sf-lh-display: 1.12; /* @kind other */
  --sf-lh-heading: 1.18; /* @kind other */
  --sf-lh-body:    1.7;  /* @kind other */

  /* ---- Tracking ---- */
  --sf-track-display: -0.005em; /* @kind other */
  --sf-track-label:   0.16em;   /* @kind other */
  --sf-track-eyebrow: 0.24em;   /* @kind other */
  --sf-track-wordmark: 0.14em;  /* @kind other */

  /* ---- Measure (controlled line length) ---- */
  --sf-measure: 66ch; /* @kind other */
}

/* === tokens/spacing.css === */
/* =====================================================================
   SPACING, RHYTHM & SURFACES — Shelton Furr Photography
   One consistent vertical spacing scale; calm, confident white space.
   Editorial restraint: square corners, hairline borders, almost no shadow.
   ===================================================================== */
:root {
  /* ---- Spacing scale (1 unit = 0.25rem / 4px) ---- */
  --sf-space-1:  0.25rem;
  --sf-space-2:  0.5rem;
  --sf-space-3:  0.75rem;
  --sf-space-4:  1rem;
  --sf-space-5:  1.5rem;
  --sf-space-6:  2rem;
  --sf-space-7:  3rem;
  --sf-space-8:  4rem;
  --sf-space-9:  6rem;

  /* Fluid section padding (vertical rhythm) + gutter */
  --sf-section:  clamp(3.5rem, 8vw, 7rem); /* @kind spacing */
  --sf-gap:      clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --sf-gutter:   clamp(1.1rem, 3vw, 2.2rem); /* @kind spacing */

  /* ---- Layout widths ---- */
  --sf-maxw:    1240px;   /* main content cap */
  --sf-narrow:  720px;    /* prose / centered copy measure */

  /* ---- Corners — editorial = square. Forms/images = 0. ---- */
  --sf-radius-none: 0;
  --sf-radius-xs:   2px;   /* tiny chips / preview tags only */

  /* ---- Borders / hairlines ---- */
  --sf-border-w:   1px;
  --sf-border:     1px solid var(--sf-sand);
  --sf-hairline-rule: 1px solid var(--sf-greige);

  /* ---- Shadow — kept barely-there; imagery carries depth, not boxes ---- */
  --sf-shadow-none: none;
  --sf-shadow-soft: 0 4px 14px rgba(43, 38, 32, 0.08);   /* rare — lightbox/preview chrome */
  --sf-shadow-text: 0 2px 24px rgba(0, 0, 0, 0.28);      /* hero headline over photo */

  /* ---- Aspect ratios for art-directed imagery ---- */
  --sf-ratio-portrait:  3 / 4; /* @kind other */
  --sf-ratio-landscape: 4 / 3; /* @kind other */
  --sf-ratio-wide:      3 / 2; /* @kind other */
  --sf-ratio-square:    1 / 1; /* @kind other */

  /* ---- Motion — so subtle it reads as life, not animation ---- */
  --sf-ease:        cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --sf-dur-fast:    0.2s; /* @kind other */
  --sf-dur-base:    0.3s; /* @kind other */
  --sf-dur-slow:    0.6s; /* @kind other */
  --sf-dur-reveal:  0.9s; /* @kind other */
  --sf-dur-kenburns: 20s; /* @kind other */
}

/* === tokens/base.css === */
/* =====================================================================
   BASE — Shelton Furr Photography
   Element defaults + a few brand helper classes. References tokens only.
   Photo-forward: imagery is the product, the interface stays quiet.
   ===================================================================== */

body {
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--sf-font-sans);
  font-size: var(--sf-body);
  line-height: var(--sf-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font-display);
  color: var(--sf-heading);
  font-weight: var(--sf-w-medium);
  line-height: var(--sf-lh-heading);
  letter-spacing: var(--sf-track-display);
  text-wrap: balance;
  margin: 0 0 var(--sf-space-2);
}
h1 { font-size: var(--sf-h1); line-height: var(--sf-lh-display); }
h2 { font-size: var(--sf-h2); }
h3 { font-size: var(--sf-h3); font-weight: var(--sf-w-semi); }

p { margin: 0 0 var(--sf-space-4); max-width: var(--sf-measure); }
p.sf-muted, .sf-muted { color: var(--sf-text-muted); }

em, .sf-italic { font-style: italic; }

/* Body links — ink text with an animated clay underline (accessible + pretty) */
a {
  color: var(--sf-link);
  text-decoration: none;
  background-image: linear-gradient(var(--sf-link-underline), var(--sf-link-underline));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size var(--sf-dur-base) var(--sf-ease), color var(--sf-dur-fast) var(--sf-ease);
}
a:hover { color: var(--sf-link-hover); background-size: 100% 1.5px; }

/* ---- Helper classes ---- */
.sf-eyebrow {
  display: block;
  font-family: var(--sf-font-sans);
  text-transform: uppercase;
  letter-spacing: var(--sf-track-eyebrow);
  font-size: var(--sf-eyebrow-size);
  font-weight: var(--sf-w-medium);
  color: var(--sf-accent-text);
  margin-bottom: var(--sf-space-4);
}

.sf-wrap   { max-width: var(--sf-maxw); margin-inline: auto; padding-inline: var(--sf-gutter); }
.sf-narrow { max-width: var(--sf-narrow); }
.sf-band   { background: var(--sf-surface); }
.sf-section { padding-block: var(--sf-section); }

/* Thin decorative rule */
.sf-rule { width: 48px; height: 1px; background: var(--sf-greige); border: 0; margin: var(--sf-space-5) 0; }

/* Accessibility */
:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; }

@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;
  }
}