:root {
  --tk-font-heading: "Alumni Sans Pinstripe", sans-serif;
  --tk-font-body: "DM Sans", sans-serif;
  --tk-font-eyebrow: "Jura", sans-serif;
  --tk-font-quote: "Cormorant Garamond", serif;
  --tk-bg: #0a0a0a;
  --tk-bg-2: #111111;
  --tk-surface: #181818;
  --tk-surface-elevated: #1f1f1f;
  --tk-text: #f0ede6;
  --tk-muted: #888880;
  --tk-dim: #3a3a38;
  --tk-border: rgba(201, 165, 103, 0.15);
  --tk-border-dim: rgba(255, 255, 255, 0.055);
  --tk-accent: #c9a567;
  --tk-accent-hi: #ffe56e;
  --tk-accent-lo: #7a6235;
  --tk-accent-muted: rgba(201, 165, 103, 0.12);
  --tk-accent-chip-muted: color-mix(in srgb, var(--tk-accent) 58%, var(--tk-bg-2));
  --tk-on-accent: #ffffff;
  --tk-on-metallic: #17130d;
  --tk-primary-metal:
    radial-gradient(circle at 16% 14%, rgba(255, 242, 208, 0.82) 0%, rgba(255, 235, 190, 0.38) 22%, rgba(255, 230, 170, 0.12) 42%, transparent 58%) padding-box,
    radial-gradient(circle at 82% 82%, rgba(115, 67, 16, 0.34) 0%, rgba(130, 78, 18, 0.18) 28%, transparent 56%) padding-box,
    radial-gradient(circle at 68% 20%, rgba(255, 221, 148, 0.18) 0%, transparent 42%) padding-box,
    linear-gradient(135deg, #edce8d 0%, #e2bd73 24%, #d6a755 51%, #c58d3b 76%, #b77629 100%) padding-box,
    linear-gradient(105deg, rgba(255, 242, 207, 0.96) 0%, rgba(224, 180, 102, 0.88) 22%, rgba(177, 117, 39, 0.84) 48%, rgba(245, 206, 132, 0.94) 72%, rgba(132, 78, 20, 0.88) 100%) border-box;
  --tk-primary-shadow:
    inset 0 1px 0 rgba(255, 247, 222, 0.78),
    inset 1px 0 0 rgba(255, 236, 190, 0.28),
    inset 0 -1px 0 rgba(91, 49, 8, 0.3),
    inset -1px 0 0 rgba(102, 58, 13, 0.17),
    0 7px 19px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(211, 155, 64, 0.11);
  --tk-primary-shine: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.3) 46%,
    rgba(255, 255, 255, 0.65) 52%,
    rgba(255, 255, 255, 0.26) 58%,
    rgba(255, 255, 255, 0.04) 75%,
    transparent 100%
  );
  --tk-shine: color-mix(in srgb, var(--tk-text) 55%, transparent);
  --tk-shine-edge: color-mix(in srgb, var(--tk-accent-hi) 50%, transparent);
  --tk-shine-mid: color-mix(in srgb, var(--tk-accent-hi) 80%, var(--tk-text));
  --tk-shine-core: color-mix(in srgb, var(--tk-text) 75%, var(--tk-accent-hi));
  --tk-cream-bg: #f2eee5;
  --tk-cream-text: #1a1916;
  --tk-success: #7db896;
  --tk-warning: #c9a96e;
  --tk-danger: #d4857c;
  --tk-neutral: #888880;
  --tk-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --tk-radius: 12px;
  --tk-radius-sm: 8px;
  /* Canonical short divider after display H1 (Design DNA §9) */
  --tk-divider-short: linear-gradient(
    90deg,
    #8e4c03 0%,
    #ffd898 35%,
    #8e4c03 75%,
    #1d1b11 100%
  );
  /* Canonical long divider between broad content bands (Design DNA §9) */
  --tk-divider-long: linear-gradient(
    90deg,
    #22201c 0%,
    #8e4c03 25%,
    #ffd898 55%,
    #8e4c03 75%,
    #22201c 100%
  );
  --tk-gold-gradient: linear-gradient(
    to bottom,
    #ffe76e 0%,
    #fefacc 15%,
    #fefacc 22%,
    #dcc883 30%,
    #f3eab4 38%,
    #53431f 43%,
    #53431f 47%,
    #e6b75a 54%,
    #684f23 63%,
    #684f23 81%,
    #edb84e 100%
  );
}

:root[data-theme="dark"] {
  --tk-bg: #0a0a0a;
  --tk-bg-2: #111111;
  --tk-surface: #181818;
  --tk-surface-elevated: #1f1f1f;
  --tk-text: #f0ede6;
  --tk-muted: #888880;
  --tk-dim: #3a3a38;
  --tk-border: rgba(201, 165, 103, 0.15);
  --tk-border-dim: rgba(255, 255, 255, 0.055);
  --tk-accent: #c9a567;
  --tk-accent-hi: #ffe56e;
  --tk-accent-lo: #7a6235;
  --tk-accent-muted: rgba(201, 165, 103, 0.12);
  --tk-accent-chip-muted: color-mix(in srgb, var(--tk-accent) 58%, var(--tk-bg-2));
  --tk-on-accent: #ffffff;
  --tk-shine: color-mix(in srgb, var(--tk-text) 55%, transparent);
  --tk-shine-edge: color-mix(in srgb, var(--tk-accent-hi) 50%, transparent);
  --tk-shine-mid: color-mix(in srgb, var(--tk-accent-hi) 80%, var(--tk-text));
  --tk-shine-core: color-mix(in srgb, var(--tk-text) 75%, var(--tk-accent-hi));
  --tk-cream-bg: #f2eee5;
  --tk-cream-text: #1a1916;
  --tk-success: #7db896;
  --tk-warning: #c9a96e;
  --tk-danger: #d4857c;
  --tk-neutral: #888880;
  --tk-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --tk-radius: 12px;
  --tk-radius-sm: 8px;
  --tk-gold-gradient: linear-gradient(
    to bottom,
    #ffe76e 0%,
    #fefacc 15%,
    #fefacc 22%,
    #dcc883 30%,
    #f3eab4 38%,
    #53431f 43%,
    #53431f 47%,
    #e6b75a 54%,
    #684f23 63%,
    #684f23 81%,
    #edb84e 100%
  );
}

:root[data-theme="light"] {
  --tk-bg: #f2eee5;
  --tk-bg-2: #e8e4db;
  --tk-surface: #ffffff;
  --tk-surface-elevated: #faf8f4;
  --tk-text: #1a1916;
  --tk-muted: #4a4840;
  --tk-dim: #c8c4bc;
  --tk-border: rgba(122, 98, 53, 0.2);
  --tk-border-dim: rgba(26, 25, 22, 0.08);
  --tk-accent: #7a6235;
  --tk-accent-hi: #c9a567;
  --tk-accent-lo: #53431f;
  --tk-accent-muted: rgba(201, 165, 103, 0.15);
  --tk-accent-chip-muted: color-mix(in srgb, var(--tk-accent) 42%, var(--tk-surface-elevated));
  --tk-shine: color-mix(in srgb, var(--tk-text) 40%, transparent);
  --tk-shine-edge: color-mix(in srgb, var(--tk-accent-hi) 45%, transparent);
  --tk-shine-mid: color-mix(in srgb, var(--tk-accent-hi) 75%, var(--tk-text));
  --tk-shine-core: color-mix(in srgb, var(--tk-text) 70%, var(--tk-accent-hi));
  --tk-shadow: 0 4px 20px rgba(26, 25, 22, 0.08);
}