@import '../components/base.css';
@import '../headers/default.css';
@import '../footers/default.css';

/* ==========================================================================
   MINIMAL MONO THEME
   Clean white / black monochrome system
========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
========================================================================== */

:root {

  /* ── Brand ───────────────────────────────────────────────────
     거의 무채색으로 유지.
     primary는 강한 ink black.
  ---------------------------------------------------------------- */

  --color-primary-rgb:   29 29 31;      /* #1D1D1F */
  --color-secondary-rgb: 71 71 73;      /* #474749 */
  --color-accent-rgb:    0 0 0;         /* #000000 */


  /* ── Surface ──────────────────────────────────────────────────
     White → soft gray 단계.
     큰 영역은 border보다 surface 차이로 구분.
  ---------------------------------------------------------------- */

  --color-bg-base-rgb:      255 255 255; /* #FFFFFF */
  --color-bg-surface-rgb:   250 250 252; /* #FAFAFC */
  --color-bg-surface1-rgb:  245 245 247; /* #F5F5F7 */
  --color-bg-surface2-rgb:  232 232 237; /* #E8E8ED */
  --color-bg-card-rgb:      255 255 255; /* #FFFFFF */


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

  --color-text-main-rgb:     29 29 31;   /* #1D1D1F */
  --color-text-muted-rgb:    112 112 112;/* #707070 */
  --color-text-subtle-rgb:   134 134 139;/* soft gray */
  --color-text-disabled-rgb: 174 174 178;


  /* ── On-color ─────────────────────────────────────────────────
     black primary 위에는 white foreground
  ---------------------------------------------------------------- */

  --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:   29 29 31;
  --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: 196 128 0;
  --color-danger-rgb:  215 55 55;
  --color-info-rgb:    90 90 95;


  /* ── Border ───────────────────────────────────────────────────
     Border 사용은 최소화하되 필요할 때 단계 제공.
  ---------------------------------------------------------------- */

  --color-border-muted-rgb:   232 232 237; /* #E8E8ED */
  --color-border-default-rgb: 214 214 214; /* #D6D6D6 */
  --color-border-strong-rgb:  174 174 178;


  /* ── 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.06;
  --state-pressed-opacity:  0.10;
  --state-focused-opacity:  0.10;
  --state-dragged-opacity:  0.14;
  --state-disabled-opacity: 0.38;


  /* ── Elevation ────────────────────────────────────────────────
     이 테마는 shadow를 거의 사용하지 않는 것이 기본.
     기존 component 호환성을 위해 token은 유지.
  ---------------------------------------------------------------- */

  --elevation-0: none;

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

  --elevation-2:
    0 3px 10px rgb(var(--color-shadow-rgb) / 0.05);

  --elevation-3:
    0 8px 24px rgb(var(--color-shadow-rgb) / 0.07);

  --elevation-4:
    0 16px 40px rgb(var(--color-shadow-rgb) / 0.09);


  /* ── Radius ───────────────────────────────────────────────────
     첨부 디자인의 둥근 카드 / pill 성격을 반영.
  ---------------------------------------------------------------- */

  --radius-xs:   0.375rem;
  --radius-sm:   0.625rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.75rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;


  /* ── Type Scale ───────────────────────────────────────────────
     기존 component 호환성을 위해 유지.
  ---------------------------------------------------------------- */

  --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 ─────────────────────────────────────────────────── */

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

  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;


  /* ── 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);


  /* ── Layout ─────────────────────────────────────────────────── */

  --layout-max-width: 80rem;
}


/* ==========================================================================
   2. DARK MODE TOKENS

   OS 설정과 자동 연동하지 않음.
   `.dark` 클래스가 명시적으로 적용될 때만 활성화.
========================================================================== */

