/* ============================================================
   ThePawlure — Design System
   Single source of truth for all design tokens
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Backgrounds
  ---------------------------------------------------------- */
  --bg-base:             #0D0B08;
  --bg-secondary:        #181410;
  --bg-elevated:         #231E18;
  --bg-overlay:          rgba(13, 11, 8, 0.80);
  --bg-overlay-light:    rgba(13, 11, 8, 0.65);

  /* ----------------------------------------------------------
     Text
  ---------------------------------------------------------- */
  --text-primary:        #F5EDD6;
  --text-secondary:      #C8BA9E;
  --text-tertiary:       #8C7E6E;
  --text-disabled:       #4A4138;
  --text-inverse:        #0D0B08;

  /* ----------------------------------------------------------
     Gold
  ---------------------------------------------------------- */
  --gold-primary:        #C9A84C;
  --gold-light:          #E8C96A;
  --gold-muted:          rgba(201, 168, 76, 0.35);
  --gold-border:         rgba(201, 168, 76, 0.45);
  --gold-glow:           rgba(201, 168, 76, 0.06);

  /* ----------------------------------------------------------
     Borders
  ---------------------------------------------------------- */
  --border-subtle:       #1A1512;
  --border-default:      #2E2820;
  --border-medium:       #433B30;
  --border-active:       #C9A84C;
  --border-active-muted: rgba(201, 168, 76, 0.45);

  /* ----------------------------------------------------------
     Buttons
  ---------------------------------------------------------- */
  --button-primary-bg:           #C9A84C;
  --button-primary-text:         #0D0B08;
  --button-primary-hover:        #E8C96A;
  --button-secondary-border:     #C9A84C;
  --button-secondary-text:       #C9A84C;
  --button-secondary-hover:      #E8C96A;
  --button-ghost-border:         #2E2820;
  --button-ghost-text:           #8C7E6E;
  --button-ghost-hover-border:   #433B30;
  --button-ghost-hover-text:     #C8BA9E;
  --button-disabled-bg:          #5C4E2A;
  --button-disabled-text:        #3D3020;

  /* ----------------------------------------------------------
     Navigation
  ---------------------------------------------------------- */
  --nav-logo:              #F5EDD6;
  --nav-link:              #C8BA9E;
  --nav-link-hover:        #F5EDD6;
  --nav-portraits-border:  rgba(200, 186, 158, 0.50);
  --nav-portraits-text:    #C8BA9E;
  --nav-portraits-hover:   #F5EDD6;

  /* ----------------------------------------------------------
     Thumbnails
  ---------------------------------------------------------- */
  --thumb-border-default:  #2E2820;
  --thumb-border-hover:    #433B30;
  --thumb-border-active:   rgba(201, 168, 76, 0.45);
  --thumb-arrow-active:    #C8BA9E;
  --thumb-arrow-disabled:  rgba(200, 186, 158, 0.30);

  /* ----------------------------------------------------------
     Counter
  ---------------------------------------------------------- */
  --counter-active:  #C8BA9E;
  --counter-empty:   #8C7E6E;

  /* ----------------------------------------------------------
     Stripe badge
  ---------------------------------------------------------- */
  --stripe-border:  #433B30;
  --stripe-text:    #C8BA9E;

  /* ----------------------------------------------------------
     Ambient
  ---------------------------------------------------------- */
  --ambient-warm:  rgba(61, 32, 16, 0.30);
  --ambient-gold:  rgba(201, 168, 76, 0.06);

  /* ----------------------------------------------------------
     Input fields
  ---------------------------------------------------------- */
  --input-bg:             #231E18;
  --input-border:         #2E2820;
  --input-border-focus:   #C9A84C;
  --input-border-error:   #C0392B;
  --input-text:           #F5EDD6;
  --input-placeholder:    #8C7E6E;
  --input-glow-focus:     rgba(201, 168, 76, 0.08);

  /* ----------------------------------------------------------
     Typography — Font Families
  ---------------------------------------------------------- */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ----------------------------------------------------------
     Typography — Playfair Display (fluid headings)
  ---------------------------------------------------------- */
  --font-size-h1:     clamp(36px, 5.5vw, 64px);
  --font-size-h2:     clamp(26px, 3.5vw, 40px);
  --font-size-h3:     clamp(22px, 2.8vw, 32px);
  --font-size-h4:     clamp(20px, 2.2vw, 26px);
  --font-size-price:  clamp(32px, 4vw, 48px);
  --font-size-logo:   24px;

  --font-weight-serif-regular:     400;
  --font-weight-serif-semibold:    600;
  --font-weight-serif-bold:        700;

  --line-height-h1:  1.05;
  --line-height-h2:  1.12;
  --line-height-h3:  1.18;
  --line-height-h4:  1.25;

  --letter-spacing-h1:  -0.02em;
  --letter-spacing-h2:  -0.01em;
  --letter-spacing-h3:  -0.01em;
  --letter-spacing-h4:  0;

  /* ----------------------------------------------------------
     Typography — Inter (UI text)
  ---------------------------------------------------------- */
  --font-size-section-label:  11px;
  --font-size-lead:           20px;
  --font-size-body-large:     17px;
  --font-size-body-medium:    15px;
  --font-size-body-small:     13px;
  --font-size-nav-link:       14px;
  --font-size-button:         16px;
  --font-size-caption:        12px;
  --font-size-savings:        12px;
  --font-size-micro:          11px;
  --font-size-badge:          11px;
  --font-size-loader:         13px;

  /* ----------------------------------------------------------
     Border Radius
  ---------------------------------------------------------- */
  --radius-xs:    8px;
  --radius-sm:    12px;
  --radius-md:    16px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  /* ----------------------------------------------------------
     Spacing (base unit: 8px)
  ---------------------------------------------------------- */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-8:   64px;
  --space-10:  80px;
  --space-15:  120px;

  /* ----------------------------------------------------------
     Layout
  ---------------------------------------------------------- */
  --max-width:      1200px;
  --header-height:  64px;

  /* ----------------------------------------------------------
     Transitions (Apple-style easing)
  ---------------------------------------------------------- */
  --ease-out:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:  150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base:  250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:  450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}