/* ==========================================================================
   erichunsicker.com — Design Tokens v3 ("Owner" direction) · PRODUCTION COPY
   Approved by Eric 2026-11-10 from the redesign mockups (option 6, de-greened).
   Light, warm and simple: white + cream + peach surfaces, near-black ink,
   sand as the only warm accent. One tight grotesk (Inter Tight, self-hosted).
   Inspired by owner.com's type and layout, NOT its colors: no green anywhere.
   Semantic variable NAMES are kept from v1/v2 so every page's CSS still works.
   Three-layer: PRIMITIVE (raw) -> SEMANTIC (purpose) -> COMPONENT.
   ========================================================================== */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------
     LAYER 1 — PRIMITIVES
     --------------------------------------------------------------------- */
  --ink-1000: #141312;   /* buttons, darkest fills */
  --ink-900:  #1c1a19;   /* charcoal band */
  --ink-800:  #2c2c2c;   /* body text / headings */
  --ink-600:  #4a4a4a;   /* soft text */
  --ink-500:  #6b6b6b;   /* muted text */
  --ink-400:  #9a9a9a;   /* placeholder */

  --white:    #ffffff;
  --cream:    #fbf8f5;   /* alternating sections, footer */
  --peach:    #f6eee5;   /* feature cards / panels */
  --peach-2:  #efe8e0;   /* tags, hover fills */
  --line:     #ebe5de;   /* hairlines, card borders */
  --sand:     #cbb8a4;   /* the one warm accent (gradients, glows) */

  /* on-dark (charcoal band) */
  --on-ink:        #f9f3ed;
  --on-ink-soft:   rgba(255, 255, 255, .72);
  --on-ink-muted:  rgba(255, 255, 255, .55);
  --on-ink-line:   rgba(255, 255, 255, .14);

  --success: #1f7a3a;    /* form success text only (functional, not brand) */
  --danger:  #c0392b;

  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "Segoe UI", Roboto, sans-serif;

  /* placeholder / poster panels (now warm, light) */
  --ph-from: var(--peach);
  --ph-mid:  var(--peach-2);
  --ph-to:   var(--cream);
  --ph-text: var(--ink-600);
  --poster-from:  #34302c;
  --poster-mid:   var(--ink-900);
  --poster-to:    #0f0e0d;
  --poster-text:  var(--on-ink);
  --poster-muted: var(--on-ink-muted);

  /* legacy primitive names some pages still reference */
  --orange-600: var(--ink-1000);
  --orange-500: var(--ink-800);
  --orange-950: var(--peach);
  --gold-400:   var(--ink-800);
  --gold-950:   var(--peach-2);
  --gray-300:   var(--ink-600);
  --gray-400:   var(--ink-400);
  --gray-500:   var(--ink-500);
  --white-50:   var(--ink-800);
  --green-400:  var(--success);
  --red-400:    var(--danger);
  --preview-todo: var(--ink-500);
  --ink-950:    var(--ink-1000); /* v2 name: darkest ink (coaching price/buttons) */
  --ink-925:    var(--cream);
  --ink-850:    var(--line);

  /* ---------------------------------------------------------------------
     LAYER 2 — SEMANTIC
     --------------------------------------------------------------------- */
  --color-bg:            var(--white);
  --color-surface:       var(--cream);
  --color-surface-dark:  var(--ink-900);   /* dark feature panels (email, golf) */
  --color-text:          var(--ink-800);
  --color-text-soft:     var(--ink-600);
  --color-text-muted:    var(--ink-500);
  --color-text-on-dark:  var(--on-ink);
  --color-text-on-dark-muted: var(--on-ink-soft);
  --color-success-on-dark: #9fd8a9;
  --color-error-on-dark:   #ff9a8f;
  --color-accent-green:  var(--sand);      /* legacy name: eyebrow/em on dark panels */
  --color-text-on-primary: var(--on-ink);

  --color-primary:       var(--ink-1000);
  --color-primary-hover: #000000;
  --color-accent:        var(--ink-800);
  --color-accent-bg:     var(--peach-2);
  --color-accent-text:   var(--ink-800);

  --color-border:        var(--line);
  --color-hairline:      var(--line);

  --on-dark-input-bg:     #26231f;
  --on-dark-input-border: var(--on-ink-line);
  --on-dark-placeholder:  var(--on-ink-muted);
  --on-dark-label:        var(--on-ink-muted);

  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);

  --text-display: clamp(2.7rem, 7vw, 5.25rem);
  --text-h1:      clamp(2.4rem, 5vw, 3.6rem);
  --text-h2:      clamp(2.1rem, 4.4vw, 3.5rem);
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;
  --text-lead:    1.2rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.875rem;   /* eyebrows are sentence-case labels now, not caps */

  --leading-display: 0.98;
  --leading-heading: 1.04;
  --leading-body:    1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-heading: 600;

  --tracking-eyebrow: -0.005em;
  --tracking-tight:  -0.035em;

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

  --section-y:        var(--space-11);
  --section-y-mobile: var(--space-9);

  --radius-sm:   12px;
  --radius-md:   24px;
  --radius-lg:   32px;
  --radius-xl:   64px;
  --radius-pill: 999px;
  --radius-full: 50%;

  --glow: rgba(60, 45, 30, .10);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 16px 40px rgba(80, 50, 20, .10);
  --shadow-glow: none;

  --container-max: 1120px;
  --container-read: 680px;
  --container-pad: 20px;

  /* ---------------------------------------------------------------------
     LAYER 3 — COMPONENT
     --------------------------------------------------------------------- */
  --btn-bg:          var(--color-primary);
  --btn-bg-hover:    var(--color-primary-hover);
  --btn-text:        var(--color-text-on-primary);
  --btn-radius:      14px;
  --btn-pad-y:       14px;
  --btn-pad-x:       22px;
  --btn-weight:      var(--weight-semibold);

  --btn2-bg:         var(--white);
  --btn2-border:     var(--line);
  --btn2-text:       var(--color-text);

  --card-bg:         var(--white);
  --card-border:     var(--line);
  --card-radius:     var(--radius-md);
  --card-pad:        var(--space-6);

  --eyebrow-color:   var(--color-text-muted);
  --eyebrow-size:    var(--text-eyebrow);
  --eyebrow-track:   var(--tracking-eyebrow);

  --link-color:      var(--color-text);
  --link-hover:      #000000;
}