/* Canal Rodéo — Design tokens v3
 * Palette align with OFFICIAL LOGO: pure black + metallic gold + silver white
 * Removed copper/rust tones. Pure gold spectrum.
 */

:root {
  /* Pure logo-aligned palette */
  --cr-black:        #000000;   /* absolute black — background */
  --cr-black-2:      #0a0807;   /* slight warm tint elevated */
  --cr-black-3:      #141110;   /* card / panel bg */
  --cr-black-4:      #1f1a14;   /* surfaces */
  --cr-border:       #2a2218;   /* borders / dividers */

  /* Gold metallic spectrum (matching logo) */
  --cr-gold-light:   #f0cf78;   /* champagne highlight */
  --cr-gold:         #d4a63f;   /* primary gold */
  --cr-gold-mid:     #c9973d;   /* mid gold */
  --cr-gold-dark:    #8a6520;   /* deep bronze */
  --cr-gold-edge:    #6b4a15;   /* shadow edge */

  /* White metallic (matching CANAL in logo) */
  --cr-cream:        #f7f2e6;   /* cream white */
  --cr-silver:       #e8e2d5;   /* silver highlight */
  --cr-text:         #f5efe3;   /* primary text */
  --cr-text-muted:   #8a8278;   /* muted */
  --cr-text-faint:   #c5bdaf;   /* subtle text */

  --cr-oxblood:      #c0392b;   /* LIVE indicator */
  --cr-sage:         #7a8f54;   /* success */

  /* Semantic aliases */
  --color-bg:           var(--cr-black);
  --color-bg-alt:       var(--cr-black-2);
  --color-surface:      var(--cr-black-3);
  --color-surface-2:    var(--cr-black-4);
  --color-text:         var(--cr-text);
  --color-text-muted:   var(--cr-text-muted);
  --color-text-faint:   var(--cr-text-faint);
  --color-text-inverse: var(--cr-black);
  --color-brand:        var(--cr-gold);
  --color-brand-hover:  var(--cr-gold-light);
  --color-accent:       var(--cr-gold-light);
  --color-border:       var(--cr-border);
  --color-live:         var(--cr-oxblood);
  --color-success:      var(--cr-sage);
  --color-danger:       var(--cr-oxblood);

  /* Gold gradient (metallic brushed) */
  --gradient-gold:      linear-gradient(180deg, #f0cf78 0%, #e4b860 25%, #d4a63f 50%, #c9973d 75%, #8a6520 100%);
  --gradient-silver:    linear-gradient(180deg, #ffffff 0%, #f5efe3 50%, #c9c0b0 100%);
  --gradient-gold-bar:  linear-gradient(90deg, transparent 0%, #b88830 15%, #f0cf78 50%, #b88830 85%, transparent 100%);

  /* Typography */
  --font-display:  'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --font-brand:    'Kanit', 'Anton', Impact, sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --step--2: clamp(0.72rem, 0.69rem + 0.15vi, 0.82rem);
  --step--1: clamp(0.86rem, 0.82rem + 0.22vi, 1rem);
  --step-0:  clamp(1rem, 0.94rem + 0.31vi, 1.2rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vi, 1.56rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vi, 2rem);
  --step-3:  clamp(1.94rem, 1.7rem + 1.2vi, 2.75rem);
  --step-4:  clamp(2.5rem, 2.1rem + 2vi, 4rem);
  --step-5:  clamp(3.25rem, 2.65rem + 3vi, 5.5rem);
  --step-6:  clamp(4.25rem, 3.4rem + 4.25vi, 7.5rem);
  --step-7:  clamp(5.5rem, 4.3rem + 6vi, 10rem);

  /* Layout */
  --wrap:        1280px;
  --wrap-narrow: 780px;
  --wrap-wide:   1440px;
  --section-y:   clamp(4rem, 8vw, 8rem);
  --gutter:      clamp(1rem, 3vw, 2rem);

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 30px -5px rgba(212,166,63,0.25);

  /* Motion */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast:   160ms;
  --medium: 280ms;
  --slow:   500ms;

  /* Leather grain texture (subtle) */
  --leather-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.02  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}