/* =====================================================================
   Focus & Film — Colors & Type
   The full token foundation. Import this in any HTML you build.
   ===================================================================== */

/* ---------- Webfonts ----------------------------------------------- */
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("./fonts/LibreCaslonCondensed.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("./fonts/LibreCaslonCondensed-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("./fonts/NeueHaasDisplay-Thin.ttf") format("truetype");
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Apple Garamond";
  src: url("./fonts/AppleGaramond.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("./fonts/PPMori-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Palette (the five) -------------------------------- */
  --pale-cream:   #F7F7E7;   /* RGB 247 247 231 */
  --carbon-black: #140F07;   /* RGB  20  15   7 */
  --pale-sun:     #FFFFAB;   /* RGB 255 255 171 */
  --walnut-brown: #322217;   /* RGB  50  34  23 */
  --suede-gray:   #8F8471;   /* RGB 143 132 113 */

  /* ---------- Sanctioned pairings -------------------------------- *
   * Every surface in the brand is built from one of these nine.    *
   * Use them by name; never invent a new combination.              */
  --pair-suede-on-sun:    var(--suede-gray)   var(--pale-sun);
  --pair-walnut-on-sun:   var(--walnut-brown) var(--pale-sun);
  --pair-suede-on-walnut: var(--suede-gray)   var(--walnut-brown);
  --pair-walnut-on-cream: var(--walnut-brown) var(--pale-cream);
  --pair-sun-on-suede:    var(--pale-sun)     var(--suede-gray);
  --pair-cream-on-black:  var(--pale-cream)   var(--carbon-black);
  --pair-black-on-cream:  var(--carbon-black) var(--pale-cream);

  /* ---------- Semantic surface tokens (default = walnut/cream) -- */
  --bg:           var(--pale-cream);
  --fg:           var(--walnut-brown);
  --fg-muted:     var(--suede-gray);
  --fg-soft:      color-mix(in oklab, var(--walnut-brown) 65%, transparent);
  --rule:         color-mix(in oklab, var(--walnut-brown) 22%, transparent);
  --rule-strong:  color-mix(in oklab, var(--walnut-brown) 55%, transparent);

  /* ---------- Type families -------------------------------------- */
  --serif-display: "Libre Caslon Condensed", "Times New Roman", serif;
  --sans:          "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans-thin:     "Neue Haas Display", "Inter", -apple-system, sans-serif;  /* editorial thin */
  --serif-old:     "Apple Garamond", "EB Garamond", Garamond, serif;         /* "Creative Company" feel */
  --sans-mark:     "PP Mori", "Inter", sans-serif;                            /* footers / small caps marks */

  /* ---------- Type scale (ratios picked from the brand book) ----- *
   * Display -> a tight, condensed serif lockup. Body -> Inter 15.   *
   * The brand mixes very large display with very small all-caps    *
   * Inter labels — preserve that tension.                          */
  --fs-display-xl: clamp(72px, 10.5vw, 168px);
  --fs-display-l:  clamp(56px, 7.2vw, 116px);
  --fs-display-m:  clamp(40px, 4.8vw, 80px);
  --fs-h1:         48px;
  --fs-h2:         32px;
  --fs-h3:         22px;
  --fs-body-l:     18px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-mark:       11px;   /* tracked all-caps label */
  --fs-eyebrow:    10px;

  --lh-tight:    0.9;
  --lh-display:  0.95;
  --lh-snug:     1.18;
  --lh-body:     1.5;
  --lh-loose:    1.7;

  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-mark:     0.18em;     /* ALL-CAPS LABEL TRACKING */
  --tr-eyebrow:  0.32em;

  /* ---------- Spacing (4-base, with editorial outliers) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- Radii — minimal. Editorial = mostly square. ------- */
  --r-0: 0px;        /* default. images, blocks, sections. */
  --r-1: 2px;        /* hairline rounding for chips */
  --r-2: 6px;        /* fields, small buttons */
  --r-pill: 999px;   /* the only soft shape — used for tags/buttons */

  /* ---------- Borders -------------------------------------------- */
  --bw-hair: 1px;
  --bw-rule: 1.5px;
  --bw-thick: 2px;

  /* ---------- Shadows — used very sparingly. -------------------- *
   * The brand prefers flat surfaces and full-bleed photography     *
   * over UI elevation. Reserve shadows for floating panels only.   */
  --shadow-1: 0 1px 0 0 color-mix(in oklab, var(--walnut-brown) 12%, transparent);
  --shadow-2: 0 8px 24px -8px color-mix(in oklab, var(--carbon-black) 22%, transparent);
  --shadow-3: 0 24px 64px -20px color-mix(in oklab, var(--carbon-black) 38%, transparent);

  /* ---------- Motion -------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- Layout -------------------------------------------- */
  --content-max: 1280px;
  --gutter: clamp(16px, 3vw, 48px);
}

/* ---------- Surface presets ----------------------------------------
   Drop one of these classes on <body> or any section wrapper to
   activate a sanctioned pairing. fg/bg auto-update so any descendant
   that uses var(--fg)/var(--bg) stays correct.
------------------------------------------------------------------ */
.surface-cream   { --bg: var(--pale-cream);   --fg: var(--walnut-brown); --fg-muted: var(--suede-gray); }
.surface-walnut  { --bg: var(--walnut-brown); --fg: var(--suede-gray);   --fg-muted: color-mix(in oklab, var(--suede-gray) 70%, transparent); }
.surface-sun     { --bg: var(--pale-sun);     --fg: var(--walnut-brown); --fg-muted: color-mix(in oklab, var(--walnut-brown) 60%, transparent); }
.surface-suede-sun { --bg: var(--suede-gray); --fg: var(--pale-sun);     --fg-muted: color-mix(in oklab, var(--pale-sun) 70%, transparent); }
.surface-suede   { --bg: var(--suede-gray);   --fg: var(--walnut-brown); --fg-muted: color-mix(in oklab, var(--walnut-brown) 65%, transparent); }
.surface-black   { --bg: var(--carbon-black); --fg: var(--pale-cream);   --fg-muted: color-mix(in oklab, var(--pale-cream) 65%, transparent); }
.surface-cream-black { --bg: var(--pale-cream); --fg: var(--carbon-black); --fg-muted: color-mix(in oklab, var(--carbon-black) 60%, transparent); }

/* ---------- Base elements ------------------------------------------- */
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--serif-display);
  font-weight: 400;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display-l); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); }

