/* ============================================================
   Digital Atelier — Design Tokens
   Brand: Digital Wardrobe / Digital Atelier
   Aesthetic: Curated Earth × Curated Pink (classy Barbie dollhouse)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {

  /* ─── SURFACE HIERARCHY ─────────────────────────────────── */
  --surface-lowest:         #FFFFFF;    /* Floating cards, modals */
  --surface:                #FBF9F5;    /* Global background — premium paper */
  --surface-low:            #F5F3EF;    /* Large content blocks */
  --surface-container:      #EFEEEA;    /* Mid-level containers */
  --surface-high:           #E8E6E2;    /* Elevated containers */
  --surface-highest:        #E2E0DC;    /* Topmost surfaces, input fills */

  /* ─── PRIMARY — CARBON INK BROWN ───────────────────────── */
  --primary:                #48312A;    /* Primary CTA background */
  --primary-container:      #614740;    /* Hover state, gradient end */
  --primary-light:          #7A5C53;    /* Lighter variant */
  --on-primary:             #FBF9F5;    /* Text on primary */

  /* ─── SECONDARY — SKY LIGHT TEAL ───────────────────────── */
  --secondary-container:    #D4E6EB;    /* Callout accent, sky breath */
  --on-secondary-container: #1B1C1A;

  /* ─── CURATED PINK — BARBIE DOLLHOUSE BLUSH ────────────── */
  --pink:                   #EDD5D0;    /* Soft blush — Magic Camera, accents */
  --pink-container:         #F7EAE8;    /* Light pink container */
  --pink-deep:              #C4857A;    /* Pressed/active, richer accent */
  --pink-on:                #3D1A16;    /* Text on deep pink */
  --on-pink:                #48312A;    /* Text on soft pink */

  /* ─── TEXT / INK ────────────────────────────────────────── */
  --on-surface:             #1B1C1A;    /* Primary text — carbon ink */
  --on-surface-variant:     #6B6663;    /* Subdued / metadata text */
  --on-surface-disabled:    #B5B2AF;    /* Disabled states */
  --outline-variant:        #D3C3BF;    /* Ghost borders (use at 20% opacity) */

  /* ─── SEMANTIC ──────────────────────────────────────────── */
  --success:                #2D6A4F;
  --success-container:      #D8F3DC;
  --warning:                #9C6E00;
  --warning-container:      #FFF3CD;
  --error:                  #8C1D18;
  --error-container:        #F9DEDC;
  --info:                   #4A7C9B;
  --info-container:         #D4E6EB;    /* reuses secondary */

  /* ─── FONTS ─────────────────────────────────────────────── */
  --font-serif:    'Noto Serif', Georgia, serif;
  --font-sans:     'Manrope', 'DM Sans', sans-serif;

  /* ─── TYPE SCALE ─────────────────────────────────────────── */
  --display-lg-size:        57px;
  --display-lg-height:      64px;
  --display-lg-tracking:    -0.02em;
  --display-lg-weight:      400;

  --display-md-size:        45px;
  --display-md-height:      52px;
  --display-md-tracking:    -0.02em;
  --display-md-weight:      400;

  --headline-lg-size:       32px;
  --headline-lg-height:     40px;
  --headline-lg-tracking:   0em;
  --headline-lg-weight:     400;

  --headline-md-size:       28px;
  --headline-md-height:     36px;
  --headline-md-tracking:   0em;
  --headline-md-weight:     400;

  --title-lg-size:          22px;
  --title-lg-height:        28px;
  --title-lg-tracking:      0em;
  --title-lg-weight:        600;

  --title-md-size:          16px;
  --title-md-height:        24px;
  --title-md-tracking:      0.01em;
  --title-md-weight:        600;

  --body-md-size:           14px;
  --body-md-height:         20px;
  --body-md-tracking:       0em;
  --body-md-weight:         400;

  --body-sm-size:           12px;
  --body-sm-height:         16px;
  --body-sm-tracking:       0em;
  --body-sm-weight:         400;

  --label-md-size:          12px;
  --label-md-height:        16px;
  --label-md-tracking:      0.05em;
  --label-md-weight:        500;

  --label-sm-size:          11px;
  --label-sm-height:        16px;
  --label-sm-tracking:      0.05em;
  --label-sm-weight:        500;

  /* ─── SPACING (4px base) ────────────────────────────────── */
  --spacing-1:   4px;
  --spacing-2:   8px;
  --spacing-3:   12px;
  --spacing-4:   16px;
  --spacing-5:   20px;
  --spacing-6:   24px;
  --spacing-8:   32px;
  --spacing-10:  40px;
  --spacing-12:  48px;
  --spacing-16:  64px;
  --spacing-20:  80px;
  --spacing-24:  96px;

  /* ─── BORDER RADIUS ─────────────────────────────────────── */
  --radius-sm:   8px;     /* Input tops */
  --radius-md:   16px;    /* List thumbnails */
  --radius-lg:   24px;    /* Medium cards */
  --radius-xl:   48px;    /* Product cards */
  --radius-full: 9999px;  /* Pill buttons */

  /* ─── ELEVATION / SHADOW ────────────────────────────────── */
  /* Elevation is primarily TONAL. Only use mineral shadow for floating layers. */
  --shadow-mineral: 0 12px 48px rgba(27, 28, 26, 0.04); /* modal shadow */
  --shadow-none:    none;

  /* ─── GLASS ─────────────────────────────────────────────── */
  --glass-bg:     rgba(251, 249, 245, 0.75);
  --glass-blur:   blur(20px); /* @kind other */

  /* ─── TRANSITIONS ───────────────────────────────────────── */
  --transition-fast:   120ms ease-out; /* @kind other */
  --transition-base:   220ms ease-out; /* @kind other */
  --transition-slow:   350ms ease-out; /* @kind other */
}

