/**
 * Playful Geometric Design Tokens
 * Punchy, High-Saturation Palette with Hard Shadows
 */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  /* ========== Colors - Playful Geometric ========== */

  /* Base Surface */
  --color-bg: #fffdf5; /* Warm Cream/Off-White (Paper feel) */

  /* Text Colors - WCAG Compliant */
  --color-fg: #1e293b; /* Slate 800 (Softer than black) - AAA */
  --color-muted: #64748b; /* Slate 500 - AA */

  /* Accent Colors - Playful Palette */
  --color-accent: #8b5cf6; /* Vivid Violet (Primary Brand) */
  --color-accent-light: #a78bfa; /* Lighter violet for hover */
  --color-secondary: #f472b6; /* Hot Pink (Playful pop) */
  --color-tertiary: #fbbf24; /* Amber/Yellow (Optimism) */
  --color-quaternary: #34d399; /* Emerald/Mint (Freshness) */

  /* Semantic Colors */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f472b6;
  --color-info: #8b5cf6;

  /* Neutral Colors */
  --color-border: #e2e8f0; /* Slate 200 */
  --color-card: #ffffff; /* White */
  --color-input: #ffffff; /* White */

  /* ========== Shadows - Hard "Pop" Shadows ========== */

  /* The "Pop" Shadow (Hard Shadow) - No blur, solid offset */
  --shadow-pop: 4px 4px 0px 0px var(--color-fg);
  --shadow-pop-hover: 6px 6px 0px 0px var(--color-fg);
  --shadow-pop-active: 2px 2px 0px 0px var(--color-fg);

  /* Card Shadows - Colored for different states */
  --shadow-card: 8px 8px 0px 0px var(--color-border);
  --shadow-card-hover: 10px 10px 0px 0px var(--color-border);
  --shadow-card-success: 8px 8px 0px 0px var(--color-success);
  --shadow-card-warning: 8px 8px 0px 0px var(--color-warning);
  --shadow-card-accent: 8px 8px 0px 0px var(--color-accent);

  /* Small Shadows */
  --shadow-small: 2px 2px 0px 0px var(--color-fg);
  --shadow-small-hover: 3px 3px 0px 0px var(--color-fg);

  /* ========== Border Radius - Playful & Varied ========== */

  --radius-sm: 8px; /* Small elements */
  --radius-md: 16px; /* Medium elements */
  --radius-lg: 24px; /* Large elements */
  --radius-xl: 32px; /* Extra large containers */
  --radius-full: 9999px; /* Pills and circles */

  /* ========== Typography ========== */

  --font-display: "Outfit", system-ui, sans-serif; /* Geometric, friendly headings */
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif; /* Legible, modern body */
  --font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes - Balanced scale (Major Third 1.25) */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.563rem; /* 25px */
  --font-size-3xl: 1.953rem; /* 31px */
  --font-size-4xl: 2.441rem; /* 39px */
  --font-size-5xl: 3.052rem; /* 49px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== Spacing ========== */

  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */

  /* ========== Borders ========== */

  --border-width: 2px; /* Chunky borders by default */
  --border-color: var(--color-fg);

  /* ========== Transitions - Bouncy & Elastic ========== */

  --transition-fast: 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-slow: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========== Z-Index ========== */

  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-tooltip: 60;

  /* ========== Breakpoints (for reference) ========== */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}