/* =========================================================================
   Turtle Creek Aquaculture — Design Tokens
   Single source of truth for color, type, spacing, and motion.
   Values mirror /brand/06-color.md and /brand/07-typography.md exactly.
   ========================================================================= */

:root {
  /* ---------- Color: brand palette ---------- */
  --color-redfish-rust: #B5462A;
  --color-creek-forest: #2C3D20;
  --color-river-teal:   #2D6E7E;
  --color-bank-olive:   #6B7339;
  --color-cream-sand:   #FAF7F0;
  --color-charcoal:     #1A1A1A;
  --color-white:        #FFFFFF;

  /* ---------- Color: tints (computed for surfaces & rules) ---------- */
  --color-cream-deep:   #F2EDE0;
  --color-forest-soft:  #3A4D2C;
  --color-rule:         color-mix(in srgb, var(--color-creek-forest) 18%, transparent);
  --color-rule-strong:  color-mix(in srgb, var(--color-creek-forest) 36%, transparent);

  /* ---------- Color: semantic aliases ---------- */
  --color-bg:            var(--color-cream-sand);
  --color-bg-deep:       var(--color-cream-deep);
  --color-bg-inverse:    var(--color-creek-forest);
  --color-text:          var(--color-charcoal);
  --color-heading:       var(--color-creek-forest);
  --color-text-inverse:  var(--color-cream-sand);
  --color-accent:        var(--color-redfish-rust);
  --color-link:          var(--color-river-teal);
  --color-link-hover:    var(--color-redfish-rust);
  --color-meta:          var(--color-bank-olive);

  /* ---------- Type: families ---------- */
  --font-display: "Roboto Slab", "Rockwell", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- Type: weights ---------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ---------- Type: scale ---------- */
  --text-display:  4rem;       /* 64 */
  --text-h1:       3rem;       /* 48 */
  --text-h2:       2.25rem;    /* 36 */
  --text-h3:       1.75rem;    /* 28 */
  --text-h4:       1.375rem;   /* 22 */
  --text-h5:       1.125rem;   /* 18 */
  --text-lead:     1.25rem;    /* 20 */
  --text-body:     1.0625rem;  /* 17 */
  --text-small:    0.9375rem;  /* 15 */
  --text-meta:     0.8125rem;  /* 13 */
  --text-eyebrow:  0.75rem;    /* 12 */
  --text-mono:     0.9375rem;  /* 15 */

  /* ---------- Type: line heights ---------- */
  --lh-tight:    1.10;
  --lh-snug:     1.20;
  --lh-normal:   1.50;
  --lh-relaxed:  1.65;

  /* ---------- Type: tracking ---------- */
  --track-display:  -0.01em;
  --track-h1:       -0.005em;
  --track-tight:     0;
  --track-meta:      0.02em;
  --track-eyebrow:   0.10em;

  /* ---------- Spacing scale ---------- */
  --space-1:   0.25rem;   /*  4 */
  --space-2:   0.5rem;    /*  8 */
  --space-3:   1rem;      /* 16 */
  --space-4:   1.5rem;    /* 24 */
  --space-5:   2rem;      /* 32 */
  --space-6:   3rem;      /* 48 */
  --space-7:   4rem;      /* 64 */
  --space-8:   6rem;      /* 96 */
  --space-9:   8rem;      /* 128 */

  /* ---------- Layout ---------- */
  --container-max:  72rem;     /* 1152 px */
  --container-narrow: 44rem;   /* 704 px (≈ 65ch) */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  /* ---------- Elevation (used very sparingly) ---------- */
  --shadow-soft: 0 1px 2px rgba(26, 26, 26, 0.04), 0 4px 12px rgba(26, 26, 26, 0.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}