.dark {

  /* ── Brand ───────────────────────────────────────────────────
     Dark에서는 primary를 white ink로 반전.
  ---------------------------------------------------------------- */

  --color-primary-rgb:   245 245 247;
  --color-secondary-rgb: 174 174 178;
  --color-accent-rgb:    255 255 255;


  /* ── Surface ──────────────────────────────────────────────────
     완전한 #000 대신 약간 부드러운 black hierarchy.
  ---------------------------------------------------------------- */

  --color-bg-base-rgb:      0 0 0;        /* #000000 */
  --color-bg-surface-rgb:   18 18 18;     /* #121212 */
  --color-bg-surface1-rgb:  28 28 30;     /* #1C1C1E */
  --color-bg-surface2-rgb:  44 44 46;     /* #2C2C2E */
  --color-bg-card-rgb:      18 18 18;


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

  --color-text-main-rgb:     245 245 247;
  --color-text-muted-rgb:    174 174 178;
  --color-text-subtle-rgb:   142 142 147;
  --color-text-disabled-rgb: 99 99 102;


  /* ── On-color ─────────────────────────────────────────────────
     Dark mode primary가 밝으므로 foreground는 black.
  ---------------------------------------------------------------- */

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

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


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

  --color-success-rgb: 48 209 88;
  --color-warning-rgb: 255 214 10;
  --color-danger-rgb:  255 69 58;
  --color-info-rgb:    174 174 178;


  /* ── Border ─────────────────────────────────────────────────── */

  --color-border-muted-rgb:   44 44 46;
  --color-border-default-rgb: 58 58 60;
  --color-border-strong-rgb:  99 99 102;


  /* ── 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 4px 12px rgb(0 0 0 / 0.40);

  --elevation-3:
    0 10px 28px rgb(0 0 0 / 0.50);

  --elevation-4:
    0 20px 48px rgb(0 0 0 / 0.60);
}


/* ==========================================================================
   3. BASE
========================================================================== */

body {
  background-color: rgb(var(--color-bg-base-rgb));
  color: rgb(var(--color-text-main-rgb));
  font-size: var(--text-base);
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   4. TEXT UTILITIES
========================================================================== */

.c-main {
  color: rgb(var(--color-text-main-rgb));
}

.c-muted {
  color: rgb(var(--color-text-muted-rgb));
}

.c-subtle {
  color: rgb(var(--color-text-subtle-rgb));
}

.c-disabled {
  color: rgb(var(--color-text-disabled-rgb));
}

.c-primary {
  color: rgb(var(--color-primary-rgb));
}

.c-inverse,
.c-on-primary {
  color: rgb(var(--color-on-primary-rgb));
}

.c-secondary {
  color: rgb(var(--color-secondary-rgb));
}

.c-accent {
  color: rgb(var(--color-accent-rgb));
}

.c-success {
  color: rgb(var(--color-success-rgb));
}

.c-warning {
  color: rgb(var(--color-warning-rgb));
}

.c-danger {
  color: rgb(var(--color-danger-rgb));
}

.c-info {
  color: rgb(var(--color-info-rgb));
}


/* ── Interaction helpers ───────────────────────────────────── */

.text-hover-main:hover {
  color: rgb(var(--color-text-main-rgb));
}

.text-hover-primary:hover {
  color: rgb(var(--color-primary-rgb));
}

.text-hover-base:hover {
  color: rgb(var(--color-bg-base-rgb));
}

.bg-hover-main:hover {
  background-color: rgb(var(--color-text-main-rgb));
}

.bg-hover-surface1:hover {
  background-color: rgb(var(--color-bg-surface1-rgb));
}

.focus-bg-main:focus-visible {
  background-color: rgb(var(--color-text-main-rgb));
}

.focus-text-base:focus-visible {
  color: rgb(var(--color-bg-base-rgb));
}

.placeholder-c-subtle::placeholder {
  color: rgb(var(--color-text-subtle-rgb));
}

.group:hover .group-hover-text-primary {
  color: rgb(var(--color-primary-rgb));
}


/* ── Decorative helpers ────────────────────────────────────── */

.bg-brand-gradient {
  background:
    linear-gradient(
      135deg,
      rgb(var(--color-primary-rgb)),
      rgb(var(--color-secondary-rgb))
    );
}

.bg-overlay-soft {
  background-color: rgb(var(--color-overlay-rgb) / 0.45);
}

.dot-primary {
  background-color: rgb(var(--color-primary-rgb));
}

.ring-primary-soft {
  --tw-ring-color: rgb(var(--color-primary-rgb) / 0.14);
}

.ring-secondary-soft {
  --tw-ring-color: rgb(var(--color-secondary-rgb) / 0.14);
}

.ring-success-soft {
  --tw-ring-color: rgb(var(--color-success-rgb) / 0.14);
}

.ring-warning-soft {
  --tw-ring-color: rgb(var(--color-warning-rgb) / 0.18);
}


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

.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-md {
  font-size: var(--text-md);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}


/* ==========================================================================
   5. BACKGROUND UTILITIES
========================================================================== */

.bg-base {
  background-color: rgb(var(--color-bg-base-rgb));
}

.bg-surface {
  background-color: rgb(var(--color-bg-surface-rgb));
}

.bg-surface1 {
  background-color: rgb(var(--color-bg-surface1-rgb));
}

.bg-surface2 {
  background-color: rgb(var(--color-bg-surface2-rgb));
}

.bg-card {
  background-color: rgb(var(--color-bg-card-rgb));
}

.bg-primary {
  background-color: rgb(var(--color-primary-rgb));
}


.bg-primary-soft {
  background-color: rgb(var(--color-primary-rgb) / 0.06);
}

.bg-secondary-soft {
  background-color: rgb(var(--color-secondary-rgb) / 0.07);
}

.bg-accent-soft {
  background-color: rgb(var(--color-accent-rgb) / 0.06);
}

.bg-success-soft {
  background-color: rgb(var(--color-success-rgb) / 0.08);
}

.bg-warning-soft {
  background-color: rgb(var(--color-warning-rgb) / 0.10);
}

.bg-danger-soft {
  background-color: rgb(var(--color-danger-rgb) / 0.08);
}

.bg-info-soft {
  background-color: rgb(var(--color-info-rgb) / 0.08);
}


/* ==========================================================================
   6. BORDER UTILITIES
========================================================================== */

.border-default {
  border-color: rgb(var(--color-border-default-rgb));
}

.border-muted {
  border-color: rgb(var(--color-border-muted-rgb));
}

.border-strong {
  border-color: rgb(var(--color-border-strong-rgb));
}

.border-primary {
  border-color: rgb(var(--color-primary-rgb));
}

.border-primary-soft {
  border-color: rgb(var(--color-primary-rgb) / 0.18);
}

.border-danger-soft {
  border-color: rgb(var(--color-danger-rgb) / 0.20);
}