/**
 * variables.css - Design Tokens
 *
 * CSS custom properties for the Kaysha.uk v2 design system.
 * All colors, typography, spacing, and effects are defined here.
 */

:root {
    /* ========================================
       COLORS - Primary Brand
       ======================================== */
    --color-primary-1: #667eea;
    --color-primary-2: #764ba2;
    --color-primary-3: #f093fb;

    /* ========================================
       COLORS - Accent
       ======================================== */
    --color-accent-red: #ff6b6b;
    --color-accent-yellow: #feca57;
    --color-accent-purple: #6c5ce7;
    --color-accent-orange: #e17055;

    /* ========================================
       COLORS - Text
       ======================================== */
    --color-text-primary: #2d3436;
    --color-text-muted: #b2bec3;
    --color-text-light: #666;
    --color-text-dark: #333;
    --color-text-white: #fff;

    /* ========================================
       COLORS - Surfaces
       ======================================== */
    --color-surface-card: rgba(255, 255, 255, 0.95);
    --color-surface-white: #ffffff;
    --color-surface-overlay: rgba(255, 255, 255, 0.3);

    /* ========================================
       GRADIENTS
       ======================================== */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --gradient-title: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #ff6b6b, #feca57, #667eea);
    --gradient-joke: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --gradient-fairy: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%);
    --gradient-numpty: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 50%, #d4fc79 100%);
    --gradient-hover: linear-gradient(45deg, #ff6b6b, #feca57);
    --gradient-gold: linear-gradient(135deg, #ffd700, #ffaa00);

    /* ========================================
       TYPOGRAPHY - Font Family
       ======================================== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* ========================================
       TYPOGRAPHY - Font Sizes
       ======================================== */
    --font-size-xs: 0.6rem;    /* tiny hints */
    --font-size-sm: 0.7rem;    /* small labels */
    --font-size-md: 0.8rem;    /* labels, small text */
    --font-size-base: 1rem;    /* body text */
    --font-size-lg: 1.2rem;    /* subtitle */
    --font-size-xl: 2rem;      /* section headings */
    --font-size-2xl: 2.5rem;   /* large headings */
    --font-size-3xl: 3rem;     /* h1 title */

    /* ========================================
       TYPOGRAPHY - Line Height
       ======================================== */
    --line-height-tight: 1.2;
    --line-height-base: 1.4;
    --line-height-relaxed: 1.6;

    /* ========================================
       SPACING
       ======================================== */
    --space-1: 5px;
    --space-2: 8px;
    --space-3: 10px;
    --space-4: 15px;
    --space-5: 20px;
    --space-6: 25px;
    --space-7: 30px;
    --space-8: 40px;
    --space-9: 50px;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 15px;
    --radius-md: 20px;
    --radius-lg: 30px;

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-xs: 0 5px 15px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 5px 20px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-background: 0;
    --z-content: 10;
    --z-floating: 30;
    --z-overlay: 50;
    --z-modal: 100;
    --z-tooltip: 200;
}