/* ============================================================
   SoMar Fotostudio — Design Tokens
   ------------------------------------------------------------
   Source of truth for color, type, space, motion. Edit values
   here; the rest of the stylesheet reads them as variables.
   ============================================================ */

/* Self-hosted Google Fonts (Playfair Display + Libre Franklin) */
@import url('./fonts.css');

:root {
  /* Colors ─────────────────────────────────────────────── */
  --espresso:     #2C2416;
  --warm-stone:   #8B7355;
  --terracotta:   #C4956A;
  --linen:        #FAF7F2;
  --white:        #FFFFFF;
  --driftwood:    #6B5D4D;
  --sand:         #A69680;

  /* Tints (used for alpha overlays) */
  --espresso-rgb:    44, 36, 22;
  --warm-stone-rgb:  139, 115, 85;
  --terracotta-rgb:  196, 149, 106;
  --linen-rgb:       250, 247, 242;
  --driftwood-rgb:   107, 93, 77;
  --sand-rgb:        166, 150, 128;

  /* Type families */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale — desktop */
  --type-display: 72px;
  --type-h1:      56px;
  --type-h2:      40px;
  --type-h3:      28px;
  --type-h4:      18px;
  --type-body-l:  18px;
  --type-body:    16px;
  --type-body-s:  14px;
  --type-caption: 13px;
  --type-overline:12px;
  --type-button:  14px;

  /* Spacing — 8 px base */
  --space-3xs:   4px;
  --space-2xs:   8px;
  --space-xs:   12px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl: 128px;

  /* Container */
  --container-max: 1200px;
  --container-pad: var(--space-xl);

  /* Shadows (warm — derived from --espresso) */
  --shadow-warm:    0 4px 24px rgba(var(--espresso-rgb), 0.08);
  --shadow-warm-lg: 0 10px 40px rgba(var(--espresso-rgb), 0.12);
  --shadow-warm-xl: 0 20px 60px rgba(var(--espresso-rgb), 0.15);

  /* Motion */
  --ease-out:  cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;

  /* Layering */
  --z-banner:      40;
  --z-header:      50;
  --z-modal:       80;
  --z-toast:      100;
}

/* Mobile type scale ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --type-display: 40px;
    --type-h1:      36px;
    --type-h2:      28px;
    --type-h3:      22px;
    --type-body-l:  16px;
    --container-pad: var(--space-md);
  }
}

@media (max-width: 480px) {
  :root {
    --container-pad: var(--space-sm);
  }
}