/* ═══════════════════════════════════════════════════════════════
   CHARLIE GILLIES — CSS DESIGN TOKENS
   Website v1 · June 2026
   ───────────────────────────────────────────────────────────────
   Use token names exclusively. Never reference raw hex values
   outside this file. All design decisions live here.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "New York";
  src: url("../assets/fonts/NewYork.ttf") format("truetype");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "New York";
  src: url("../assets/fonts/NewYorkItalic.ttf") format("truetype");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Ultralight.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Heavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF UI Display";
  src: url("../assets/fonts/SF-UI-Display-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yellowtail";
  src: url("../assets/fonts/Yellowtail-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ── COLORS ─────────────────────────────────────────────────── */

  /* Core palette — four approved colors, nothing else */
  --color-green:  #4B644C;   /* Arbor Green — primary bg, section fills, display type on cream  */
  --color-cream:  #F5F0E8;   /* Cream — page ground, card surfaces, display type on green        */
  --color-ink:    #1A1A1A;   /* Near-black — body copy on cream ONLY, never headlines             */
  --color-gold:   #C99A3C;   /* Gold — mark accents and prestige details only                     */

  /* Derived surfaces — derived from palette, no new hues */
  --color-green-tint:       rgba(75,  100, 76,  0.06);  /* card hover bg on cream, subtle fill   */
  --color-green-tint-mid:   rgba(75,  100, 76,  0.12);  /* slightly stronger tint, section alt   */
  --color-cream-overlay:    rgba(245, 240, 232, 0.10);  /* cream veil over green (watermark area) */
  --color-ink-secondary:    rgba(26,  26,  26,  0.55);  /* metadata, secondary body text         */
  --color-ink-tertiary:     rgba(26,  26,  26,  0.35);  /* captions, disabled states             */
  --color-divider-cream:    rgba(26,  26,  26,  0.12);  /* hairlines on cream surfaces           */
  --color-divider-green:    rgba(245, 240, 232, 0.20);  /* hairlines on green surfaces           */
  --color-gold-tint:        rgba(201, 154, 60,  0.14);  /* gold highlight — use very sparingly   */

  /* Semantic surface aliases */
  --surface-page:           var(--color-cream);         /* default page background               */
  --surface-alt:            var(--color-green);         /* alternating section fill              */
  --surface-card:           var(--color-cream);         /* listing / feature card surface        */
  --surface-card-hover:     var(--color-green-tint);    /* card hover state                      */
  --surface-nav:            var(--color-green);         /* navigation bar                        */
  --surface-footer:         var(--color-green);         /* footer                                */


  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */

  --font-primary:  "New York", "Georgia", serif;
  --font-accent:   "Yellowtail", cursive;
  --font-utility:  "SF UI Display", -apple-system, system-ui, sans-serif;

  /* Display scale — New York, medium weight, letter-spaced
     Color on green sections: --color-cream
     Color on cream sections: --color-green                        */

  --text-display-xl-size:    clamp(52px, 5.5vw, 80px);
  --text-display-xl-lh:      1.04;
  --text-display-xl-weight:  500;
  --text-display-xl-ls:      0.02em;
  --text-display-xl-font:    var(--font-primary);
  /* Usage: hero headline, full-page section openers                */

  --text-display-lg-size:    clamp(38px, 4vw, 56px);
  --text-display-lg-lh:      1.08;
  --text-display-lg-weight:  500;
  --text-display-lg-ls:      0.02em;
  --text-display-lg-font:    var(--font-primary);
  /* Usage: page heroes, major section headings                     */

  --text-display-md-size:    clamp(28px, 3vw, 40px);
  --text-display-md-lh:      1.15;
  --text-display-md-weight:  500;
  --text-display-md-ls:      0.02em;
  --text-display-md-font:    var(--font-primary);
  /* Usage: section sub-headlines, card feature titles              */

  --text-heading-lg-size:    clamp(22px, 2.5vw, 28px);
  --text-heading-lg-lh:      1.25;
  --text-heading-lg-weight:  500;
  --text-heading-lg-ls:      0.02em;
  --text-heading-lg-font:    var(--font-primary);
  /* Usage: component headings, bio heading, testimonial            */

  --text-heading-md-size:    22px;
  --text-heading-md-lh:      1.3;
  --text-heading-md-weight:  500;
  --text-heading-md-ls:      0.02em;
  --text-heading-md-font:    var(--font-primary);
  /* Usage: card title, sub-section label                           */

  --text-heading-sm-size:    18px;
  --text-heading-sm-lh:      1.35;
  --text-heading-sm-weight:  500;
  --text-heading-sm-ls:      0.02em;
  --text-heading-sm-font:    var(--font-primary);
  /* Usage: minor headings, stats label                             */

  /* Body scale — New York, roman 400, natural tracking             */

  --text-body-lg-size:    18px;
  --text-body-lg-lh:      1.72;
  --text-body-lg-weight:  400;
  --text-body-lg-ls:      0;
  --text-body-lg-font:    var(--font-primary);
  /* Usage: lead paragraph, about intro, hero sub-copy              */

  --text-body-md-size:    16px;
  --text-body-md-lh:      1.72;
  --text-body-md-weight:  400;
  --text-body-md-ls:      0;
  --text-body-md-font:    var(--font-primary);
  /* Usage: standard body copy across all sections                  */

  --text-body-sm-size:    14px;
  --text-body-sm-lh:      1.65;
  --text-body-sm-weight:  400;
  --text-body-sm-ls:      0;
  --text-body-sm-font:    var(--font-primary);
  /* Usage: secondary body, captions, listing descriptions          */

  /* Utility scale — SF UI Display, never body copy                 */

  --text-eyebrow-size:       10px;
  --text-eyebrow-lh:         1.4;
  --text-eyebrow-weight:     700;
  --text-eyebrow-ls:         0.16em;
  --text-eyebrow-font:       var(--font-utility);
  --text-eyebrow-transform:  uppercase;
  /* Usage: section labels above headings, always all-caps          */

  --text-label-size:         11px;
  --text-label-lh:           1.4;
  --text-label-weight:       500;
  --text-label-ls:           0.06em;
  --text-label-font:         var(--font-utility);
  /* Usage: DRE numbers, credential strips, badge text              */

  --text-nav-size:           11px;
  --text-nav-lh:             1;
  --text-nav-weight:         500;
  --text-nav-ls:             0.12em;
  --text-nav-font:           var(--font-utility);
  --text-nav-transform:      uppercase;
  /* Usage: navigation links                                         */

  --text-stat-num-size:      clamp(36px, 4vw, 52px);
  --text-stat-num-weight:    500;
  --text-stat-num-ls:        0.02em;
  --text-stat-num-font:      var(--font-primary);
  /* Usage: stats bar numbers (10+, 2020, OC)                       */


  /* ── SPACING (8px base) ─────────────────────────────────────── */

  --space-1:    8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   80px;
  --space-9:   96px;
  --space-10: 120px;
  --space-11: 160px;
  --space-12: 200px;


  /* ── LAYOUT ─────────────────────────────────────────────────── */

  --layout-max-width:         1280px;   /* outer container cap                     */
  --layout-inner-max:         1080px;   /* narrower reading/content columns        */
  --layout-nav-height:          72px;   /* sticky nav bar height                   */
  --layout-section-pad-v:  var(--space-9);    /* 96px  — section top/bottom desktop  */
  --layout-section-pad-h:  var(--space-8);    /* 80px  — section left/right desktop  */
  --layout-section-pad-v-mob: var(--space-7); /* 64px  — section top/bottom mobile   */
  --layout-section-pad-h-mob: var(--space-3); /* 24px  — section left/right mobile   */
  --layout-col-gutter:     24px;              /* 24px  — card grid gap               */
  --layout-card-pad:       20px;              /* 20px  — card interior padding        */
  --layout-card-pad-mob:   16px;              /* 16px  — card interior padding mobile */


  /* ── BORDERS ────────────────────────────────────────────────── */

  --border-hairline:       1px solid var(--color-divider-cream);  /* dividers on cream  */
  --border-hairline-green: 1px solid var(--color-divider-green);  /* dividers on green  */
  --border-card:           1px solid var(--color-divider-cream);  /* listing card edge  */
  --border-input:          1px solid var(--color-divider-cream);  /* form input default */
  --border-input-focus:    1.5px solid var(--color-green);        /* form input focus   */
  --border-input-error:    1.5px solid var(--color-ink);          /* form input error   */


  /* ── BORDER RADIUS ──────────────────────────────────────────── */
  /* This brand skews minimal — marks are precise, not rounded     */

  --radius-card:    2px;   /* listing cards, feature cards                            */
  --radius-button:  2px;   /* all button shapes — no pill                             */
  --radius-input:   2px;   /* form inputs                                             */
  --radius-badge:   2px;   /* status badges (Active / Sold / Pending)                 */


  /* ── SHADOWS ────────────────────────────────────────────────── */
  /* Maximum shadow: 0 4px 16px rgba(0,0,0,0.08) — never exceed   */

  --shadow-card:         0 2px  8px rgba(0, 0, 0, 0.05);   /* default card lift       */
  --shadow-card-hover:   0 4px 16px rgba(0, 0, 0, 0.08);   /* hover lift — max allowed*/
  --shadow-nav:          0 1px  0   rgba(0, 0, 0, 0.10);   /* nav bottom rule         */


  /* ── TRANSITIONS ────────────────────────────────────────────── */

  --transition-hover:  color 200ms ease, background-color 200ms ease,
                       border-color 200ms ease, opacity 200ms ease;
  --transition-shadow: box-shadow 200ms ease;
  --transition-reveal: opacity 400ms ease-out, transform 400ms ease-out;


  /* ── FOCUS OUTLINE ──────────────────────────────────────────── */

  --focus-outline: 2px solid var(--color-gold);
  --focus-offset:  3px;

}

/* ── MOBILE RESPONSIVE OVERRIDES ───────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --layout-nav-height:         60px;
    --layout-section-pad-v:      var(--space-8);   /* 80px mobile */
    --text-display-xl-size:      40px;
    --text-display-lg-size:      32px;
    --text-display-md-size:      26px;
    --text-heading-lg-size:      22px;
  }
}