p  { line-height: var(--lh-body); max-width: 62ch; text-wrap: pretty; }

/* ---------- Editorial primitives ----------------------------------- */
.display-xl { font-family: var(--serif-display); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
.display-l  { font-family: var(--serif-display); font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.display-m  { font-family: var(--serif-display); font-size: var(--fs-display-m);  line-height: var(--lh-display); letter-spacing: var(--tr-display); }

.italic-display { font-family: var(--serif-display); font-style: italic; }

/* The "based in new jersey new york" all-caps mark from the brand book */
.mark {
  font-family: var(--sans-mark);
  font-size: var(--fs-mark);
  letter-spacing: var(--tr-mark);
  text-transform: uppercase;
  font-weight: 600;
}

/* The "( Who we are )" / "( Services )" parens label */
.section-label {
  font-family: var(--sans);
  font-size: var(--fs-body-s);
  font-weight: 400;
  font-style: italic;
  color: var(--fg-muted);
}
.section-label::before { content: "( "; }
.section-label::after  { content: " )"; }

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

.lede { font-family: var(--sans); font-size: var(--fs-body-l); line-height: var(--lh-snug); max-width: 38ch; }

/* Numeric index used in the brand book ("01", "02") */
.numeral {
  font-family: var(--serif-display);
  font-size: 0.9em;
  font-style: italic;
  color: var(--fg-muted);
}