/* Design Tokens — Neo-Brutalist Monochromatic */

/* Import */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* ── Colors: Pure Monochromatic ── */
    --black:   #0A0A0A;
    --gray-90: #1A1A1A;
    --gray-80: #2A2A2A;
    --gray-60: #555555;
    --gray-40: #888888;
    --gray-20: #C8C8C8;
    --gray-10: #E8E8E8;
    --gray-05: #F4F4F4;
    --white:   #FAFAFA;

    /* Semantic aliases */
    --color-bg:           var(--white);
    --color-bg-subtle:    var(--gray-05);
    --color-bg-muted:     var(--gray-10);
    --color-bg-hover:     var(--gray-10);
    --color-bg-inverse:   var(--black);

    --color-text:          var(--black);
    --color-text-secondary: var(--gray-60);
    --color-text-muted:    var(--gray-40);
    --color-text-inverse:  var(--white);

    /* Accent = black (monochromatic) */
    --color-accent:       var(--black);
    --color-accent-hover: var(--gray-90);
    --color-accent-subtle: var(--gray-10);

    --color-border:        var(--black);
    --color-border-subtle: var(--gray-20);
    --color-border-light:  var(--gray-10);

    /* ── Neo-Brutalist Shadows (hard, no blur) ── */
    --shadow-brutal-sm: 3px 3px 0 var(--black);
    --shadow-brutal:    4px 4px 0 var(--black);
    --shadow-brutal-md: 6px 6px 0 var(--black);
    --shadow-brutal-lg: 8px 8px 0 var(--black);

    /* Keep legacy names for compatibility */
    --shadow-sm: var(--shadow-brutal-sm);
    --shadow-md: 0 4px 6px rgba(0,0,0,.08);
    --shadow-lg: var(--shadow-brutal);
    --shadow-xl: var(--shadow-brutal-lg);

    /* ── Typography ── */
    --font-family:       'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono:  'Space Mono', 'Courier New', monospace;

    --text-display: clamp(3rem, 7vw, 5.5rem);
    --text-h1:      clamp(2rem, 4vw, 3.25rem);
    --text-h2:      clamp(1.5rem, 3vw, 2.25rem);
    --text-h3:      1.375rem;
    --text-h4:      1.125rem;
    --text-body:    1rem;
    --text-small:   0.875rem;
    --text-caption: 0.75rem;

    --font-regular:  400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    --line-height-tight:   1.1;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    /* ── Border ── */
    --border-width: 2px;
    --border: var(--border-width) solid var(--black);
    --border-subtle: 1px solid var(--gray-20);

    /* ── Radius: mostly none (brutalist) ── */
    --radius-sm:   0px;
    --radius-md:   0px;
    --radius-lg:   0px;
    --radius-xl:   0px;
    --radius-2xl:  0px;
    --radius-full: 9999px;   /* pills only */

    /* ── Spacing ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ── */
    --max-width:        1200px;
    --max-width-narrow: 780px;
    --max-width-wide:   1400px;

    /* ── Transitions ── */
    --transition-fast:   100ms ease;
    --transition-base:   150ms ease;
    --transition-slow:   250ms ease;
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-Index ── */
    --z-fixed:   300;
    --z-modal:   400;
    --z-tooltip: 500;
}