/* ==========================================================================
   Bad MILFs Frontend — Design Tokens
   Single source of truth for the entire frontend UI.
   /css/tokens-theme.css

   Same schema/variable names as every sibling site (network-css-token-system
   skill) -- only the color values differ. Accent: Pink-500 (#ec4899) as of 2026-09-15 (was Violet-500 #8b5cf6),
   chosen 2026-09-08 (see network-site-scaffold's color-palette-registry.md).
   CTA text is WHITE, not near-black -- violet is dark/saturated enough that
   white contrasts better, unlike the warm light accents (amber/peach/rose)
   used elsewhere in the network where near-black has been correct.
   ========================================================================== */

:root {

    /* ======================
       COLORS — Base
       ====================== */
    --color-white:                  rgba(255, 255, 255, 1);

    /* ======================
       COLORS — Surface & Background
       ====================== */
    --color-bg-primary:             rgba(8, 8, 12, 1);
    --color-bg-surface:             rgba(18, 18, 24, 1);
    --color-bg-elevated:            rgba(28, 28, 36, 1);
    --color-bg-overlay:             rgba(0, 0, 0, 0.7);

    /* ======================
       COLORS — Border
       ====================== */
    --color-border:                 rgba(45, 45, 60, 1);
    --color-border-hover:           rgba(236, 72, 153, 1);

    /* ======================
       COLORS — Text
       ====================== */
    --color-text-primary:           rgba(250, 250, 255, 1);
    --color-text-secondary:         rgba(170, 170, 190, 1);
    --color-text-muted:             rgba(120, 120, 140, 1);
    --color-text-accent:            rgba(236, 72, 153, 1);

    /* ======================
       COLORS — Accent / Interactive
       ====================== */
    --color-accent:                 rgba(236, 72, 153, 1);      /* Pink-500 #ec4899 -- buzz.xxx identity, 2026-09-13 decision */
    --color-accent-hover:           rgba(244, 114, 182, 1);     /* Pink-400 #f472b6 */
    --color-accent-active:          rgba(219, 39, 119, 1);      /* Pink-600 #db2777 */
    --color-accent-subtle:          rgba(236, 72, 153, 0.15);

    /* ======================
       COLORS — CTA / Conversion
       ====================== */
    --color-cta-bg:                 rgba(124, 58, 237, 1);      /* #7c3aed */
    --color-cta-bg-hover:           rgba(109, 40, 217, 1);      /* darker #6d28d9 */
    --color-cta-text:               rgba(255, 255, 255, 1);     /* white -- better contrast on violet than near-black */

    --color-info:                   #3b82f6;
    --color-info-subtle:            rgba(59, 130, 246, 0.1);
    --color-info-border:            rgba(59, 130, 246, 0.2);

    --color-warning:                #f59e0b;
    --color-warning-subtle:         rgba(245, 158, 11, 0.1);
    --color-warning-border:         rgba(245, 158, 11, 0.2);

    --color-success:                #22c55e;
    --color-success-subtle:         rgba(34, 197, 94, 0.1);
    --color-success-border:         rgba(34, 197, 94, 0.2);

    --color-danger:                 #ef4444;
    --color-danger-subtle:          rgba(239, 68, 68, 0.1);
    --color-danger-border:          rgba(239, 68, 68, 0.2);

    /* ======================
       COLORS — Overlays
       ====================== */
    --color-overlay-dark:           rgba(0, 0, 0, 0.92);
    --color-overlay-age-gate:       rgba(4, 4, 8, 0.97);

    /* ======================
       COLORS — White Opacity Variants
       ====================== */
    --color-white-04:               rgba(255, 255, 255, 0.04);
    --color-white-08:               rgba(255, 255, 255, 0.08);
    --color-white-10:               rgba(255, 255, 255, 0.1);
    --color-white-50:               rgba(255, 255, 255, 0.5);
    --color-white-65:               rgba(255, 255, 255, 0.65);
    --color-white-75:               rgba(255, 255, 255, 0.75);
    --color-white-90:               rgba(255, 255, 255, 0.9);
    --color-black-75:               rgba(0, 0, 0, 0.75);

    /* ======================
       TYPOGRAPHY — Font Families
       ====================== */
    --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono:   'SF Mono', Monaco, Consolas, 'Courier New', monospace;

    /* ======================
       TYPOGRAPHY — Font Sizes
       ====================== */
    --text-xs:      0.75rem;
    --text-sm:      0.875rem;
    --text-base:    1rem;
    --text-lg:      1.125rem;
    --text-xl:      1.25rem;
    --text-2xl:     1.5rem;
    --text-3xl:     1.875rem;
    --text-4xl:     2.25rem;

    /* ======================
       TYPOGRAPHY — Font Weights
       ====================== */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    /* ======================
       TYPOGRAPHY — Line Heights
       ====================== */
    --leading-tight:   1.25;
    --leading-snug:    1.4;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ======================
       SPACING
       ====================== */
    --spacing-1:    0.25rem;
    --spacing-2:    0.5rem;
    --spacing-3:    0.75rem;
    --spacing-4:    1rem;
    --spacing-5:    1.25rem;
    --spacing-6:    1.5rem;
    --spacing-8:    2rem;
    --spacing-10:   2.5rem;
    --spacing-12:   3rem;
    --spacing-16:   4rem;
    --spacing-20:   5rem;

    /* ======================
       BORDER RADIUS
       ====================== */
    --radius-sm:    0.25rem;
    --radius-md:    0.375rem;
    --radius-lg:    0.5rem;
    --radius-xl:    0.75rem;
    --radius-2xl:   1rem;
    --radius-full:  9999px;

    /* ======================
       SIZING
       ====================== */
    --size-focus-ring:      3px;
    --width-container:      1200px;
    --width-sidebar:        350px;
    --width-sidebar-mobile:  100%;

    --content-max-width-prose: 680px;
    --content-max-width-modal: 440px;

    /* ======================
       SHADOWS
       ====================== */
    --shadow-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:           0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg:           0 10px 15px rgba(0, 0, 0, 0.6);
    --shadow-ring-accent:  0 0 0 3px rgba(236, 72, 153, 0.3);

    --shadow-modal:        0 32px 64px rgba(0, 0, 0, 0.6);
    --shadow-dropdown:     0 8px 24px rgba(0, 0, 0, 0.45);

    /* ======================
       TRANSITIONS
       ====================== */
    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.3s ease-out;

    /* ======================
       LAYOUT
       ====================== */
    --header-height: 56px;

    /* ======================
       Z-INDEX SCALE
       ====================== */
    --z-dropdown:   100;
    --z-header:    200;
    --z-sidebar:    200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-tooltip:    500;

    --z-age-gate:   9999;

}