simpleshop_theme/assets/css/theme-primitives.css

/* ========================================
   THEME PRIMITIVES - Layer 1
   Fixed CSS custom properties
   ======================================== */

:root {
  /* Spacing scale */
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-6: 1.5rem;
  --p-space-8: 2rem;
  --p-space-12: 3rem;
  --p-space-16: 4rem;
  --p-space-24: 6rem;

  /* Border radius scale */
  --p-radius-none: 0;
  --p-radius-sm: 0.25rem;
  --p-radius-md: 0.5rem;
  --p-radius-lg: 0.75rem;
  --p-radius-xl: 1rem;
  --p-radius-full: 9999px;

  /* Font families - Curated pairings based on research */
  /* Sans-serif */
  --p-font-inter: 'Inter', system-ui, sans-serif;
  --p-font-manrope: 'Manrope', system-ui, sans-serif;
  --p-font-work-sans: 'Work Sans', system-ui, sans-serif;
  --p-font-dm-sans: 'DM Sans', system-ui, sans-serif;
  --p-font-raleway: 'Raleway', system-ui, sans-serif;
  --p-font-space: 'Space Grotesk', system-ui, sans-serif;
  --p-font-outfit: 'Outfit', system-ui, sans-serif;

  /* Serif */
  --p-font-fraunces: 'Fraunces', Georgia, serif;
  --p-font-cormorant: 'Cormorant Garamond', Georgia, serif;
  --p-font-playfair: 'Playfair Display', Georgia, serif;
  --p-font-source-serif: 'Source Serif 4', Georgia, serif;

  /* Major Third (1.25) Type Scale with line-heights and letter-spacing */
  /* Body text: 1.5 line-height (WCAG compliant) */
  --p-text-xs: 0.75rem;       /* 12px */
  --p-lh-xs: 1.5;
  --p-ls-xs: 0.02em;          /* Wider for small text */

  --p-text-sm: 0.875rem;      /* 14px */
  --p-lh-sm: 1.5;
  --p-ls-sm: 0.01em;

  --p-text-base: 1rem;        /* 16px - browser default, accessible minimum */
  --p-lh-base: 1.5;
  --p-ls-base: 0;

  --p-text-lg: 1.125rem;      /* 18px */
  --p-lh-lg: 1.5;
  --p-ls-lg: 0;

  /* Subheadings: 1.2-1.3 line-height */
  --p-text-xl: 1.25rem;       /* 20px = 16 × 1.25 */
  --p-lh-xl: 1.35;
  --p-ls-xl: -0.01em;

  --p-text-2xl: 1.5rem;       /* 24px = 20 × 1.25 */
  --p-lh-2xl: 1.3;
  --p-ls-2xl: -0.01em;

  /* Headings: 1.1-1.2 line-height, tighter tracking */
  --p-text-3xl: 1.875rem;     /* 30px = 24 × 1.25 */
  --p-lh-3xl: 1.2;
  --p-ls-3xl: -0.02em;

  --p-text-4xl: 2.25rem;      /* 36px */
  --p-lh-4xl: 1.15;
  --p-ls-4xl: -0.02em;

  --p-text-5xl: 3rem;         /* 48px */
  --p-lh-5xl: 1.1;
  --p-ls-5xl: -0.025em;

  /* Animation durations */
  --p-duration-fast: 0.1s;
  --p-duration-normal: 0.2s;
  --p-duration-slow: 0.35s;

  /* Easing functions */
  --p-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --p-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadow base */
  --p-shadow-color: 0 0% 0%;
  --p-shadow-strength: 0.06;
}