/* ============================================================
   BKCC Design Tokens
   Brand: Black Knight Creative Company
   ============================================================ */

:root {
  /* --- Color Palette --- */
  --ink:          #1c1c1c;   /* Near-black for headings and body */
  --ink-soft:     #2e2e2e;   /* Slightly lighter text */
  --cream:        #f7f4ef;   /* Warm white background */
  --cream-deep:   #efe9df;   /* Slightly warmer surface */
  --white:        #ffffff;
  --gold:         #b8922a;   /* Deep gold accent — BKCC brand */
  --gold-light:   #d4a94a;   /* Lighter gold for hover/glow */
  --gold-muted:   #c9a84c22; /* Translucent gold for backgrounds */
  --muted:        #6b6560;   /* Secondary text */
  --muted-light:  #9c9590;   /* Placeholder / disabled */
  --line:         #ddd8d1;   /* Borders */
  --line-dark:    #c4beb7;   /* Stronger borders */
  --surface:      #ffffff;   /* Card surface */
  --surface-warm: #fdfcf9;   /* Warm card surface */
  --deep:         #111111;   /* Footer, dark sections */
  --deep-warm:    #1a1715;   /* Slightly warm black */

  /* --- Typography --- */
  --font-sans:   -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-serif:  Georgia, "Times New Roman", serif;

  /* Fluid type scale */
  --text-xs:     clamp(0.72rem, 1.5vw, 0.78rem);
  --text-sm:     clamp(0.82rem, 1.8vw, 0.9rem);
  --text-base:   clamp(0.95rem, 2vw, 1.05rem);
  --text-md:     clamp(1.05rem, 2.2vw, 1.15rem);
  --text-lg:     clamp(1.15rem, 2.5vw, 1.35rem);
  --text-xl:     clamp(1.35rem, 3vw, 1.65rem);
  --text-2xl:    clamp(1.65rem, 4vw, 2.1rem);
  --text-3xl:    clamp(2rem, 5vw, 2.8rem);
  --text-4xl:    clamp(2.4rem, 6vw, 3.5rem);
  --text-5xl:    clamp(2.8rem, 8vw, 4.5rem);

  /* --- Spacing Scale --- */
  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4.5rem;
  --space-4xl:  6rem;
  --space-5xl:  9rem;

  /* --- Layout --- */
  --width-content: 720px;
  --width-wide:    1100px;
  --width-full:    1380px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --radius-full:   9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(28,28,28,0.08), 0 1px 2px rgba(28,28,28,0.05);
  --shadow-md:  0 4px 16px rgba(28,28,28,0.10), 0 2px 6px rgba(28,28,28,0.06);
  --shadow-lg:  0 8px 32px rgba(28,28,28,0.12), 0 4px 12px rgba(28,28,28,0.08);
  --shadow-gold: 0 4px 20px rgba(184,146,42,0.18);

  /* --- Motion --- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 220ms var(--ease-out);
  --transition-slow: 380ms var(--ease-out);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}