/* ============================================
   DESIGN TOKENS v2 — Drawn from the work
   ============================================
   Palette pulled directly from the pigeons,
   the cats, and the textile collage pieces
   that actually sold. Not the brand bible —
   the art itself.
   ============================================ */

:root {
  /* --- Spacing ---
     Same scale. No reason to change this. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Typography ---
     Swapped to DM Sans. Still clean, still geometric,
     but softer and warmer than Space Grotesk. The
     rounded terminals feel closer to her hand-drawn
     line work without being a "handwriting font."
     Medium weight added — her work has levels of
     line weight, not just thin/bold. */
  --font-family: 'DM Sans', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --type-display-size: 48px;
  --type-display-weight: var(--weight-bold);
  --type-display-leading: 1.1;

  --type-heading-size: 32px;
  --type-heading-weight: var(--weight-bold);
  --type-heading-leading: 1.2;

  --type-subheading-size: 20px;
  --type-subheading-weight: var(--weight-medium);
  --type-subheading-leading: 1.3;

  --type-body-size: 16px;
  --type-body-weight: var(--weight-regular);
  --type-body-leading: 1.6;

  --type-body-small-size: 14px;
  --type-body-small-weight: var(--weight-regular);
  --type-body-small-leading: 1.5;

  --type-caption-size: 12px;
  --type-caption-weight: var(--weight-medium);
  --type-caption-leading: 1.7;

  --type-button-size: 14px;
  --type-button-weight: var(--weight-bold);
  --type-button-leading: 1.1;
  --type-button-tracking: 0.01em;

  --type-price-size: 20px;
  --type-price-weight: var(--weight-bold);
  --type-price-leading: 1.1;

  /* --- Palette ---
     Every colour here exists in the sold artwork.

     Magenta:     the hot pink background on "Cat Among the Pigeons",
                  the neck shimmer on the first pigeon
     Orange:      the cat's polka-dot fabric, warm and punchy
     Leaf Green:  the garden in the cat piece, vivid lime-green
     Sky Blue:    the background behind the pigeon pair
     Pigeon Gold: those yellow eyes — more amber than canary,
                  warmer and more alive
     Ink Black:   the line work — stripes, spirals, dots, every piece
     Warm White:  slightly warmer than porcelain, like the paper
                  she draws on */

  --palette-magenta: #E4197C;
  --palette-orange: #E8682A;
  --palette-green: #7BB535;
  --palette-sky: #4AADE0;
  --palette-gold: #D4A017;
  --palette-ink: #1A1A1A;
  --palette-warm-white: #FAF8F5;

  /* --- Colour Roles: Backgrounds --- */
  --color-surface: var(--palette-warm-white);
  --color-surface-alt: #FFF0F5;          /* soft magenta tint, not the full blast */
  --color-surface-inverse: var(--palette-ink);

  /* --- Colour Roles: Text --- */
  --color-text-primary: var(--palette-ink);
  --color-text-secondary: #555555;
  --color-text-inverse: var(--palette-warm-white);
  --color-text-accent: var(--palette-magenta);

  /* --- Colour Roles: Interactive ---
     Magenta as primary CTA. It's the most energetic
     colour in her work and has the confidence the brand
     needs. Ink black stays as secondary. */
  --color-action-primary: var(--palette-magenta);
  --color-action-primary-hover: #C81468;
  --color-action-primary-active: #A81058;
  --color-action-secondary: var(--palette-ink);
  --color-action-secondary-hover: #333333;
  --color-action-secondary-active: #262626;

  /* --- Colour Roles: Feedback ---
     Orange for warnings instead of amber — it's already
     in the palette and reads as warm caution rather
     than clinical alert. */
  --color-success: #2A602F;
  --color-error: #A71B1B;
  --color-warning: var(--palette-orange);

  /* --- Colour Roles: Decorative ---
     These are the colours that appear in hero sections,
     collection backgrounds, and accent moments. Cycled
     per collection, not used all at once.
     Rule from the brand bible still holds:
     "Think in colour families, not rainbows." */
  --color-decorative-a: var(--palette-magenta);
  --color-decorative-b: var(--palette-sky);
  --color-decorative-c: var(--palette-green);
  --color-decorative-d: var(--palette-orange);
  --color-decorative-e: var(--palette-gold);

  /* --- Colour Roles: Border ---
     Slightly warmer border to match the warm white. */
  --color-border: #E2DFDB;
  --color-border-focus: var(--palette-magenta);

  /* --- Elevation ---
     Warmer shadow tint. Pure black shadows on a warm
     white background look clinical. */
  --elevation-none: none;
  --elevation-low: 0 4px 12px rgba(26, 26, 26, 0.06);
  --elevation-high: 0 8px 24px rgba(26, 26, 26, 0.10);

  /* --- Border Radius ---
     Rounder. Her shapes are organic — spirals, blobs,
     rounded pigeon heads. Nothing in the work is sharp-
     cornered. The 8px default feels closer to the
     softness of the collage edges. */
  --radius-none: 0;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-full: 9999px;

  /* --- Motion ---
     Slightly slower default. The work isn't snappy or
     clinical — it's handmade and has a gentle rhythm.
     The easing is softer too. */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 450ms;
  --easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);
}