/* ═══════════════════════════════════════════════════════════════
   PPN Network v3 — "Crystalline Amethyst" Design System
   Variables, Tokens & Custom Properties
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── Core Purple Palette ── */
    --amethyst-50:  #faf5ff;
    --amethyst-100: #f3e8ff;
    --amethyst-200: #e9d5ff;
    --amethyst-300: #d8b4fe;
    --amethyst-400: #c084fc;
    --amethyst-500: #a855f7;
    --amethyst-600: #9333ea;
    --amethyst-700: #7e22ce;
    --amethyst-800: #6b21a8;
    --amethyst-900: #581c87;
    --amethyst-950: #3b0764;

    /* ── Lavender Accent ── */
    --lavender-50:  #f5f3ff;
    --lavender-100: #ede9fe;
    --lavender-200: #ddd6fe;
    --lavender-300: #c4b5fd;
    --lavender-400: #a78bfa;

    /* ── Neutral (cool silver) ── */
    --n-0:    #ffffff;
    --n-25:   #fafbfc;
    --n-50:   #f4f5f7;
    --n-100:  #ebedf0;
    --n-150:  #dfe2e6;
    --n-200:  #d1d5db;
    --n-300:  #b0b7c0;
    --n-400:  #8a94a0;
    --n-500:  #687280;
    --n-600:  #4f5966;
    --n-700:  #3a424d;
    --n-800:  #262d36;
    --n-900:  #151a21;

    /* ── Status Colors ── */
    --emerald:       #10b981;
    --emerald-50:    #ecfdf5;
    --emerald-100:   #d1fae5;
    --scarlet:       #ef4444;
    --scarlet-50:    #fef2f2;
    --scarlet-100:   #fee2e2;
    --gold:          #f59e0b;
    --gold-50:       #fffbeb;
    --gold-100:      #fef3c7;
    --sky:           #3b82f6;
    --sky-50:        #eff6ff;
    --sky-100:       #dbeafe;

    /* ── Semantic Aliases ── */
    --bg:            #f8f6fc;
    --bg-glass:      rgba(255, 255, 255, 0.72);
    --surface:       var(--n-0);
    --surface-glass:  rgba(255, 255, 255, 0.6);
    --surface-hover:  rgba(255, 255, 255, 0.85);
    --border:        rgba(147, 51, 234, 0.08);
    --border-strong:  rgba(147, 51, 234, 0.15);
    --border-focus:  var(--amethyst-400);
    --text:          var(--n-900);
    --text-secondary: var(--n-500);
    --text-muted:    var(--n-400);
    --primary:       var(--amethyst-600);
    --primary-soft:  var(--amethyst-50);
    --primary-hover: var(--amethyst-700);

    /* ── Typography ── */
    --font-display: 'Outfit', 'Noto Sans Thai', sans-serif;
    --font-body:    'Noto Sans Thai', 'Outfit', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    /* ── Spacing scale ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    /* ── Border radius ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 9999px;

    /* ── Elevation (glass style) ── */
    --shadow-xs: 0 1px 3px rgba(88, 28, 135, 0.04);
    --shadow-sm: 0 2px 8px rgba(88, 28, 135, 0.06);
    --shadow-md: 0 4px 16px rgba(88, 28, 135, 0.08);
    --shadow-lg: 0 8px 32px rgba(88, 28, 135, 0.10);
    --shadow-xl: 0 16px 48px rgba(88, 28, 135, 0.14);
    --shadow-glow: 0 4px 20px rgba(147, 51, 234, 0.25);
    --shadow-glow-lg: 0 8px 36px rgba(147, 51, 234, 0.30);
    --shadow-inner: inset 0 2px 4px rgba(88, 28, 135, 0.06);

    /* ── Backdrop blur ── */
    --blur-sm: blur(8px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(40px);

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.15s;
    --duration: 0.25s;
    --duration-slow: 0.4s;

    /* ── Layout ── */
    --nav-height: 68px;
    --sidebar-width: 260px;
    --container-max: 920px;
    --container-sm: 560px;
    --container-md: 720px;

    /* ── Gradients ── */
    --gradient-hero: linear-gradient(135deg, var(--amethyst-700) 0%, var(--amethyst-500) 50%, var(--lavender-400) 100%);
    --gradient-hero-soft: linear-gradient(135deg, var(--amethyst-50) 0%, var(--lavender-100) 50%, #fff 100%);
    --gradient-mesh: radial-gradient(ellipse at 20% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
                     radial-gradient(ellipse at 80% 20%, rgba(196, 181, 253, 0.10) 0%, transparent 50%),
                     radial-gradient(ellipse at 50% 100%, rgba(233, 213, 255, 0.06) 0%, transparent 50%);
    --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%);
    --gradient-gold: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
}