/* ============================================
   Design Tokens — "serioes x rockig"
   Dark theme, amber accent, bold type
   ============================================ */
:root {
    /* Background */
    --bg: #050505;
    --bg-surface: #131313;
    --bg-surface-2: #1a1a1a;
    --bg-elevated: #222222;

    /* Text */
    --text: #ededed;
    --text-muted: #999999;
    --text-subtle: #666666;

    /* Accent — amber/gold */
    --accent: #e5a000;
    --accent-hover: #f0b429;
    --accent-rgb: 229, 160, 0;
    --accent-muted: rgba(229, 160, 0, 0.15);

    /* Borders */
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px rgba(var(--accent-rgb), 0.2);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 0.3s var(--ease);
    --transition-slow: 0.5s var(--ease);

    /* Typography scale */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.5rem;

    /* Grain texture overlay */
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

    /* Diagonal stripe pattern */
    --stripe: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(var(--accent-rgb), 0.06) 4px,
        rgba(var(--accent-rgb), 0.06) 5px
    );
}