/*
  ONHARDY Studio — Design Tokens
  Color source: user-supplied "BI Color System" proposal (2026-07-18 chat upload).
  Signal Green is confirmed by that document to equal Cyan 500 (#2DB6DA) —
  kept as its own variable so it can be repointed the moment a distinct
  HEX is issued, without touching every call site.
*/

:root {
  /* ---- Navy scale ---- */
  --navy-900: #0A0F12;
  --navy-600: #111B20;
  --navy-500: #2B3940;
  --navy-400: #5B6C75;
  --navy-300: #93A3AC;
  --navy-200: #C7D0D5;
  --navy-100: #E8ECEE;

  /* ---- Cyan scale ---- */
  --cyan-600: #1698BB;
  --cyan-500: #2DB6DA;
  --cyan-400: #63C9E5;
  --cyan-300: #9DDEEF;
  --cyan-200: #CBEFF8;
  --cyan-100: #EAF8FC;

  /* ---- Neutrals ---- */
  --white: #FFFFFF;
  --soft-white: #F7F9FA;
  --light-gray: #E5EAED;
  --mid-gray: #A8B3BA;
  --dark-gray: #4E5A61;
  --black: #0A0F12;

  /* ---- State / accent ---- */
  --live-red: #FF4D5E;
  --signal-green: #2DB6DA; /* = cyan-500, confirmed by BI color doc */
  --deep-blue: #3941D9;

  /* ---- Semantic ---- */
  --bg-base: var(--navy-600);
  --bg-raised: var(--navy-500);
  --bg-raised-glass: rgba(43, 57, 64, 0.56);
  --bg-sunken: var(--navy-900);
  --border-hairline: rgba(229, 234, 237, 0.12);
  --border-hairline-strong: rgba(229, 234, 237, 0.22);

  --text-strong: var(--white);
  --text-primary: var(--soft-white);
  --text-muted: var(--light-gray);
  --text-meta: var(--mid-gray);
  --text-on-accent: var(--navy-600);

  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-soft: var(--cyan-200);
  --accent-glow: rgba(45, 182, 218, 0.35);
  --live-glow: rgba(45, 182, 218, 0.55);

  /* ---- Type ---- */
  --font-kr: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en: 'Pretendard', 'Inter', sans-serif;

  --fs-display: clamp(2.6rem, 2rem + 3vw, 5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --content-max: 1440px;
  --edge-pad: 6vw;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---- Motion ---- */
  --dur-fast: 220ms;
  --dur-base: 600ms;
  --dur-slow: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Shadow / glow ---- */
  --shadow-card: 0 12px 32px rgba(10, 15, 18, 0.45);
  --shadow-glow-cyan: 0 0 0 1px rgba(45, 182, 218, 0.4), 0 0 24px rgba(45, 182, 218, 0.25);
  --shadow-glow-live: 0 0 0 1px rgba(45, 182, 218, 0.55), 0 0 18px rgba(45, 182, 218, 0.45);
}

@media (prefers-color-scheme: light) {
  /* Site is an intentionally dark, single-theme brand experience — no light
     variant is defined by brand guidance. Token block kept dark on purpose. */
}