/* ─── SEMANTIC TYPE CLASSES ─────────────────────────────── */

.display-lg {
  font-family: var(--font-serif);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-height);
  letter-spacing: var(--display-lg-tracking);
  font-weight: var(--display-lg-weight);
  color: var(--on-surface);
}

.display-md {
  font-family: var(--font-serif);
  font-size: var(--display-md-size);
  line-height: var(--display-md-height);
  letter-spacing: var(--display-md-tracking);
  font-weight: var(--display-md-weight);
  color: var(--on-surface);
}

.headline-lg {
  font-family: var(--font-serif);
  font-size: var(--headline-lg-size);
  line-height: var(--headline-lg-height);
  letter-spacing: var(--headline-lg-tracking);
  font-weight: var(--headline-lg-weight);
  color: var(--on-surface);
}

.headline-md {
  font-family: var(--font-serif);
  font-size: var(--headline-md-size);
  line-height: var(--headline-md-height);
  letter-spacing: var(--headline-md-tracking);
  font-weight: var(--headline-md-weight);
  color: var(--on-surface);
}

.title-lg {
  font-family: var(--font-sans);
  font-size: var(--title-lg-size);
  line-height: var(--title-lg-height);
  letter-spacing: var(--title-lg-tracking);
  font-weight: var(--title-lg-weight);
  color: var(--on-surface);
}

.title-md {
  font-family: var(--font-sans);
  font-size: var(--title-md-size);
  line-height: var(--title-md-height);
  letter-spacing: var(--title-md-tracking);
  font-weight: var(--title-md-weight);
  color: var(--on-surface);
}

.body-md {
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-height);
  font-weight: var(--body-md-weight);
  color: var(--on-surface);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-height);
  font-weight: var(--body-sm-weight);
  color: var(--on-surface-variant);
}

.label-md {
  font-family: var(--font-sans);
  font-size: var(--label-md-size);
  line-height: var(--label-md-height);
  letter-spacing: var(--label-md-tracking);
  font-weight: var(--label-md-weight);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.label-sm {
  font-family: var(--font-sans);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-height);
  letter-spacing: var(--label-sm-tracking);
  font-weight: var(--label-sm-weight);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}