/* ============================================================
   NTF Studio — Design Tokens v2
   Neo-Tokyo Artisan Guild — 匠人美学
   ============================================================ */
:root {
    /* ── Core Palette ── */
    --color-void:         #080810;
    --color-abyss:        #0f0f1a;
    --color-deep:         #151525;
    --color-surface:      #1c1c32;
    --color-elevated:     #252540;
    --color-overlay:      #2e2e4d;

    --color-vermilion:    #e94560;   /* primary red */
    --color-vermilion-glow: rgba(233,68,96,0.5);
    --color-vermilion-soft: rgba(233,68,96,0.1);

    --color-gold:         #d4a853;   /* gold leaf */
    --color-gold-glow:    rgba(212,168,83,0.4);
    --color-gold-soft:    rgba(212,168,83,0.08);

    --color-teal:         #2dd4bf;   /* accent teal */
    --color-teal-glow:    rgba(45,212,191,0.35);

    --color-indigo:       #6366f1;   /* accent indigo */
    --color-sakura:       #f472b6;   /* soft pink */

    --color-text:         #ece4d8;   /* warm paper white */
    --color-text-body:    #b8ad9e;   /* muted tan */
    --color-text-dim:     #6b6058;   /* dim */
    --color-text-inverse: #0a0a14;

    --color-border:       rgba(255,255,255,0.05);
    --color-border-active: rgba(233,68,96,0.3);
    --color-border-gold:  rgba(212,168,83,0.2);

    --color-success:      #34d399;
    --color-error:        #f87171;
    --color-warning:      #fbbf24;

    /* ── Typography ── */
    --font-display:  'Cinzel', 'Noto Serif SC', serif;
    --font-body:     'Zen Kaku Gothic New', 'Noto Sans SC', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;
    --font-cjk:      'Noto Serif SC', serif;

    --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:   2rem;
    --text-4xl:   2.75rem;
    --text-hero:  clamp(3.5rem, 8vw, 5.5rem);

    /* ── Spacing ── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-section: clamp(5rem, 12vw, 10rem);

    /* ── Radii ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows & Glows ── */
    --shadow-card: 0 1px 0 rgba(255,255,255,0.03), 0 8px 32px rgba(0,0,0,0.5);
    --shadow-lg:   0 16px 48px rgba(0,0,0,0.6);
    --glow-vermilion: 0 0 32px var(--color-vermilion-glow);
    --glow-gold:   0 0 24px var(--color-gold-glow);
    --glow-teal:   0 0 20px var(--color-teal-glow);

    /* ── Transitions ── */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:  0.15s;
    --dur-base:  0.35s;
    --dur-slow:  0.6s;

    /* ── Z-Index ── */
    --z-drop:   100;
    --z-sticky: 200;
    --z-overlay:300;
    --z-modal:  400;
    --z-toast:  500;
}

/* ── Grain texture overlay ── */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    opacity: 0.03;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}