/* ==========================================================================
   Design System — Competition Analysis
   Target: 중고등학생(15~19세) 대회 리스트 사이트
   Inspired by: Remote.com (clean blue/white professional palette)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts
   Noto Serif KR: 세리프 제목용 (고급스러운 느낌)
   Pretendard: 산세리프 본문용
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* ========================================================================
     1. COLOR PALETTE — Clean Blue / White / Cool Gray
     ======================================================================== */

  /* --- Primary: Cool Slate (text & UI structure) --- */
  --color-primary-900: #111827;
  --color-primary-800: #1F2937;
  --color-primary-700: #374151;
  --color-primary-600: #4B5563;
  --color-primary-500: #6B7280;
  --color-primary-400: #9CA3AF;
  --color-primary-300: #D1D5DB;
  --color-primary-200: #E5E7EB;
  --color-primary-100: #F3F4F6;
  --color-primary-50:  #F9FAFB;

  /* --- Accent: Warm Rose (#E8546A) --- */
  --color-accent-700: #BE3A4F;
  --color-accent-600: #D4455C;
  --color-accent-500: #E8546A;
  --color-accent-400: #F07A8E;
  --color-accent-300: #F5A0AF;
  --color-accent-200: #FACDD6;
  --color-accent-100: #FDE8EC;
  --color-accent-50:  #FFF1F3;

  /* --- Cool Neutral Gray --- */
  --color-gray-950: #030712;
  --color-gray-900: #111827;
  --color-gray-800: #1F2937;
  --color-gray-700: #374151;
  --color-gray-600: #4B5563;
  --color-gray-500: #6B7280;
  --color-gray-400: #9CA3AF;
  --color-gray-300: #D1D5DB;
  --color-gray-200: #E5E7EB;
  --color-gray-100: #F3F4F6;
  --color-gray-50:  #F9FAFB;

  /* --- Teal (Pre-college mode) --- */
  --color-teal-700: #0F766E;
  --color-teal-600: #0D9488;
  --color-teal-500: #14B8A6;
  --color-teal-400: #2DD4BF;
  --color-teal-300: #5EEAD4;
  --color-teal-200: #99F6E4;
  --color-teal-100: #CCFBF1;
  --color-teal-50:  #F0FDFA;

  /* --- Amber (Volunteer mode) --- */
  --color-amber-700: #B45309;
  --color-amber-600: #D97706;
  --color-amber-500: #F59E0B;
  --color-amber-400: #FBBF24;
  --color-amber-300: #FCD34D;
  --color-amber-200: #FDE68A;
  --color-amber-100: #FEF3C7;
  --color-amber-50:  #FFFBEB;

  /* --- Cheongshim Blue (CSIA mode) --- */
  --color-csblue-700: #1D4ED8;
  --color-csblue-600: #2563EB;
  --color-csblue-500: #3B82F6;
  --color-csblue-400: #60A5FA;
  --color-csblue-300: #93C5FD;
  --color-csblue-200: #BFDBFE;
  --color-csblue-100: #DBEAFE;
  --color-csblue-50:  #EFF6FF;

  /* --- Semantic --- */
  --color-success-600: #16A34A;
  --color-success-500: #22C55E;
  --color-success-100: #DCFCE7;

  --color-warning-600: #CA8A04;
  --color-warning-500: #EAB308;
  --color-warning-100: #FEF9C3;

  --color-error-600: #DC2626;
  --color-error-500: #EF4444;
  --color-error-100: #FEE2E2;

  /* --- Surface & Background (pure white) --- */
  --color-bg:         #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken:  #F7F8FA;
  --color-surface:    #FFFFFF;
  --color-overlay:    rgba(17, 24, 39, 0.5);

  /* --- Border (cool gray) --- */
  --color-border:       #D1D5DB;
  --color-border-subtle: #E5E7EB;
  --color-border-strong: #9CA3AF;

  /* --- Text --- */
  --color-text-primary:   #111827;
  --color-text-secondary: #6B7280;
  --color-text-tertiary:  #9CA3AF;
  --color-text-disabled:  #D1D5DB;
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      #4C6FFF;

  /* ========================================================================
     2. TYPOGRAPHY
     ======================================================================== */

  --font-serif: 'Noto Serif KR', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* --- Font Size Scale --- */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.8125rem; /* 13px */
  --text-base:  0.875rem;  /* 14px */
  --text-md:    1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */

  /* --- Font Weight --- */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* --- Line Height --- */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* --- Letter Spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.01em;

  /* ========================================================================
     3. SPACING (4px base)
     ======================================================================== */

  --space-0:   0;
  --space-0-5: 0.125rem;  /* 2px  */
  --space-1:   0.25rem;   /* 4px  */
  --space-1-5: 0.375rem;  /* 6px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ========================================================================
     4. COMPONENT TOKENS
     ======================================================================== */

  /* --- Border Radius --- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* --- Card (clean white, subtle cool shadow) --- */
  --card-bg:          var(--color-surface);
  --card-border:      rgba(17, 24, 39, 0.18);
  --card-radius:      var(--radius-lg);
  --card-padding:     var(--space-5);
  --card-shadow:      0 1px 3px rgba(17, 24, 39, 0.04);
  --card-shadow-hover: 0 4px 12px rgba(17, 24, 39, 0.08);

  /* --- Button --- */
  --btn-height-sm:    32px;
  --btn-height-md:    36px;
  --btn-height-lg:    44px;
  --btn-padding-x-sm: var(--space-3);
  --btn-padding-x-md: var(--space-4);
  --btn-padding-x-lg: var(--space-6);
  --btn-radius:       var(--radius-md);
  --btn-font-size:    var(--text-sm);
  --btn-font-weight:  var(--font-medium);

  --btn-primary-bg:         #4C6FFF;
  --btn-primary-text:       #FFFFFF;
  --btn-primary-hover-bg:   #4263EB;
  --btn-primary-active-bg:  #3B5BDB;

  --btn-secondary-bg:       transparent;
  --btn-secondary-text:     #374151;
  --btn-secondary-border:   #D1D5DB;
  --btn-secondary-hover-bg: #F3F4F6;

  --btn-accent-bg:          #4C6FFF;
  --btn-accent-text:        #FFFFFF;
  --btn-accent-hover-bg:    #4263EB;

  --btn-disabled-bg:        var(--color-gray-100);
  --btn-disabled-text:      var(--color-text-disabled);

  /* --- Input --- */
  --input-height:       40px;
  --input-padding-x:    var(--space-3);
  --input-bg:           var(--color-bg-elevated);
  --input-border:       var(--color-border);
  --input-radius:       var(--radius-md);
  --input-font-size:    var(--text-base);
  --input-focus-border: #4C6FFF;
  --input-focus-ring:   0 0 0 3px rgba(76, 111, 255, 0.15);
  --input-placeholder:  var(--color-text-tertiary);

  /* --- Filter Chip / Tag (cool gray bg, blue active) --- */
  --chip-height:        28px;
  --chip-padding-x:     var(--space-3);
  --chip-radius:        var(--radius-full);
  --chip-font-size:     var(--text-xs);
  --chip-bg:            #F3F4F6;
  --chip-text:          #6B7280;
  --chip-active-bg:     #4C6FFF;
  --chip-active-text:   #FFFFFF;

  /* --- Badge --- */
  --badge-padding-x:    var(--space-2);
  --badge-padding-y:    var(--space-0-5);
  --badge-radius:       var(--radius-sm);
  --badge-font-size:    var(--text-xs);
  --badge-font-weight:  var(--font-medium);

  /* --- Navbar (white with blur) --- */
  --nav-height:         82px;
  --nav-bg:             rgba(255, 255, 255, 0.88);
  --nav-border:         var(--color-border);

  /* ========================================================================
     5. BREAKPOINTS (reference — use in @media queries)
        mobile-first: min-width
     ======================================================================== */

  /* sm:  640px  — large phone / small tablet      */
  /* md:  768px  — tablet                           */
  /* lg:  1024px — small desktop                    */
  /* xl:  1280px — desktop                          */
  /* 2xl: 1440px — wide desktop                     */

  --breakpoint-sm:  640px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1440px;

  /* --- Container widths --- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;

  /* ========================================================================
     6. TRANSITIONS
     ======================================================================== */

  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    300ms;

  --ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-colors: color var(--duration-normal) var(--ease-default),
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-default);
  --transition-all: all var(--duration-normal) var(--ease-default);

  /* ========================================================================
     7. Z-INDEX SCALE
     ======================================================================== */

  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ==========================================================================
   DARK MODE — body.dark overrides
   ========================================================================== */
