/* ============================================================
   Ranchers Choice Processing — Design Tokens
   Single source of truth for all CSS custom properties.
   Monochrome system: ink on bone paper. Photography = only color.
   ============================================================ */

:root {
  /* ---- Paper (light surfaces) ---- */
  --bone-50:  #FCFCFB;
  --bone-100: #F7F7F5;   /* primary page surface */
  --bone-200: #EFEFEC;   /* alt section / tint */
  --bone-300: #E3E3DF;   /* hairline / borders */
  --bone-400: #CCCCC7;   /* strong border */

  /* ---- Ink (text + near-black) ---- */
  --ink-900: #141414;    /* primary text / brand / CTAs */
  --ink-800: #1F1F1F;
  --ink-700: #333333;    /* body text */
  --ink-500: #6E6E6E;    /* muted text */
  --ink-300: #ABABAB;    /* disabled / placeholder */
  --white:   #FFFFFF;
  --black:   #000000;

  /* ---- Legacy hue aliases → neutral greys (kept for compatibility) ---- */
  --oxblood-700: #000000;
  --oxblood-600: #141414;
  --oxblood-500: #333333;
  --oxblood-100: #EFEFEC;
  --oxblood-050: #F7F7F5;
  --pasture-700: #1F1F1F;
  --pasture-600: #2E2E2E;
  --pasture-500: #4A4A4A;
  --pasture-100: #EFEFEC;
  --pasture-050: #F7F7F5;
  --leather-600: #3A3A3A;
  --leather-500: #555555;
  --leather-100: #E9E9E6;
  --wheat-600:   #4A4A4A;
  --wheat-500:   #6E6E6E;
  --wheat-100:   #EFEFEC;
  --usda-blue:   #141414;

  /* ---- Semantic surface / text aliases ---- */
  --color-bg:             var(--bone-100);
  --color-bg-alt:         var(--bone-200);
  --color-surface:        var(--white);
  --color-surface-sunken: var(--bone-50);
  --color-surface-dark:   var(--ink-900);

  --text-strong:          var(--ink-900);
  --text-body:            var(--ink-700);
  --text-muted:           var(--ink-500);
  --text-inverse:         var(--bone-100);
  --text-on-brand:        var(--white);
  --text-on-dark-muted:   rgba(255, 255, 255, 0.66);

  /* ---- Brand (= ink) ---- */
  --brand:                var(--ink-900);
  --brand-hover:          var(--ink-700);
  --brand-press:          var(--black);
  --brand-tint:           var(--bone-200);
  --brand-contrast:       var(--white);

  /* ---- Accents (all neutral in monochrome brand) ---- */
  --accent-green:         var(--ink-700);
  --accent-green-tint:    var(--bone-200);
  --accent-tan:           var(--ink-500);
  --accent-gold:          var(--ink-500);
  --accent-gold-tint:     var(--bone-200);

  /* ---- Borders ---- */
  --border:               var(--bone-300);
  --border-strong:        var(--bone-400);
  --border-on-dark:       rgba(255, 255, 255, 0.16);
  --border-width:         1px;
  --border-width-strong:  2px;

  /* ---- Status (monochrome) ---- */
  --success:              var(--ink-700);
  --success-tint:         var(--bone-200);
  --warning:              var(--ink-700);
  --warning-tint:         var(--bone-200);
  --danger:               var(--ink-900);
  --danger-tint:          var(--bone-200);
  --info:                 var(--ink-700);

  --focus-ring:           var(--ink-900);

  /* ---- Typography ---- */
  --font-display:    'Zilla Slab', 'Georgia', serif;
  --font-condensed:  'Oswald', 'Arial Narrow', sans-serif;
  --font-body:       'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.25rem;
  --text-xl:      clamp(1.375rem, 3.2vw, 1.75rem);
  --text-2xl:     clamp(1.75rem, 4.4vw, 2.5rem);
  --text-3xl:     clamp(2.25rem, 6vw, 3.5rem);
  --text-display: clamp(2.75rem, 8vw, 5rem);

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-eyebrow: 0.18em;
  --tracking-wide:    0.04em;
  --tracking-tight:  -0.01em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ---- Radii ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:         0 2px 6px rgba(0, 0, 0, 0.07);
  --shadow-md:         0 8px 22px rgba(0, 0, 0, 0.09);
  --shadow-lg:         0 18px 48px rgba(0, 0, 0, 0.13);
  --shadow-inset-line: inset 0 -1px 0 var(--border);

  /* ---- Layout ---- */
  --container-max:    1200px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);
  --section-y:        clamp(3.5rem, 7vw, 7rem);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    420ms;
}