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

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

/* ==========================================================================
   NEON DARK THEME
   Soft black surfaces + electric green accent
========================================================================== */

:root {
    /* ── Brand ─────────────────────────────────────────────────── */

    /* Neon / Electric Green */
    --color-primary-rgb: 163 230 53;      /* #A3E635 */

    /* 차분한 green-gray */
    --color-secondary-rgb: 113 133 118;

    /* 조금 더 밝은 lime accent */
    --color-accent-rgb: 190 242 100;      /* #BEF264 */


    /* ── Surface ────────────────────────────────────────────────── */

    /* 완전한 #000 대신 부드러운 charcoal black */
    --color-bg-base-rgb:     17 19 18;    /* #111312 */

    /* input / section */
    --color-bg-surface-rgb:  23 26 24;    /* #171A18 */

    /* hover */
    --color-bg-surface1-rgb: 30 34 31;    /* #1E221F */

    /* selected / stronger surface */
    --color-bg-surface2-rgb: 39 44 40;    /* #272C28 */

    /* card */
    --color-bg-card-rgb:     21 24 22;    /* #151816 */


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

    /* 순백색보다 약간 부드럽게 */
    --color-text-main-rgb:   238 242 239;

    --color-text-muted-rgb:  156 166 159;

    --color-text-subtle-rgb: 105 116 108;


    /* ── On Color ───────────────────────────────────────────────── */

    /*
     * 형광 green 위에는 흰색보다 어두운 글자가
     * 가독성과 테마 인상이 좋음
     */
    --color-on-primary-rgb:   13 18 14;

    --color-on-secondary-rgb: 255 255 255;
    --color-on-accent-rgb:    13 18 14;
    --color-on-danger-rgb:    255 255 255;


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

    --color-success-rgb: 74 222 128;
    --color-warning-rgb: 250 204 21;
    --color-danger-rgb:  248 113 113;
    --color-info-rgb:    34 211 238;


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

    /* dark UI에서는 border가 너무 밝으면 피곤하므로 낮은 대비 */
    --color-border-default-rgb: 48 55 50;
    --color-border-muted-rgb:   34 40 36;
    --color-border-strong-rgb:  69 79 72;


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

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


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

    --state-hover-opacity:    0.10;
    --state-pressed-opacity:  0.16;
    --state-focused-opacity:  0.16;
    --state-dragged-opacity:  0.20;
    --state-disabled-opacity: 0.38;


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

    --elevation-0: none;

    --elevation-1:
        0 1px 3px rgb(0 0 0 / 0.25),
        0 1px 2px rgb(0 0 0 / 0.20);

    --elevation-2:
        0 4px 12px rgb(0 0 0 / 0.30),
        0 2px 4px rgb(0 0 0 / 0.20);

    --elevation-3:
        0 12px 28px rgb(0 0 0 / 0.38),
        0 4px 8px rgb(0 0 0 / 0.22);

    --elevation-4:
        0 24px 56px rgb(0 0 0 / 0.48),
        0 8px 16px rgb(0 0 0 / 0.28);


    /* ── Radius ─────────────────────────────────────────────────── */

    /*
     * Neon Dark는 default보다 조금 더 둥글게.
     * 향후 .btn/.input이 이 token을 소비하도록 연결.
     */
    --radius-xs:   0.375rem;
    --radius-sm:   0.5rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-xl:   1.5rem;
    --radius-2xl:  2rem;
    --radius-full: 9999px;


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

    /* 기존 component 호환성을 위해 default와 동일 */
    --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: 220ms;
    --duration-slow:   350ms;


    /* ── 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-max-width: 80rem;
}

/* 클래스 기반 dark mode (.dark) — Tailwind dark: prefix와 연동 */
.dark {
  --color-bg-base-rgb:      10 15 28;
  --color-bg-surface-rgb:   15 23 42;
  --color-bg-surface1-rgb:  22 33 57;
  --color-bg-surface2-rgb:  30 46 76;
  --color-bg-card-rgb:      17 26 46;

  --color-text-main-rgb:   226 232 240;
  --color-text-muted-rgb:  100 116 139;
  --color-text-subtle-rgb: 51 65 85;

  --color-border-default-rgb: 30 41 59;
  --color-border-muted-rgb:   22 33 57;
  --color-border-strong-rgb:  51 65 85;

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

  --elevation-1: 0 1px 3px rgb(var(--color-shadow-rgb) / 0.2),
                 0 1px 2px rgb(var(--color-shadow-rgb) / 0.3);
  --elevation-2: 0 4px 12px rgb(var(--color-shadow-rgb) / 0.35);
  --elevation-3: 0 12px 28px rgb(var(--color-shadow-rgb) / 0.45);
  --elevation-4: 0 24px 56px rgb(var(--color-shadow-rgb) / 0.6);
}


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

.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)); }
.bg-brand-gradient {
  background: linear-gradient(135deg, rgb(var(--color-primary-rgb)), rgb(var(--color-accent-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.12); }
.ring-secondary-soft { --tw-ring-color: rgb(var(--color-secondary-rgb) / 0.12); }
.ring-success-soft { --tw-ring-color: rgb(var(--color-success-rgb) / 0.12); }
.ring-warning-soft { --tw-ring-color: rgb(var(--color-warning-rgb) / 0.16); }

/* Type Scale */
.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) / .08); }
.bg-secondary-soft { background-color: rgb(var(--color-secondary-rgb) / .08); }
.bg-accent-soft    { background-color: rgb(var(--color-accent-rgb) / .08); }
.bg-success-soft   { background-color: rgb(var(--color-success-rgb) / .08); }
.bg-warning-soft   { background-color: rgb(var(--color-warning-rgb) / .10); }
.bg-danger-soft    { background-color: rgb(var(--color-danger-rgb) / .08); }
.bg-info-soft      { background-color: rgb(var(--color-info-rgb) / .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) / .2); }
.border-danger-soft  { border-color: rgb(var(--color-danger-rgb) / .2); }