/**
 * Duckil Renewal - Design Tokens System (tokens.css)
 * Defines the design language for the premium To-be website.
 * Premium Light Mode: Primary Deep Blue (#002165), Accent Green (#2BB34B).
 * 12px Rounded Cards, 100px Pill Buttons, Modern Typography.
 */

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

:root {
  /* ==========================================================================
     COLOR SYSTEM (Premium Light Mode - Deep Blue & Green)
     ========================================================================== */
  
  /* Core Brand Colors */
  --color-primary: #002165;           /* Deep Blue - Main Primary */
  --color-primary-light: #1A408F;     /* Primary Light Blue */
  --color-primary-dark: #00123A;      /* Darkest Blue */
  --color-primary-subtle: #F0F4FA;    /* Light Blue/Gray Background Tint */
  --color-primary-rgb: 0, 33, 101;    /* For RGBA Opacity controls */
  
  /* Accent Colors */
  --color-accent: #2BB34B;            /* Green - Secondary Brand Accent */
  --color-accent-mint: #2BB34B;       /* Green Accent alias */
  --color-accent-light: #EBF8EE;      /* Ultra-light green tint */
  --color-accent-dark: #1E8233;       /* Dark Green */
  
  /* Neutral Palette (Light mode typography hierarchy & backgrounds) */
  --color-neutral-950: #111111;       /* Dark Charcoal for active text & titles */
  --color-neutral-900: #1C1C1E;       /* Charcoal Black */
  --color-neutral-800: #2C2C2E;       /* Dark Gray */
  --color-neutral-700: #48484A;       /* Muted Text */
  --color-neutral-600: #636366;       /* Secondary Text */
  --color-neutral-500: #8E8E93;       /* Caption Text */
  --color-neutral-400: #AEAEB2;       /* Disabled or placeholder */
  --color-neutral-300: #D1D1D6;       /* Light border */
  --color-neutral-200: #E5E5EA;       /* Divider */
  --color-neutral-100: #F2F2F7;       /* Light card background */
  --color-neutral-50: #F8F9FA;        /* General background */
  --color-white: #FFFFFF;
  
  /* Feedback/State Colors */
  --color-success: #2BB34B;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #1A408F;

  /* ==========================================================================
     TYPOGRAPHY (Modern Geometric Sans-Serif)
     ========================================================================== */
  
  /* Font Families - Outfit for Headings, Inter for Body and Microcopy */
  --font-headings: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  
  /* Font Sizes (Fluid Scale / Rem-based) */
  --size-xs: 0.75rem;                 /* 12px - Overlines, metadata */
  --size-sm: 0.875rem;                /* 14px - Side text, captions */
  --size-base: 1rem;                  /* 16px - Default body text */
  --size-lg: 1.125rem;                /* 18px - Body emphasis, subtitles */
  --size-xl: 1.25rem;                 /* 20px - Small headers, card titles */
  --size-2xl: 1.5rem;                 /* 24px - Section sub-headers */
  --size-3xl: 2rem;                   /* 32px - Section headings */
  --size-4xl: 2.5rem;                 /* 40px - Page headers */
  --size-5xl: 3.5rem;                 /* 56px - Hero headings, stats */
  --size-6xl: 4.5rem;                 /* 72px - Display typography */

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Line Heights */
  --lh-none: 1;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.625;
  --lh-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ==========================================================================
     BORDER RADIUS (Modern 12px and 100px Pill)
     ========================================================================== */
  
  --radius-xs: 4px;                   /* Tiny tags, badges */
  --radius-sm: 8px;                   /* Small UI components, tooltips */
  --radius-md: 12px;                  /* 12px 모서리 라운딩 - Standard cards, grid boxes, image panels */
  --radius-lg: 20px;                  /* Larger cards, dialog containers */
  --radius-xl: 32px;                  /* High premium section wrappers */
  --radius-pill: 100px;               /* 100px 알약형 버튼 - Buttons, pill badges, tag chips */
  --radius-circle: 9999px;            /* Full circle avatar/icon buttons */

  /* ==========================================================================
     SPACING & LAYOUT SYSTEM
     ========================================================================== */
  
  --space-1: 0.25rem;                 /* 4px */
  --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 */
  --space-32: 8rem;                   /* 128px */
  
  /* Main Container Sizes */
  --container-width: 1280px;
  --container-padding: 2rem;

  /* ==========================================================================
     SHADOWS & ELEVATION
     ========================================================================== */
  
  --shadow-none: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-sm: 0 2px 8px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px -8px rgba(15, 23, 42, 0.12), 0 8px 24px -4px rgba(15, 23, 42, 0.06);
  
  /* Premium Glow (Concept B theme highlight glow) */
  --shadow-glow-navy: 0 0 20px rgba(0, 33, 101, 0.1);
  --shadow-glow-navy-hover: 0 0 35px rgba(0, 33, 101, 0.2);
  --shadow-glow-cyan: 0 0 20px rgba(43, 179, 75, 0.15);
  --shadow-glow-mint: 0 0 20px rgba(43, 179, 75, 0.2);
  
  /* Backward compatibility aliases */
  --shadow-glow-cobalt: 0 0 20px rgba(0, 33, 101, 0.1);
  --shadow-glow-cobalt-hover: 0 0 35px rgba(0, 33, 101, 0.2);
  --shadow-glow-accent: 0 0 20px rgba(43, 179, 75, 0.2);

  /* ==========================================================================
     TRANSITIONS & MICRO-ANIMATIONS
     ========================================================================== */
  
  /* Easing curves */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* Elegant ease-out for swift responsiveness */
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy micro-animations */

  /* Timing */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-premium: 600ms;

  /* Z-Index Hierarchy */
  --z-back: -1;
  --z-base: 1;
  --z-decor: 10;
  --z-header: 100;
  --z-popup: 200;
  --z-overlay: 1000;
  --z-toast: 2000;
}

/* ==========================================================================
   GLOBAL UTILITIES / BASE STYLES ACCORDING TO TOKENS
   ========================================================================== */

/* Font assignment */
body {
  font-family: var(--font-body);
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-50);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: var(--weight-bold);
  color: var(--color-neutral-900);
  line-height: var(--lh-tight);
}

/* Premium 12px Rounded Cards */
.premium-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md); /* Precise 12px rounding */
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-premium), 
              box-shadow var(--duration-normal) var(--ease-premium),
              border-color var(--duration-normal) var(--ease-premium);
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

/* Modern Glassmorphism Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md); /* Precise 12px rounding */
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-premium);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-xl), var(--shadow-glow-cobalt);
}

/* 100px Pill Button Layouts (Pill Shaped Buttons) */
.btn-pill-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 50px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill); /* 100px Pill rounded corner */
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-headings);
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-normal) var(--ease-premium),
              transform var(--duration-fast) var(--ease-elastic);
}

.btn-pill-primary:hover {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-glow-cobalt-hover);
  transform: scale(1.03);
}

.btn-pill-primary:active {
  transform: scale(0.98);
}

.btn-pill-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 50px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill); /* 100px Pill rounded corner */
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font-headings);
  font-size: var(--size-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 2px solid var(--color-primary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-premium);
}

.btn-pill-secondary:hover {
  background-color: var(--color-primary-subtle);
  border-color: var(--color-primary-light);
  color: var(--color-primary-light);
  transform: translateY(-2px);
}

/* Modern Solid Text for High-End Titles */
.text-gradient {
  color: var(--color-primary);
}

.bg-cobalt-gradient {
  background: var(--color-primary-dark);
}