/* ==========================================================================
   CREATIVE ANIMALS — REFINED DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --color-yellow: #FFD400;
  --color-yellow-hover: #FFE033;
  --color-yellow-muted: rgba(255, 212, 0, 0.12);
  --color-yellow-glow: rgba(255, 212, 0, 0.3);

  --color-black: #0A0A0A;
  --color-black-pure: #000000;
  --color-dark-grey: #141414;
  --color-surface-grey: #1C1C1C;
  --color-border-grey: #262626;
  --color-border-light: rgba(255, 255, 255, 0.1);

  --color-off-white: #F5F5F2;
  --color-text-muted: #9E9E9E;
  --color-text-dim: #686868;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Refined Standard Spacing System */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.75rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4.5rem;
  --spacing-2xl: clamp(4rem, 7vw, 6rem);

  /* Container Max Widths */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-padding: clamp(1.25rem, 3.5vw, 2.5rem);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Header Standard Height */
  --header-height: 72px;
  --hotline-height: 36px;

  /* Transitions & Easings */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* Z-Index */
  --z-grain: 900;
  --z-cursor: 999;
  --z-header: 100;
  --z-modal: 1000;
  --z-drawer: 1050;
}