/* ============================================
   SeeiiN — Design System v2.0
   Inspired by Linear × Framer × Arc × Vercel
   내면이 외면을 우선한다
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ─── TIME-BASED THEMES ──────────────────── */

/* 새벽 04:00–06:59 — 차갑고 고요한 딥 블루 */
html[data-time-theme="dawn"] {
  --color-bg:           #020c1e;
  --color-bg-elevated:  #051428;
  --color-primary:      #38bdf8;
  --color-primary-dim:  #0284c7;
  --color-primary-deep: #0c2a4a;
  --color-primary-glow: rgba(56, 189, 248, 0.35);
  --color-accent:       #7dd3fc;
  --color-accent-dim:   #0369a1;
  --color-accent-glow:  rgba(125, 211, 252, 0.28);
  --color-border:       rgba(56, 189, 248, 0.16);
  --color-border-hover: rgba(56, 189, 248, 0.32);
  --shadow-glow:        0 0 60px rgba(56, 189, 248, 0.22);
  --gradient-primary:   linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%);
  --gradient-cosmic:    linear-gradient(145deg, #020c1e 0%, #071a30 50%, #04101e 100%);
  --gradient-mesh:      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(2,132,199,0.28) 0%, transparent 60%),
                        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(125,211,252,0.18) 0%, transparent 55%),
                        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(56,189,248,0.14) 0%, transparent 60%);
}

/* 아침 07:00–11:59 — 따뜻한 골든 선라이즈 */
html[data-time-theme="morning"] {
  --color-bg:           #0d0a14;
  --color-bg-elevated:  #170f1e;
  --color-primary:      #fbbf24;
  --color-primary-dim:  #d97706;
  --color-primary-deep: #451a03;
  --color-primary-glow: rgba(251, 191, 36, 0.35);
  --color-accent:       #fb7185;
  --color-accent-dim:   #e11d48;
  --color-accent-glow:  rgba(251, 113, 133, 0.28);
  --color-border:       rgba(251, 191, 36, 0.16);
  --color-border-hover: rgba(251, 191, 36, 0.32);
  --shadow-glow:        0 0 60px rgba(251, 191, 36, 0.20);
  --gradient-primary:   linear-gradient(135deg, #fbbf24 0%, #fb7185 100%);
  --gradient-cosmic:    linear-gradient(145deg, #0d0a14 0%, #1a1020 50%, #120c18 100%);
  --gradient-mesh:      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(217,119,6,0.28) 0%, transparent 60%),
                        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(251,113,133,0.18) 0%, transparent 55%),
                        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(251,191,36,0.14) 0%, transparent 60%);
}

/* 점심 12:00–16:59 — 청량한 틸-그린 */
html[data-time-theme="afternoon"] {
  --color-bg:           #06140f;
  --color-bg-elevated:  #0c2218;
  --color-primary:      #34d399;
  --color-primary-dim:  #059669;
  --color-primary-deep: #022c22;
  --color-primary-glow: rgba(52, 211, 153, 0.35);
  --color-accent:       #a78bfa;
  --color-accent-dim:   #7c3aed;
  --color-accent-glow:  rgba(167, 139, 250, 0.28);
  --color-border:       rgba(52, 211, 153, 0.16);
  --color-border-hover: rgba(52, 211, 153, 0.32);
  --shadow-glow:        0 0 60px rgba(52, 211, 153, 0.20);
  --gradient-primary:   linear-gradient(135deg, #34d399 0%, #a78bfa 100%);
  --gradient-cosmic:    linear-gradient(145deg, #06140f 0%, #0e2418 50%, #081a12 100%);
  --gradient-mesh:      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(5,150,105,0.28) 0%, transparent 60%),
                        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(167,139,250,0.18) 0%, transparent 55%),
                        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(52,211,153,0.14) 0%, transparent 60%);
}

