/* Volley Design System - Tokens */

:root {
  /* Colors - Base */
  --vy-color-cream: #F4EEE1;
  --vy-color-muted: #9C9686;
  --vy-color-stitch: #E8D2A2;
  
  /* Gradients & Textures - Materials */
  --vy-mat-leather-bg: #261C15 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%23261C15"/><path d="M0 0h1v1H0zm2 2h1v1H2z" fill="%231a120d" fill-opacity="0.6"/></svg>');
  --vy-mat-leather-panel: linear-gradient(180deg, #3A2A20 0%, #2B1F17 50%, #1D140E 100%);
  --vy-mat-leather-active: linear-gradient(180deg, #9C6B45 0%, #6B4226 50%, #3A2112 100%);
  --vy-mat-leather-danger: linear-gradient(180deg, #9A3229 0%, #64191A 50%, #34100F 100%);
  
  --vy-mat-chrome: linear-gradient(180deg, #F4EEE1 0%, #9C9686 28%, #4F4B43 55%, #B8B09E 80%, #E8E1D0 100%);
  --vy-mat-chrome-border: #4F4B43;
  --vy-mat-chrome-dead: linear-gradient(180deg, #8A8780 0%, #5E5B55 28%, #3A3835 55%, #6A6761 80%, #85827B 100%);
  
  --vy-mat-brass: linear-gradient(180deg, #FFE9A8 0%, #E3B95E 48%, #C99A3E 52%, #F0CE7C 100%);

  /* Solid colours for text and borders. The materials above are gradients, which
     are only valid as a background or a border-image, never as a color or a
     border colour. */
  --vy-color-brass: #E3B95E;
  --vy-color-danger: #E0796B;
  --vy-color-danger-tint: rgba(224, 121, 107, 0.12);
  --vy-color-brass-tint: rgba(227, 185, 94, 0.1);
  --vy-color-stitch-tint: rgba(232, 210, 162, 0.08);

  /* Typography */
  --vy-font-ui: system-ui, -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
  --vy-font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", monospace;
  
  /* Depth & Shadows */
  --vy-shadow-inset: inset 0 2px 4px rgba(0,0,0,0.6);
  --vy-shadow-drop: 0 4px 6px rgba(0,0,0,0.5);
  --vy-shadow-vignette: inset 0 0 100px rgba(0,0,0,0.8);
  
  /* Utilities */
  --vy-border-stitch: 2px dashed var(--vy-color-stitch);
}