body.dark {
  /* --- Surface & Background --- */
  --color-bg:            #0B0F1A;
  --color-bg-elevated:   #111827;
  --color-bg-sunken:     #1F2937;
  --color-surface:       #111827;
  --color-overlay:       rgba(0, 0, 0, 0.6);

  /* --- Border --- */
  --color-border:        #374151;
  --color-border-subtle: #1F2937;
  --color-border-strong: #4B5563;

  /* --- Text (improved readability) --- */
  --color-text-primary:   #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-tertiary:  #9CA3AF;
  --color-text-disabled:  #4B5563;
  --color-text-inverse:   #111827;
  --color-text-link:      #748FFC;

  /* --- Gray palette --- */
  --color-gray-50:  #1F2937;
  --color-gray-100: #1F2937;
  --color-gray-200: #374151;
  --color-gray-300: #4B5563;
  --color-gray-400: #6B7280;
  --color-gray-500: #9CA3AF;
  --color-gray-600: #D1D5DB;
  --color-gray-700: #E5E7EB;
  --color-gray-800: #F3F4F6;
  --color-gray-900: #F9FAFB;
  --color-gray-950: #FFFFFF;

  /* --- Navbar --- */
  --nav-bg: rgba(11, 15, 26, 0.88);

  /* --- Card --- */
  --card-bg:           #111827;
  --card-border:       rgba(255, 255, 255, 0.18);
  --card-shadow:       0 1px 3px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* --- Chip --- */
  --chip-bg:          #1F2937;
  --chip-text:        #D1D5DB;
  --chip-active-bg:   #4C6FFF;
  --chip-active-text: #FFFFFF;

  /* --- Input --- */
  --input-bg:           #1F2937;
  --input-border:       #374151;
  --input-focus-border: #748FFC;
  --input-focus-ring:   0 0 0 3px rgba(76, 111, 255, 0.25);
  --input-placeholder:  #6B7280;

  /* --- Button --- */
  --btn-primary-bg:         #4C6FFF;
  --btn-primary-text:       #FFFFFF;
  --btn-primary-hover-bg:   #748FFC;
  --btn-primary-active-bg:  #4263EB;

  --btn-secondary-bg:       transparent;
  --btn-secondary-text:     #F9FAFB;
  --btn-secondary-border:   rgba(255, 255, 255, 0.15);
  --btn-secondary-hover-bg: #1F2937;

  --btn-disabled-bg:   #1F2937;
  --btn-disabled-text: #4B5563;

  /* --- Accent (rose in dark) --- */
  --color-accent-50:  rgba(232, 84, 106, 0.08);
  --color-accent-100: rgba(232, 84, 106, 0.15);
  --color-accent-200: rgba(232, 84, 106, 0.25);

  /* --- Teal (Pre-college in dark) --- */
  --color-teal-50:  rgba(20, 184, 166, 0.08);
  --color-teal-100: rgba(20, 184, 166, 0.15);
  --color-teal-200: rgba(20, 184, 166, 0.25);

  /* --- Amber (Volunteer in dark) --- */
  --color-amber-50:  rgba(245, 158, 11, 0.08);
  --color-amber-100: rgba(245, 158, 11, 0.15);
  --color-amber-200: rgba(245, 158, 11, 0.25);

  /* --- Cheongshim Blue (CSIA in dark) --- */
  --color-csblue-50:  rgba(59, 130, 246, 0.08);
  --color-csblue-100: rgba(59, 130, 246, 0.15);
  --color-csblue-200: rgba(59, 130, 246, 0.25);

  /* --- Semantic (dark-friendly) --- */
  --color-success-100: rgba(34, 197, 94, 0.15);
  --color-success-600: #4ADE80;
  --color-warning-100: rgba(234, 179, 8, 0.15);
  --color-warning-600: #FBBF24;
  --color-error-100:   rgba(239, 68, 68, 0.15);
  --color-error-600:   #F87171;
}