/* ==========================================================================
   Photo Club Design System — CSS Custom Properties
   ==========================================================================
   A friendly art-class design system for a photo upload and presentation
   workflow. The palette borrows warm studio colors while preserving clarity.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR PALETTE
     -------------------------------------------------------------------------- */

  /* Art Bonbon — guide palette */
  --art-cream:      #fff4e6;
  --art-cream-2:    #fffdfa;
  --art-ink:        #312a3f;
  --art-muted:      #7a7390;
  --art-tangerine:  #ff7a3d;
  --art-orange:     #f05f2a;
  --art-yellow:     #ffc23d;
  --art-mint:       #25c2a0;
  --art-sky:        #46b2f0;
  --art-grape:      #8a6cf0;
  --art-pink:       #ff6b9d;

  /* Cinema — guide palette */
  --cinema-bg:        #0c0507;
  --cinema-bg-2:      #1c0a12;
  --cinema-oxblood:   #34101a;
  --cinema-gold:      #f6e3ab;
  --cinema-gold-2:    #e8c87a;
  --cinema-gold-3:    #c9a253;
  --cinema-bronze:    #a87d2e;
  --cinema-cream:     #f1e4c4;
  --cinema-muted:     #cdba8f;
  --cinema-panel:     rgba(22, 8, 12, 0.82);
  --cinema-border:    rgba(201, 162, 83, 0.34);

  /* Primary — art tangerine action */
  --color-primary-50:  #fff0e6;
  --color-primary-100: #ffe2cf;
  --color-primary-200: #ffc48f;
  --color-primary-300: #ff9a5e;
  --color-primary-400: #ff9152;
  --color-primary-500: #ff7a3d;
  --color-primary-600: #f05f2a;
  --color-primary-700: #c94d1f;
  --color-primary-800: #9c3e20;
  --color-primary-900: #74321d;

  /* Secondary — fresh mint studio accent */
  --color-secondary-50:  #e7f9f3;
  --color-secondary-100: #d7f5ec;
  --color-secondary-200: #b8ecdc;
  --color-secondary-300: #7adcc4;
  --color-secondary-400: #46ccb0;
  --color-secondary-500: #25c2a0;
  --color-secondary-600: #16a584;
  --color-secondary-700: #16745f;
  --color-secondary-800: #155f50;
  --color-secondary-900: #12493c;

  /* Accent — sunny classroom yellow */
  --color-accent-50:  #fff6e0;
  --color-accent-100: #fff1c2;
  --color-accent-200: #ffe38a;
  --color-accent-300: #ffd65c;
  --color-accent-400: #ffc23d;
  --color-accent-500: #ffba2e;
  --color-accent-600: #df9710;
  --color-accent-700: #b8720e;
  --color-accent-800: #8f560d;
  --color-accent-900: #6f430c;

  /* Neutrals */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fffdfa;
  --color-neutral-100: #fff4e6;
  --color-neutral-200: #f1e7da;
  --color-neutral-300: #dccfc2;
  --color-neutral-400: #b9aebe;
  --color-neutral-500: #8a8298;
  --color-neutral-600: #7a7390;
  --color-neutral-700: #4a4360;
  --color-neutral-800: #312a3f;
  --color-neutral-900: #1d1728;

  /* Semantic colors */
  --color-background:       var(--art-cream);
  --color-surface:          #ffffff;
  --color-surface-raised:   var(--art-cream-2);
  --color-text-primary:     var(--art-ink);
  --color-text-secondary:   #4a4360;
  --color-text-tertiary:    var(--art-muted);
  --color-text-inverse:     #ffffff;
  --color-border:           #f1e7da;
  --color-border-light:     #ffe2cf;
  --color-border-focus:     var(--art-tangerine);

  /* Feedback colors */
  --color-success-light: #effdf6;
  --color-success:       #178b6a;
  --color-success-dark:  #146f58;

  --color-error-light:   #fef2f2;
  --color-error:         #dc2626;
  --color-error-dark:    #b91c1c;

  --color-warning-light: #fffbea;
  --color-warning:       #d98500;
  --color-warning-dark:  #b26100;

  --color-info-light:    #effdf6;
  --color-info:          #178b6a;
  --color-info-dark:     #146f58;

  /* Overlay */
  --color-overlay:       rgba(49, 42, 63, 0.62);
  --color-overlay-heavy: rgba(49, 42, 63, 0.86);

  /* Presentation mode */
  --color-present-bg:    var(--art-cream);
  --color-present-text:  var(--art-ink);
  --color-present-sub:   var(--art-muted);
  --color-present-arrow: rgba(255, 255, 255, 0.15);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */

  /* Font families */
  --font-family-base:    'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Jua', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-cinema:  'Nanum Myeongjo', 'Pretendard', serif;
  --font-family-cinema-display: 'Playfair Display', 'Nanum Myeongjo', serif;
  --font-family-mono:    'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;

  /* Font sizes — modular scale (1.25 ratio, base 16px) */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.25rem;   /* 36px */
  --font-size-4xl:  3rem;      /* 48px */

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

  /* Line heights */
  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:  1.75;

  /* Letter spacing */
  --letter-spacing-tight:  0;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0;

  /* --------------------------------------------------------------------------
     SPACING — 4px base grid
     -------------------------------------------------------------------------- */

  --space-0:    0;
  --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 */

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   8px;
  --radius-xl:   8px;
  --radius-2xl:  8px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------------- */

  --shadow-xs:     0 1px 2px rgba(89, 58, 32, 0.05);
  --shadow-sm:     0 2px 5px rgba(89, 58, 32, 0.07);
  --shadow-md:     0 8px 18px rgba(89, 58, 32, 0.1);
  --shadow-lg:     0 14px 30px rgba(89, 58, 32, 0.12);
  --shadow-xl:     0 22px 44px rgba(89, 58, 32, 0.14);
  --shadow-2xl:    0 28px 70px rgba(89, 58, 32, 0.2);
  --shadow-inner:  inset 0 1px 3px rgba(89, 58, 32, 0.08);
  --shadow-focus:  0 0 0 3px rgba(230, 83, 50, 0.2);
  --shadow-error:  0 0 0 3px rgba(220, 38, 38, 0.18);

  /* Card-specific shadows */
  --shadow-card:       0 4px 12px rgba(89, 58, 32, 0.07);
  --shadow-card-hover: 0 12px 26px rgba(89, 58, 32, 0.14);
  --shadow-modal:      0 24px 64px rgba(44, 33, 27, 0.24);

  /* --------------------------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-medium: 300ms ease;
  --transition-slow:   500ms ease;

  /* Specific transition 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-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------------------------- */

  --z-below:     -1;
  --z-base:       0;
  --z-raised:     1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;
  --z-max:        999;

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */

  --container-max-width: 1180px;
  --container-padding:   var(--space-4);
  --header-height:       64px;
  --sidebar-width:       300px;

  /* Touch target (WCAG minimum) */
  --touch-target-min:    44px;
}

/* ==========================================================================
   BREAKPOINTS (as comments — CSS custom properties cannot define media queries)
   ==========================================================================
   --breakpoint-xs:  320px   — Small phones
   --breakpoint-sm:  480px   — Large phones
   --breakpoint-md:  768px   — Tablets
   --breakpoint-lg:  1024px  — Small desktops / landscape tablets
   --breakpoint-xl:  1280px  — Desktops
   --breakpoint-2xl: 1536px  — Large desktops
   ========================================================================== */