/* ==========================================================================
Design System — Tokens
"Bangkok Neon Lounge" (Dark-only)
==========================================================================
2-Layer token model:
Layer 1 — Primitive (원시)
팔레트·스케일 그 자체. 의미 없음. 리브랜딩 시에만 건드린다.
Layer 2 — Semantic (의미)
"이 색/크기가 어디에 쓰이는가"를 표현. 컴포넌트 CSS는 이 층만 참조.
컴포넌트 CSS에서는 원시 토큰(--neutral-10 등)을 직접 쓰지 말 것.
원시는 오직 의미 토큰의 value로만 사용한다.
사용처: web/ 전체 페이지의 최상단에 include.
========================================================================== */
:root {
/* ======================================================================
LAYER 1 — PRIMITIVE
====================================================================== */
/* ---- Neutrals (near-black → off-white) ---- */
--neutral-0: #000000;
--neutral-5: #ffffff; /* text on Bangkok gradient */
--neutral-10: #040611; /* canvas */
--neutral-20: #070b16; /* elevated surface */
--neutral-30: #0c1222; /* card */
--neutral-40: #141d33; /* inset / active */
--neutral-50: #26324b; /* divider */
--neutral-60: #3d4d70; /* strong divider */
--neutral-70: #707b99; /* faint text */
--neutral-80: #a9b2ca; /* muted text */
--neutral-90: #f7f8ff; /* primary text */
--white: #ffffff;
/* ---- Bangkok blue-violet signature accent ---- */
--lime-400: #a786ff; /* hover */
--lime-500: #8a5cff; /* base */
--lime-600: #2c8dff; /* deep */
/* ---- Reserved hues ---- */
--orange-500: #ff7a45; /* warn / "임시" tag ONLY */
--amber-400: #65e8ff; /* cyan highlight */
/* ---- Translucent overlays (derived) ---- */
--alpha-ink-70: rgba(8, 9, 11, 0.70);
--alpha-ink-78: rgba(8, 9, 11, 0.78);
--alpha-ink-92: rgba(8, 9, 11, 0.92);
--alpha-white-06: rgba(255, 255, 255, 0.06);
--alpha-white-08: rgba(255, 255, 255, 0.08);
--alpha-white-12: rgba(255, 255, 255, 0.12);
--alpha-white-18: rgba(255, 255, 255, 0.18);
--alpha-white-25: rgba(255, 255, 255, 0.25);
--alpha-white-32: rgba(255, 255, 255, 0.32);
--alpha-lime-06: rgba(138, 92, 255, 0.06);
--alpha-lime-10: rgba(138, 92, 255, 0.10);
--alpha-lime-14: rgba(138, 92, 255, 0.14);
--alpha-lime-40: rgba(138, 92, 255, 0.40);
--alpha-lime-45: rgba(44, 141, 255, 0.45);
--alpha-warn-10: rgba(255, 122, 69, 0.10);
--alpha-warn-30: rgba(255, 122, 69, 0.30);
/* ---- Font families ---- */
--font-family-display: 'Space Grotesk', 'Noto Sans KR', sans-serif;
--font-family-body: 'Inter', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
--font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* ---- Font size scale (number = target px, clamp for display) ---- */
--fs-100: 10px; /* micro overline */
--fs-200: 11px; /* eyebrow, meta, tag */
--fs-300: 12px; /* caption, tiny btn */
--fs-400: 13px; /* small body */
--fs-500: 14px; /* default UI text */
--fs-600: 15px; /* body emphasis */
--fs-700: 18px; /* lead / section sub */
--fs-800: 22px; /* h3 */
--fs-900: 28px; /* h2 small */
--fs-1000: 40px; /* h1 md */
--fs-1100: 56px; /* h1 lg */
--fs-1200: 72px; /* display md */
--fs-1300: clamp(44px, 6.8vw, 96px); /* display hero */
/* ---- Font weights ---- */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* ---- Line heights ---- */
--lh-tight: 1;
--lh-display: 1.05;
--lh-heading: 1.2;
--lh-ui: 1.4;
--lh-body: 1.6;
/* ---- Letter spacing ---- */
--ls-tight-3: -0.03em;
--ls-tight-2: -0.025em;
--ls-tight-1: -0.01em;
--ls-normal: 0;
--ls-wide-1: 0.08em;
--ls-wide-2: 0.12em;
--ls-wide-3: 0.18em;
--ls-wider: 0.22em;
/* ---- Spacing scale (4px base) ---- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-28: 112px;
/* ---- Radii ---- */
--radius-xs: 4px; /* scrollbar, micro chip */
--radius-sm: 6px;
--radius-md: 8px; /* buttons, nav items */
--radius-lg: 12px; /* popover, small card */
--radius-xl: 14px;
--radius-2xl: 18px; /* feature card */
--radius-pill: 999px;
--radius-circle: 50%;
/* ---- Elevation (dark theme) ---- */
--shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 22px -6px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 24px 40px -12px rgba(0, 0, 0, 0.55);
--shadow-xl: 0 40px 80px -16px rgba(0, 0, 0, 0.65);
--shadow-accent-sm: 0 8px 24px -6px var(--alpha-lime-40);
--shadow-accent-md: 0 14px 30px -8px var(--alpha-lime-45);
--shadow-focus: 0 0 0 3px var(--alpha-lime-40);
/* ---- Motion — durations ---- */
--dur-instant: 100ms;
--dur-fast: 150ms; /* button press */
--dur-base: 200ms; /* hover default */
--dur-moderate: 300ms;
--dur-drawer: 350ms;
--dur-emphasized: 500ms; /* card hover lift */
--dur-page: 900ms; /* fullpage transition */
--dur-slideshow: 1000ms; /* hero crossfade */
--dur-kenburns: 7000ms; /* slow drift */
/* ---- Motion — easings ---- */
--ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-page: cubic-bezier(0.70, 0.00, 0.20, 1);
--ease-linear: linear;
/* ---- Layout constants ---- */
--header-h: 64px;
--sidebar-w: 76px;
--content-max: 1400px;
--content-pad: 56px; /* desktop edge padding */
--content-pad-md: 36px; /* tablet */
--content-pad-sm: 20px; /* mobile */
/* ---- Z-index scale ---- */
--z-base: 1;
--z-raised: 5;
--z-dropdown: 200;
--z-sticky: 800;
--z-drawer: 900;
--z-header: 1000;
--z-sidebar: 1100;
--z-modal: 1200;
--z-toast: 1300;
--z-tooltip: 1400;
/* ---- Breakpoints (JS / documentation — CSS uses numeric @media) ---- */
--bp-sm: 768px;
--bp-md: 992px;
--bp-lg: 1200px;
/* ======================================================================
LAYER 2 — SEMANTIC
컴포넌트 CSS는 이 층만 참조.
====================================================================== */
/* ---- Surface ---- */
--color-bg: var(--neutral-10); /* canvas */
--color-bg-elevated: var(--neutral-20); /* card / input */
--color-bg-elevated-2: var(--neutral-30); /* popover / hover */
--color-bg-inset: var(--neutral-40);
--color-bg-scrim: var(--alpha-ink-78); /* fixed header / modal bg */
--color-bg-scrim-strong:var(--alpha-ink-92);
/* ---- Border ---- */
--color-border: var(--neutral-50);
--color-border-strong: var(--neutral-60);
--color-border-subtle: var(--alpha-white-06);
/* ---- Text ---- */
--color-text: var(--neutral-90); /* primary */
--color-text-muted: var(--neutral-80); /* secondary */
--color-text-faint: var(--neutral-70); /* tertiary / disabled */
--color-text-inverse: var(--neutral-5); /* on Bangkok gradient */
--color-text-accent: var(--lime-500);
--color-text-warn: var(--orange-500);
/* ---- Accent (lime) ---- */
--color-accent: var(--lime-500);
--color-accent-hover: var(--lime-400);
--color-accent-deep: var(--lime-600);
--color-accent-soft: var(--alpha-lime-14);
--color-accent-glow: var(--alpha-lime-10);
--color-accent-wash: var(--alpha-lime-06);
/* ---- Feedback ---- */
--color-success: var(--amber-400); /* cyan success/info */
--color-warn: var(--orange-500); /* "임시" tag only */
--color-warn-bg: var(--alpha-warn-10);
--color-warn-border: var(--alpha-warn-30);
--color-bonus: var(--amber-400); /* bonus star */
/* ---- Focus ring ---- */
--color-focus: var(--lime-500);
--shadow-focus-ring: var(--shadow-focus);
/* ---- Typography — role tokens ---- */
/* Display — 히어로·대형 숫자 */
--type-display-hero-size: var(--fs-1300);
--type-display-hero-weight: var(--fw-bold);
--type-display-hero-lh: var(--lh-display);
--type-display-hero-ls: var(--ls-tight-3);
--type-display-lg-size: var(--fs-1100); /* 섹션 타이틀 */
--type-display-md-size: var(--fs-1000);
--type-display-lh: var(--lh-tight);
--type-display-ls: var(--ls-tight-2);
/* Heading */
--type-h1-size: var(--fs-900);
--type-h2-size: var(--fs-800);
--type-h3-size: var(--fs-700);
--type-heading-weight: var(--fw-bold);
--type-heading-lh: var(--lh-heading);
--type-heading-ls: var(--ls-tight-1);
/* Body */
--type-body-lg-size: var(--fs-700);
--type-body-md-size: var(--fs-600);
--type-body-size: var(--fs-500);
--type-body-sm-size: var(--fs-400);
--type-body-weight: var(--fw-regular);
--type-body-lh: var(--lh-body);
/* UI (버튼·내비) */
--type-ui-size: var(--fs-500);
--type-ui-weight: var(--fw-medium);
--type-ui-lh: var(--lh-ui);
/* Label / Eyebrow — editorial meta */
--type-eyebrow-size: var(--fs-200);
--type-eyebrow-weight: var(--fw-semibold);
--type-eyebrow-ls: var(--ls-wide-3);
--type-overline-size: var(--fs-100);
--type-overline-weight: var(--fw-semibold);
--type-overline-ls: var(--ls-wider);
--type-caption-size: var(--fs-300);
--type-caption-weight: var(--fw-regular);
/* ---- Component role tokens (자주 쓰는 조합) ---- */
--header-bg: var(--color-bg-scrim);
--header-blur: blur(14px) saturate(140%);
--sidebar-bg: var(--color-bg);
--card-bg: var(--color-bg-elevated);
--card-bg-hover: var(--color-bg-elevated-2);
--card-border: var(--color-border);
--card-radius: var(--radius-2xl);
--card-pad: var(--space-8) var(--space-7);
--card-shadow: var(--shadow-md);
--btn-radius: var(--radius-pill);
--btn-padding-md: 13px var(--space-6);
--btn-padding-lg: 14px var(--space-7);
--input-bg: var(--color-bg-elevated);
--input-border: var(--color-border);
--input-border-hover: var(--color-border-strong);
--input-radius: var(--radius-md);
--input-padding: 10px var(--space-3);
}
/* BangkokPC light theme: shared by member, franchise and administrator pages. */
:root {
color-scheme: light;
--neutral-10:#f8f7fc; --neutral-20:#ffffff; --neutral-30:#f7f5ff;
--neutral-40:#efecf7; --neutral-50:#e5e2ef; --neutral-60:#c5bfd6;
--neutral-70:#6b687b; --neutral-80:#575467; --neutral-90:#151525;
--lime-400:#6330df; --lime-500:#7038ef; --lime-600:#4060dd;
--amber-400:#087c75; --orange-500:#b54a13;
--alpha-white-06:rgba(55,40,95,.06); --alpha-white-08:rgba(55,40,95,.08);
--alpha-white-12:rgba(55,40,95,.12); --alpha-white-18:rgba(55,40,95,.18);
--alpha-white-25:rgba(55,40,95,.25); --alpha-white-32:rgba(55,40,95,.32);
--color-bg-scrim:rgba(255,255,255,.96); --color-bg-scrim-strong:rgba(255,255,255,.99);
--shadow-sm:0 4px 12px rgba(45,32,80,.04); --shadow-md:0 8px 22px rgba(45,32,80,.06);
--shadow-lg:0 24px 40px rgba(45,32,80,.08); --shadow-xl:0 40px 80px rgba(45,32,80,.09);
}