/* ================================================================
   yebura VI$UALIZER — Design System
   ================================================================
   Single Source of Truth for all visual tokens.
   Both LP (lp.css) and APP (style.css) MUST import this file.
   Never hardcode color/font/spacing values outside this system.
   ================================================================ */

/* ---- Google Fonts ---- */
/* Space Grotesk: Geometric, cosmic headings
   Inter: Clean, readable body text
   JetBrains Mono: Technical/numeric accents
   Noto Sans JP: Japanese typography support */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500;600&display=swap');

/* ================================================================
   1. COLOR TOKENS
   ================================================================ */
:root {
    /* --- Core Palette --- */
    --color-void: #030305;
    /* Deep Void Black — primary background */
    --color-abyss: #0a0a0f;
    /* Abyss — secondary background */
    --color-nebula: #13131a;
    /* Nebula Dark — elevated surfaces */
    --color-cosmos: #1a1a24;
    /* Cosmos — cards, panels */
    --color-asteroid: #24243a;
    /* Asteroid — borders, dividers */

    /* --- Text --- */
    --color-stardust: #F5F5F7;
    /* Stardust White — primary text */
    --color-moonlight: #D2D2D7;
    /* Moonlight — secondary text */
    --color-comet: #86868B;
    /* Comet Gray — tertiary/muted text */
    --color-shadow: #48484A;
    /* Shadow — disabled, placeholder */

    /* --- Accent: Cosmic Violet --- */
    --color-violet: #a78bfa;
    /* Primary accent */
    --color-violet-bright: #c4b5fd;
    /* Lighter variant */
    --color-violet-dim: #7c3aed;
    /* Deeper variant */
    --color-violet-glow: rgba(167, 139, 250, 0.4);
    /* Glow effect */
    --color-violet-subtle: rgba(167, 139, 250, 0.08);
    /* Hover fill */

    /* --- Accent: Plasma Blue --- */
    --color-plasma: #60a5fa;
    /* Secondary accent */
    --color-plasma-glow: rgba(96, 165, 250, 0.3);

    /* --- Functional --- */
    --color-danger: #ff3366;
    /* Recording, errors */
    --color-danger-glow: rgba(255, 51, 102, 0.4);
    --color-success: #34d399;
    /* Active, success */

    /* --- Glass / Surface --- */
    --glass-bg: rgba(20, 20, 30, 0.4);
    --glass-bg-heavy: rgba(10, 10, 15, 0.55);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-border-active: rgba(255, 255, 255, 0.18);

    /* ================================================================
       2. TYPOGRAPHY TOKENS
       ================================================================ */

    /* --- Font Families --- */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;

    /* --- Font Sizes (Modular Scale 1.25) --- */
    --text-xs: 0.75rem;
    /* 12px — captions, labels */
    --text-sm: 0.85rem;
    /* 13.6px — small body */
    --text-base: 1rem;
    /* 16px — body */
    --text-md: 1.125rem;
    /* 18px — large body */
    --text-lg: 1.25rem;
    /* 20px — sub-headings */
    --text-xl: 1.5rem;
    /* 24px — section titles */
    --text-2xl: 2rem;
    /* 32px — feature headings */
    --text-3xl: 2.5rem;
    /* 40px — page headings */
    --text-4xl: 3.5rem;
    /* 56px — hero sub */
    --text-hero: clamp(2.25rem, 10vw, 5.5rem);
    /* Hero headline — adjusted for mobile */

    /* --- Font Weights --- */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* --- Line Heights --- */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* --- Letter Spacing --- */
    --tracking-tight: -0.04em;
    /* Hero titles */
    --tracking-normal: -0.01em;
    /* Body */
    --tracking-wide: 0.05em;
    /* Labels, buttons */
    --tracking-wider: 0.1em;
    /* Eyebrows, uppercase */
    --tracking-widest: 0.2em;
    /* Badges */

    /* ================================================================
       3. SPACING TOKENS
       ================================================================ */
    --space-xs: 0.25rem;
    /* 4px */
    --space-sm: 0.5rem;
    /* 8px */
    --space-md: 1rem;
    /* 16px */
    --space-lg: 1.5rem;
    /* 24px */
    --space-xl: 2rem;
    /* 32px */
    --space-2xl: 3rem;
    /* 48px */
    --space-3xl: 4rem;
    /* 64px */
    --space-4xl: 6rem;
    /* 96px */
    --space-5xl: 8rem;
    /* 128px */

    /* ================================================================
       4. BORDER & RADIUS TOKENS
       ================================================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;

    /* ================================================================
       5. TRANSITION TOKENS
       ================================================================ */
    --ease-fast: 0.15s ease;
    --ease-normal: 0.2s ease;
    --ease-smooth: 0.3s ease;
    --ease-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-luxury: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --ease-dramatic: 1.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* ================================================================
       6. SHADOW & ELEVATION TOKENS
       ================================================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 30px var(--color-violet-glow);
    --shadow-accent: 0 0 20px var(--color-violet-glow), 0 0 60px rgba(167, 139, 250, 0.1);

    /* ================================================================
       7. Z-INDEX SCALE
       ================================================================ */
    --z-canvas: 0;
    --z-content: 1;
    --z-nav: 10;
    --z-overlay: 50;
    --z-modal: 100;
    --z-toast: 200;
}

/* ================================================================
   8. GLOBAL RESETS & BASE STYLES
   ================================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background: var(--color-void);
    color: var(--color-stardust);
    line-height: var(--leading-normal);
}

/* Japanese text automatically uses Noto Sans JP */
:lang(ja) {
    font-family: var(--font-body), var(--font-jp);
}

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
    font-family: var(--font-heading), var(--font-jp);
}

/* ================================================================
   9. SHARED COMPONENT PATTERNS
   ================================================================ */

/* --- Headings --- */
.ds-heading-hero {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-stardust);
}

.ds-heading-section {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    letter-spacing: -0.02em;
    line-height: var(--leading-snug);
    color: var(--color-stardust);
}

.ds-heading-panel {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-comet);
}

/* --- Body Text --- */
.ds-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-light);
    color: var(--color-moonlight);
    line-height: var(--leading-relaxed);
}

.ds-body-sm {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-comet);
}

/* --- Eyebrow / Overline --- */
.ds-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-comet);
}

/* --- Mono / Technical --- */
.ds-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-violet);
    letter-spacing: 0;
}

/* --- Buttons --- */
.ds-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-pill);
    background: var(--color-stardust);
    color: var(--color-void);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform var(--ease-normal), opacity var(--ease-normal);
}

.ds-btn-primary:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.ds-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-comet);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: color var(--ease-smooth);
}

.ds-btn-ghost:hover {
    color: var(--color-stardust);
}

/* --- Glass Card --- */
.ds-glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    backdrop-filter: blur(40px) saturate(220%);
    -webkit-backdrop-filter: blur(40px) saturate(220%);
    transition: all var(--ease-luxury);
}

.ds-glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--glass-border-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* --- Form Inputs --- */
.ds-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-asteroid);
    color: var(--color-stardust);
    font-family: var(--font-body);
    font-size: var(--text-md);
    padding: var(--space-sm) 0;
    outline: none;
    transition: border-color var(--ease-smooth);
}

.ds-input:focus {
    border-bottom-color: var(--color-stardust);
}

.ds-input::placeholder {
    color: var(--color-shadow);
    font-weight: var(--weight-light);
}

/* --- Scrollbar (WebKit) --- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-asteroid);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-comet);
}