/* 저녁 17:00–20:59 — 불타는 선셋 */
html[data-time-theme="evening"] {
  --color-bg:           #100a06;
  --color-bg-elevated:  #1e1008;
  --color-primary:      #f97316;
  --color-primary-dim:  #ea580c;
  --color-primary-deep: #431407;
  --color-primary-glow: rgba(249, 115, 22, 0.35);
  --color-accent:       #f472b6;
  --color-accent-dim:   #db2777;
  --color-accent-glow:  rgba(244, 114, 182, 0.28);
  --color-border:       rgba(249, 115, 22, 0.16);
  --color-border-hover: rgba(249, 115, 22, 0.32);
  --shadow-glow:        0 0 60px rgba(249, 115, 22, 0.22);
  --gradient-primary:   linear-gradient(135deg, #f97316 0%, #f472b6 100%);
  --gradient-cosmic:    linear-gradient(145deg, #100a06 0%, #201208 50%, #180e06 100%);
  --gradient-mesh:      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(249,115,22,0.32) 0%, transparent 60%),
                        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(244,114,182,0.18) 0%, transparent 55%),
                        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(249,115,22,0.16) 0%, transparent 60%);
}

/* 심야 21:00–03:59 — 딥 코스믹 바이올렛 (프로덕션 기준) */
html[data-time-theme="night"] {
  --color-bg:           #08070f;
  --color-bg-elevated:  #12101e;
  --color-primary:      #a78bfa;
  --color-primary-dim:  #7c3aed;
  --color-primary-deep: #4c1d95;
  --color-primary-glow: rgba(167, 139, 250, 0.4);
  --color-accent:       #ff8fa3;
  --color-accent-dim:   #d4667a;
  --color-accent-glow:  rgba(255, 143, 163, 0.32);
  --color-border:       rgba(167, 139, 250, 0.18);
  --color-border-hover: rgba(167, 139, 250, 0.35);
  --shadow-glow:        0 0 60px rgba(167, 139, 250, 0.22);
  --gradient-primary:   linear-gradient(135deg, #a78bfa 0%, #ff8fa3 100%);
  --gradient-cosmic:    linear-gradient(135deg, #1e1535 0%, #1a1a3e 50%, #0f1860 100%);
  --gradient-mesh:      radial-gradient(ellipse 80% 60% at 20% 0%, rgba(124,58,237,0.28) 0%, transparent 60%),
                        radial-gradient(ellipse 60% 50% at 80% 10%, rgba(255,143,163,0.18) 0%, transparent 55%),
                        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(167,139,250,0.16) 0%, transparent 60%);
}

/* ─── THEME TRANSITION ───────────────────── */
html {
  transition: background-color 2s var(--ease-in-out, cubic-bezier(0.4,0,0.2,1));
}

/* ─── TIME-BASED BODY BACKGROUNDS ───────── */
body {
  transition: background 4s ease;
}

html[data-time-theme="dawn"] body {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(56,189,248,0.45)  0px, transparent 55%),
    radial-gradient(ellipse at 15% 40%,  rgba(14,165,233,0.3)   0px, transparent 45%),
    radial-gradient(ellipse at 85% 30%,  rgba(125,211,252,0.2)  0px, transparent 45%),
    radial-gradient(ellipse at 50% 90%,  rgba(5,20,50,0.85)     0px, transparent 50%),
    #020c1e;
}

html[data-time-theme="morning"] body {
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(251,191,36,0.6)   0px, transparent 55%),
    radial-gradient(ellipse at 15% 30%,  rgba(251,113,133,0.4)  0px, transparent 45%),
    radial-gradient(ellipse at 85% 20%,  rgba(217,119,6,0.45)   0px, transparent 45%),
    radial-gradient(ellipse at 50% 90%,  rgba(40,12,5,0.8)      0px, transparent 50%),
    #0d0a14;
}

html[data-time-theme="afternoon"] body {
  background:
    radial-gradient(ellipse at 50% 10%,  rgba(52,211,153,0.45)  0px, transparent 50%),
    radial-gradient(ellipse at 15% 40%,  rgba(34,211,238,0.35)  0px, transparent 50%),
    radial-gradient(ellipse at 85% 40%,  rgba(167,139,250,0.3)  0px, transparent 45%),
    radial-gradient(ellipse at 50% 90%,  rgba(5,30,20,0.8)      0px, transparent 50%),
    #06140f;
}

