/* =====================================================================
   Samuel Doane Portfolio - Design Foundations
   Photography-first, gallery-quiet. One accent (Action Blue).
   SF Pro Display / Text via the Apple system stack; Inter as the
   cross-platform web fallback (loaded from Google Fonts).
   ===================================================================== */

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

:root {
  /* ---- Font families -------------------------------------------------
     On Apple platforms -apple-system resolves to the real SF Pro.
     Inter is the closest open fallback everywhere else. */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-text:    "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  /* =========================== COLOR ================================= */
  /* Brand & accent - the single interactive color */
  --primary:          #0066cc;  /* Action Blue - every link & CTA  */
  --primary-focus:    #0071e3;  /* focus ring */
  --primary-on-dark:  #2997ff;  /* Sky Link Blue - links on dark tiles */

  /* Text / ink */
  --ink:           #1d1d1f;  /* headlines + body on light */
  --body:          #1d1d1f;
  --body-on-dark:  #ffffff;
  --body-muted:    #cccccc;  /* secondary copy on dark */
  --ink-muted-80:  #333333;  /* body on pearl button */
  --ink-muted-48:  #7a7a7a;  /* disabled + legal fine print */

  /* Surfaces */
  --canvas:            #ffffff;  /* dominant light canvas */
  --canvas-parchment:  #f5f5f7;  /* signature off-white */
  --surface-pearl:     #fafafc;  /* ghost-button fill */
  --surface-tile-1:    #272729;  /* primary dark tile */
  --surface-tile-2:    #2a2a2c;  /* micro-lighter dark */
  --surface-tile-3:    #252527;  /* micro-darker dark */
  --surface-black:     #000000;  /* global nav, true void */
  --surface-chip:      #d2d2d7;  /* translucent chip base (≈64% alpha) */

  /* On-color */
  --on-primary: #ffffff;
  --on-dark:    #ffffff;

  /* Hairlines & dividers */
  --divider-soft: #f0f0f0;            /* soft ring on secondary buttons */
  --hairline:     #e0e0e0;            /* 1px card / chip border */
  --hairline-a:   rgba(0,0,0,0.08);   /* applied hairline (inputs, cards) */

  /* =========================== RADII ================================= */
  --radius-none: 0px;
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   11px;
  --radius-lg:   18px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* =========================== SPACING =============================== */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  17px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* =========================== ELEVATION ============================= */
  /* The ONE shadow in the system - for product/work imagery only. */
  --shadow-product: rgba(0,0,0,0.22) 3px 5px 30px 0;
  /* Functional frosted glass for sticky bars / sub-nav */
  --blur-frosted: saturate(180%) blur(20px);

  /* =========================== TYPE SCALE ============================ */
  /* size / weight / line-height / letter-spacing */
  --hero-display-size: 56px;  --hero-display-weight: 600; --hero-display-lh: 1.07; --hero-display-ls: -0.28px;
  --display-lg-size:   40px;  --display-lg-weight:   600; --display-lg-lh:   1.10; --display-lg-ls:   0;
  --display-md-size:   34px;  --display-md-weight:   600; --display-md-lh:   1.47; --display-md-ls:   -0.374px;
  --lead-size:         28px;  --lead-weight:         400; --lead-lh:         1.14; --lead-ls:         0.196px;
  --lead-airy-size:    24px;  --lead-airy-weight:    300; --lead-airy-lh:    1.50; --lead-airy-ls:    0;
  --tagline-size:      21px;  --tagline-weight:      600; --tagline-lh:      1.19; --tagline-ls:      0.231px;
  --body-strong-size:  17px;  --body-strong-weight:  600; --body-strong-lh:  1.24; --body-strong-ls:  -0.374px;
  --body-size:         17px;  --body-weight:         400; --body-lh:         1.47; --body-ls:         -0.374px;
  --dense-link-size:   17px;  --dense-link-weight:   400; --dense-link-lh:   2.41; --dense-link-ls:   0;
  --caption-size:      14px;  --caption-weight:      400; --caption-lh:      1.43; --caption-ls:      -0.224px;
  --caption-strong-size: 14px; --caption-strong-weight: 600; --caption-strong-lh: 1.29; --caption-strong-ls: -0.224px;
  --button-large-size: 18px;  --button-large-weight: 300; --button-large-lh: 1.0;  --button-large-ls: 0;
  --button-utility-size: 14px; --button-utility-weight: 400; --button-utility-lh: 1.29; --button-utility-ls: -0.224px;
  --fine-print-size:   12px;  --fine-print-weight:   400; --fine-print-lh:   1.0;  --fine-print-ls:   -0.12px;
  --micro-legal-size:  10px;  --micro-legal-weight:  400; --micro-legal-lh:  1.3;  --micro-legal-ls:  -0.08px;
  --nav-link-size:     12px;  --nav-link-weight:     400; --nav-link-lh:     1.0;  --nav-link-ls:     -0.12px;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   Use these directly; they bind the scale variables above.
   ===================================================================== */
.t-hero        { font-family: var(--font-display); font-size: var(--hero-display-size); font-weight: var(--hero-display-weight); line-height: var(--hero-display-lh); letter-spacing: var(--hero-display-ls); }
.t-display-lg  { font-family: var(--font-display); font-size: var(--display-lg-size);   font-weight: var(--display-lg-weight);   line-height: var(--display-lg-lh);   letter-spacing: var(--display-lg-ls); }
.t-display-md  { font-family: var(--font-text);    font-size: var(--display-md-size);   font-weight: var(--display-md-weight);   line-height: var(--display-md-lh);   letter-spacing: var(--display-md-ls); }
.t-lead        { font-family: var(--font-display); font-size: var(--lead-size);         font-weight: var(--lead-weight);         line-height: var(--lead-lh);         letter-spacing: var(--lead-ls); }
.t-lead-airy   { font-family: var(--font-text);    font-size: var(--lead-airy-size);    font-weight: var(--lead-airy-weight);    line-height: var(--lead-airy-lh);    letter-spacing: var(--lead-airy-ls); }
.t-tagline     { font-family: var(--font-display); font-size: var(--tagline-size);      font-weight: var(--tagline-weight);      line-height: var(--tagline-lh);      letter-spacing: var(--tagline-ls); }
.t-body-strong { font-family: var(--font-text);    font-size: var(--body-strong-size);  font-weight: var(--body-strong-weight);  line-height: var(--body-strong-lh);  letter-spacing: var(--body-strong-ls); }
.t-body        { font-family: var(--font-text);    font-size: var(--body-size);         font-weight: var(--body-weight);         line-height: var(--body-lh);         letter-spacing: var(--body-ls); }
.t-dense-link  { font-family: var(--font-text);    font-size: var(--dense-link-size);   font-weight: var(--dense-link-weight);   line-height: var(--dense-link-lh);   letter-spacing: var(--dense-link-ls); }
.t-caption     { font-family: var(--font-text);    font-size: var(--caption-size);      font-weight: var(--caption-weight);      line-height: var(--caption-lh);      letter-spacing: var(--caption-ls); }
.t-caption-strong { font-family: var(--font-text); font-size: var(--caption-strong-size); font-weight: var(--caption-strong-weight); line-height: var(--caption-strong-lh); letter-spacing: var(--caption-strong-ls); }
.t-button-large { font-family: var(--font-text);   font-size: var(--button-large-size); font-weight: var(--button-large-weight); line-height: var(--button-large-lh); letter-spacing: var(--button-large-ls); }
.t-button-utility { font-family: var(--font-text); font-size: var(--button-utility-size); font-weight: var(--button-utility-weight); line-height: var(--button-utility-lh); letter-spacing: var(--button-utility-ls); }
.t-fine-print  { font-family: var(--font-text);    font-size: var(--fine-print-size);   font-weight: var(--fine-print-weight);   line-height: var(--fine-print-lh);   letter-spacing: var(--fine-print-ls); }
.t-micro-legal { font-family: var(--font-text);    font-size: var(--micro-legal-size);  font-weight: var(--micro-legal-weight);  line-height: var(--micro-legal-lh);  letter-spacing: var(--micro-legal-ls); }
.t-nav-link    { font-family: var(--font-text);    font-size: var(--nav-link-size);     font-weight: var(--nav-link-weight);     line-height: var(--nav-link-lh);     letter-spacing: var(--nav-link-ls); }