/* ============================================================
   SUBTWO DESIGN TOKENS
   All values from Core Assets DLS specifications
   ============================================================ */

/* Google Fonts — Subtwo Brand Typography */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {

  /* ── Typography ── */
  --font-primary: 'Space Grotesk', sans-serif;
  --font-editorial: 'Libre Baskerville', serif;
  --font-data: 'Space Mono', monospace;

  /* ── Primary Ramp — Deep Violet ── */
  --violet-50:  #F0EDF5;
  --violet-100: #DDD7EF;
  --violet-200: #C0B6E2;
  --violet-300: #A99CC2;
  --violet-500: #6B5B9E;
  --violet-700: #3B2E5E;
  --violet-800: #2A2045;
  --violet-900: #1E1825;

  /* ── Accent Ramp — Warm Stone ── */
  --stone-50:  #FAF5EE;
  --stone-100: #EFE0C4;
  --stone-200: #DFC89A;
  --stone-300: #C4AD8C;
  --stone-500: #A8895F;
  --stone-700: #7A6040;
  --stone-800: #5C3D1E;
  --stone-900: #3A2410;

  /* ── Neutral Scale ── */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F2F0F5;
  --neutral-200: #E2DFE8;
  --neutral-300: #C4C0CC;
  --neutral-500: #8C8898;
  --neutral-700: #524E5C;
  --neutral-800: #302C38;
  --neutral-900: #1E1825;

  /* ── Named Colour Roles ── */
  --color-primary:       #3B2E5E;  /* Subtwo Violet */
  --color-primary-mid:   #6B5B9E;  /* Slate Violet */
  --color-primary-muted: #A99CC2;  /* Lavender Stone */
  --color-surface:       #F0EDF5;  /* Pale Violet */
  --color-accent:        #C4AD8C;  /* Warm Stone */
  --color-accent-mid:    #A8895F;  /* Stone Mid */
  --color-accent-light:  #EFE0C4;  /* Stone Light */
  --color-ground:        #1E1825;  /* Night Violet */
  --color-border:        #E2DFE8;  /* Neutral 200 */
  --color-text-primary:  #1E1825;
  --color-text-secondary: #8C8898;
  --color-text-tertiary: #C4C0CC;

  /* ── Semantic Colours ── */
  --color-success:    #2D7A47;
  --color-success-bg: #E8F5EC;
  --color-warning:    #C47E1A;
  --color-warning-bg: #FDF3E4;
  --color-error:      #C43A3A;
  --color-error-bg:   #FAEAEA;
  --color-info:       #3A5EA8;
  --color-info-bg:    #E8EEF8;

  /* ── Spacing Scale — base unit: 4px ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Semantic Spacing ── */
  --gap-icon:      8px;
  --pad-tag:       4px 10px;
  --pad-btn:       10px 20px;
  --pad-card:      20px 24px;
  --gap-card:      12px;
  --gap-section:   40px;
  --para-gap:      16px;
  --heading-above: 32px;
  --heading-below: 8px;

  /* ── Grid ── */
  --grid-max-width: 1280px;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ── Motion Tokens ── */
  --dur-micro: 100ms;
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  350ms;
  --dur-chart: 500ms;
  --dur-count: 800ms;

  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --stagger-bar:  60ms;
  --stagger-card: 80ms;
}