html[data-time-theme="evening"] body {
  background:
    radial-gradient(ellipse at 50% 75%,  rgba(249,115,22,0.75)  0px, transparent 50%),
    radial-gradient(ellipse at 15% 85%,  rgba(244,63,94,0.6)    0px, transparent 45%),
    radial-gradient(ellipse at 85% 80%,  rgba(192,38,211,0.5)   0px, transparent 45%),
    radial-gradient(ellipse at 50% 15%,  rgba(10,5,25,0.88)     0px, transparent 50%),
    #100a06;
}

html[data-time-theme="night"] body {
  background:
    radial-gradient(ellipse at 72% 18%,  rgba(167,139,250,0.22) 0px, transparent 35%),
    radial-gradient(ellipse at 28% 22%,  rgba(139,92,246,0.16)  0px, transparent 28%),
    radial-gradient(ellipse at 55% 55%,  rgba(109,40,217,0.14)  0px, transparent 50%),
    radial-gradient(ellipse at 85% 65%,  rgba(167,139,250,0.10) 0px, transparent 35%),
    #08070f;
}

:root {
  /* ─── COLORS ─────────────────────────────── */
  --color-bg:          #08070f;
  --color-bg-elevated: #12101e;
  --color-bg-card:     #1c1a2e;
  --color-bg-glass:    rgba(28, 26, 46, 0.6);
  --color-bg-input:    rgba(28, 26, 46, 0.8);

  /* Primary — vibrant violet */
  --color-primary:      #a78bfa;
  --color-primary-dim:  #7c3aed;
  --color-primary-deep: #4c1d95;
  --color-primary-glow: rgba(167, 139, 250, 0.4);

  /* Accent — soft pink */
  --color-accent:      #ff8fa3;
  --color-accent-dim:  #d4667a;
  --color-accent-glow: rgba(255, 143, 163, 0.32);

  /* Warm — amber */
  --color-warm:      #ffb86c;
  --color-warm-glow: rgba(255, 184, 108, 0.28);

  /* Teal — extra accent */
  --color-teal:      #34d399;
  --color-teal-glow: rgba(52, 211, 153, 0.22);

  /* Text */
  --color-text:           #f5f3ff;
  --color-text-secondary: #c4bfe0;
  --color-text-muted:     #7c7898;
  --color-text-dim:       #4a4568;

  /* Borders */
  --color-border:       rgba(167, 139, 250, 0.18);
  --color-border-hover: rgba(167, 139, 250, 0.35);
  --color-border-card:  rgba(167, 139, 250, 0.12);

  /* ─── GRADIENTS ──────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #a78bfa 0%, #ff8fa3 100%);
  --gradient-warm:     linear-gradient(135deg, #ffb86c 0%, #ff8fa3 100%);
  --gradient-violet:   linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --gradient-cosmic:   linear-gradient(135deg, #1e1535 0%, #1a1a3e 50%, #0f1860 100%);
  --gradient-glass:    linear-gradient(135deg, rgba(167, 139, 250, 0.1) 0%, rgba(255, 143, 163, 0.07) 100%);
  --gradient-card:     linear-gradient(145deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.025) 100%);
  --gradient-mesh:     radial-gradient(ellipse 80% 60% at 20% 0%, rgba(124,58,237,0.22) 0%, transparent 60%),
                       radial-gradient(ellipse 60% 50% at 80% 10%, rgba(244,114,182,0.14) 0%, transparent 55%),
                       radial-gradient(ellipse 50% 40% at 50% 100%, rgba(167,139,250,0.12) 0%, transparent 60%);

  /* ─── TYPOGRAPHY ─────────────────────────── */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Noto Sans KR', sans-serif;
  --font-mono:    'Outfit', monospace;

  /* ─── SPACING ────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ─── RADIUS ─────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── BLUR ───────────────────────────────── */
  --blur-sm: blur(8px);
  --blur-md: blur(20px);
  --blur-lg: blur(40px);
  --blur-xl: blur(60px);

  /* ─── TRANSITIONS ────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ─── SHADOWS ────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--color-border-card);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--color-border-card);
  --shadow-glow: 0 0 60px rgba(167, 139, 250, 0.22);
  --shadow-glow-accent: 0 0 60px rgba(255, 143, 163, 0.18);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--color-border);
  --shadow-hover: 0 8px 40px rgba(167, 139, 250, 0.22), 0 0 0 1px var(--color-border-hover);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}