/* Pottery Project Studios — Design tokens
   Mirrors the mockup's colors_and_type.css exactly. */

:root {
  /* Core brand */
  --ppp-terracotta:       #B5390E;
  --ppp-clay-brown:       #65220E;

  /* Earthy neutrals */
  --ppp-bone:             #F6F0E6;
  --ppp-putty:            #E6DCC9;
  --ppp-sand:             #CDBFA4;
  --ppp-kiln:             #3A2418;
  --ppp-smoke:            #6E5A4B;

  /* Extended */
  --ppp-terracotta-deep:  #8E2808;
  --ppp-terracotta-soft:  #E8794D;
  --ppp-glaze-blue:       #2F4858;
  --ppp-mustard:          #C88A2B;
  --ppp-sage:             #7A8A63;

  /* Semantic surfaces */
  --ppp-bg:               var(--ppp-bone);
  --ppp-bg-alt:           var(--ppp-putty);
  --ppp-bg-inverted:      var(--ppp-clay-brown);
  --ppp-bg-accent:        var(--ppp-terracotta);

  /* Semantic foreground */
  --ppp-fg:               var(--ppp-kiln);
  --ppp-fg-muted:         var(--ppp-smoke);
  --ppp-fg-accent:        var(--ppp-terracotta);
  --ppp-fg-on-dark:       var(--ppp-bone);
  --ppp-fg-on-accent:     var(--ppp-bone);

  /* Borders & dividers */
  --ppp-border:           var(--ppp-sand);
  --ppp-border-strong:    var(--ppp-smoke);

  /* Fonts */
  --ppp-font-display:     'Paytone One', 'Arial Black', Impact, system-ui, sans-serif;
  --ppp-font-body:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ppp-font-mono:        'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Radii */
  --ppp-radius-none:      0;
  --ppp-radius-sm:        2px;
  --ppp-radius-md:        6px;
  --ppp-radius-lg:        14px;
  --ppp-radius-pill:      999px;

  /* Spacing (4px base) */
  --ppp-space-1:          4px;
  --ppp-space-2:          8px;
  --ppp-space-3:          12px;
  --ppp-space-4:          16px;
  --ppp-space-5:          24px;
  --ppp-space-6:          32px;
  --ppp-space-7:          48px;
  --ppp-space-8:          64px;
  --ppp-space-9:          96px;

  /* Shadows (warm, brown-tinted) */
  --ppp-shadow-sm:        0 1px 2px rgba(58, 36, 24, 0.08);
  --ppp-shadow-md:        0 4px 12px rgba(58, 36, 24, 0.10);
  --ppp-shadow-lg:        0 12px 32px rgba(58, 36, 24, 0.14);
  --ppp-shadow-inset:     inset 0 1px 2px rgba(58, 36, 24, 0.10);

  /* Motion */
  --ppp-ease:             cubic-bezier(0.2, 0.7, 0.2, 1);
  --ppp-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ppp-dur-fast:         140ms;
  --ppp-dur-med:          220ms;
  --ppp-dur-slow:         420ms;

  /* Layout */
  --ppp-maxw:             1320px;
  --ppp-maxw-narrow:      900px;
  --ppp-maxw-wide:        1200px;
}