/* ==========================================================================
   1. DESIGN TOKENS — LIGHT
========================================================================== */

:root {

  /* ── Brand ───────────────────────────────────────────────────
     스타창작소는 별도 강한 컬러보다
     black / ivory 대비를 브랜드 컬러처럼 사용.
  ---------------------------------------------------------------- */

  --color-primary-rgb:   8 8 8;          /* #080808 */
  --color-secondary-rgb: 85 82 77;       /* warm charcoal */
  --color-accent-rgb:    17 17 17;       /* #111111 */


  /* ── Surface ──────────────────────────────────────────────────
     실제 스타창작소 페이지의 warm ivory 기반.
  ---------------------------------------------------------------- */

  --color-bg-base-rgb:      244 241 235; /* #F4F1EB */
  --color-bg-surface-rgb:   242 240 235; /* #F2F0EB */
  --color-bg-surface1-rgb:  235 232 225; /* warm ivory */
  --color-bg-surface2-rgb:  221 216 207; /* #DDD8CF */
  --color-bg-card-rgb:      248 246 242; /* subtle warm white */


  /* ── Text ───────────────────────────────────────────────────── */

  --color-text-main-rgb:     8 8 8;       /* #080808 */
  --color-text-muted-rgb:    82 79 74;
  --color-text-subtle-rgb:   121 117 110;
  --color-text-disabled-rgb: 166 161 153;


  /* ── On-color ───────────────────────────────────────────────── */

  --color-on-primary-rgb:   255 255 255;
  --color-on-secondary-rgb: 255 255 255;
  --color-on-accent-rgb:    255 255 255;

  --color-on-success-rgb:   255 255 255;
  --color-on-warning-rgb:   8 8 8;
  --color-on-danger-rgb:    255 255 255;
  --color-on-info-rgb:      255 255 255;


  /* ── Semantic State ───────────────────────────────────────────
     브랜드 팔레트와 분리된 기능성 색상.
  ---------------------------------------------------------------- */

  --color-success-rgb: 48 153 89;
  --color-warning-rgb: 190 128 22;
  --color-danger-rgb:  196 58 58;
  --color-info-rgb:    91 96 103;


  /* ── Border ───────────────────────────────────────────────────
     스타창작소 디자인은 강한 border보다
     10~20% 정도의 얇은 divider 중심.
  ---------------------------------------------------------------- */

  --color-border-muted-rgb:   218 214 207;
  --color-border-default-rgb: 194 189 181;
  --color-border-strong-rgb:  132 127 120;


  /* ── Focus ──────────────────────────────────────────────────── */

  --color-focus-rgb: var(--color-primary-rgb);


  /* ── Effects ────────────────────────────────────────────────── */

  --color-shadow-rgb:  8 8 8;
  --color-overlay-rgb: 0 0 0;


  /* ── State Layer ────────────────────────────────────────────── */

  --state-hover-opacity:    0.06;
  --state-pressed-opacity:  0.10;
  --state-focused-opacity:  0.10;
  --state-dragged-opacity:  0.14;
  --state-disabled-opacity: 0.38;


  /* ── Elevation ────────────────────────────────────────────────
     Editorial 디자인이라 shadow는 거의 사용하지 않음.
  ---------------------------------------------------------------- */

  --elevation-0: none;

  --elevation-1:
    0 1px 2px rgb(var(--color-shadow-rgb) / 0.035);

  --elevation-2:
    0 4px 14px rgb(var(--color-shadow-rgb) / 0.055);

  --elevation-3:
    0 12px 32px rgb(var(--color-shadow-rgb) / 0.075);

  --elevation-4:
    0 24px 64px rgb(var(--color-shadow-rgb) / 0.10);


  /* ── Radius ───────────────────────────────────────────────────
     스타창작소는 rounded SaaS 느낌보다
     직선적 editorial layout을 우선.
  ---------------------------------------------------------------- */

  --radius-xs:   0.125rem;
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;


  /* ── Type Scale ─────────────────────────────────────────────── */

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   0.9375rem;
  --text-lg:   1rem;
  --text-xl:   1.125rem;
  --text-2xl:  1.25rem;
  --text-3xl:  1.5rem;


  /* ── Motion ───────────────────────────────────────────────────
     기존 HTML의 느리고 부드러운 이미지/reveal 감각.
  ---------------------------------------------------------------- */

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);

  --duration-fast:   180ms;
  --duration-normal: 320ms;
  --duration-slow:   700ms;


  /* ── Legacy aliases ─────────────────────────────────────────── */

  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  --shadow-xl: var(--elevation-4);

  --transition-smooth: var(--ease-standard);

}


