/* ═══════════════════════════════════════════════════════════════════
   DesignVerse — CSS Custom Properties (Design Tokens)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour Palette ──────────────────────────────────────────── */
  --color-bg:             #F9F7F4;   /* warm off-white paper */
  --color-bg-card:        #FFFFFF;
  --color-bg-muted:       #F3F2EF;
  --color-bg-invert:      #1C1C1E;

  --color-text:           #1C1C1E;
  --color-text-muted:     #6B7280;
  --color-text-light:     #9CA3AF;
  --color-text-invert:    #F9F7F4;

  --color-accent:         #E63946;   /* bold editorial red */
  --color-accent-hover:   #C1121F;
  --color-accent-light:   #FFF1F2;

  --color-secondary:      #457B9D;   /* steel blue — links */
  --color-secondary-hover:#2E5F7A;

  --color-teal:           #2A9D8F;   /* tag accent */
  --color-gold:           #F4A261;   /* featured highlight */
  --color-purple:         #6C63FF;   /* workshop accent */

  --color-border:         #E5E7EB;
  --color-border-strong:  #D1D5DB;
  --color-surface:        #F3F4F6;

  /* ── Category Colours (mapped per category in DB) ─────────────── */
  --color-cat-ux:         #6C63FF;
  --color-cat-ui:         #E63946;
  --color-cat-product:    #F4A261;
  --color-cat-brand:      #2A9D8F;
  --color-cat-tools:      #457B9D;
  --color-cat-trends:     #E9C46A;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-display:         'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:            'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:            'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Type scale (fluid where possible) */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */
  --text-6xl:   4.5rem;    /* 72px */

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;
  --leading-loose:   2;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* ── Spacing Scale ───────────────────────────────────────────── */
  --space-1:    0.25rem;   /* 4px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-14:   3.5rem;    /* 56px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-width:   1200px;
  --container-padding: clamp(1rem, 4vw, 1.5rem);
  --header-height:     64px;

  /* ── Border Radius ───────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px  rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 20px 48px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index Scale ───────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark Theme ───────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:          #0F0F11;
  --color-bg-card:     #1A1A1E;
  --color-bg-muted:    #16161A;
  --color-bg-invert:   #F9F7F4;

  --color-text:        #F0EFE9;
  --color-text-muted:  #9CA3AF;
  --color-text-light:  #6B7280;
  --color-text-invert: #1C1C1E;

  --color-accent:      #FF4F5A;
  --color-accent-hover:#FF6B74;
  --color-accent-light:#2D1215;

  --color-secondary:   #63A7D4;
  --color-secondary-hover: #85BEDE;

  --color-border:       #2D2D32;
  --color-border-strong:#3D3D44;
  --color-surface:      #1E1E24;

  --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.4);
}