/* ==========================================================================
   2. DARK MODE TOKENS
   스타창작소의 메인 비주얼에 가까운 기본 dark palette
========================================================================== */

.dark {

  /* ── Brand ─────────────────────────────────────────────────── */

  --color-primary-rgb:   244 241 235; /* warm ivory */
  --color-secondary-rgb: 190 186 179;
  --color-accent-rgb:    255 255 255;


  /* ── Surface ──────────────────────────────────────────────────
     실제 HTML:
     #080808
     #0C0C0C
     #111111
  ---------------------------------------------------------------- */

  --color-bg-base-rgb:      8 8 8;       /* #080808 */
  --color-bg-surface-rgb:   12 12 12;    /* #0C0C0C */
  --color-bg-surface1-rgb:  17 17 17;    /* #111111 */
  --color-bg-surface2-rgb:  27 27 27;
  --color-bg-card-rgb:      12 12 12;


  /* ── Text ───────────────────────────────────────────────────── */

  --color-text-main-rgb:     255 255 255;
  --color-text-muted-rgb:    184 184 181;
  --color-text-subtle-rgb:   123 123 120;
  --color-text-disabled-rgb: 78 78 76;


  /* ── On-color ───────────────────────────────────────────────── */

  --color-on-primary-rgb:   8 8 8;
  --color-on-secondary-rgb: 8 8 8;
  --color-on-accent-rgb:    8 8 8;

  --color-on-success-rgb:   255 255 255;
  --color-on-warning-rgb:   8 8 8;
  --color-on-danger-rgb:    255 255 255;
  --color-on-info-rgb:      255 255 255;


  /* ── Semantic State ─────────────────────────────────────────── */

  --color-success-rgb: 62 190 105;
  --color-warning-rgb: 225 177 64;
  --color-danger-rgb:  226 78 72;
  --color-info-rgb:    170 174 180;


  /* ── Border ───────────────────────────────────────────────────
     white/10 → white/20 계열 표현용.
  ---------------------------------------------------------------- */

  --color-border-muted-rgb:   32 32 32;
  --color-border-default-rgb: 50 50 50;
  --color-border-strong-rgb:  82 82 82;


  /* ── Focus ──────────────────────────────────────────────────── */

  --color-focus-rgb: var(--color-primary-rgb);


  /* ── Effects ────────────────────────────────────────────────── */

  --color-shadow-rgb:  0 0 0;
  --color-overlay-rgb: 0 0 0;


  /* ── State Layer ────────────────────────────────────────────── */

  --state-hover-opacity:    0.10;
  --state-pressed-opacity:  0.14;
  --state-focused-opacity:  0.14;
  --state-dragged-opacity:  0.18;
  --state-disabled-opacity: 0.38;


  /* ── Elevation ──────────────────────────────────────────────── */

  --elevation-0: none;

  --elevation-1:
    0 1px 2px rgb(0 0 0 / 0.30);

  --elevation-2:
    0 5px 16px rgb(0 0 0 / 0.38);

  --elevation-3:
    0 14px 36px rgb(0 0 0 / 0.48);

  --elevation-4:
    0 28px 72px rgb(0 0 0 / 0.58);
}