/*
 * variables.css
 * Design System — CSS Custom Properties (Design Tokens)
 *
 * All visual decisions are centralised here.
 * Never hard-code values in component styles — always reference a token.
 *
 * Sections:
 *   1. Colors
 *   2. Typography
 *   3. Spacing
 *   4. Border Radius
 *   5. Shadows
 *   6. Transitions
 *   7. Layout
 */

:root {

  /* ==========================================================================
     1. COLORS
     Primary: #A8327D — magenta pink from the logo.
     Use SPARINGLY as an accent; do not flood the UI with it.
  ========================================================================== */

  /* Brand / Primary — magenta pink */
  --color-primary:       #A8327D;
  --color-primary-dark:  #8B2768;
  --color-primary-light: #D14FA0;

  /* Secondary — medium gray from the logo */
  --color-secondary: #7F7F7F;

  /* Text */
  --color-text:       #1A1A1A; /* Almost black — main body text */
  --color-text-muted: #6B6B6B; /* Subdued labels, captions, placeholders */

  /* Backgrounds */
  --color-background:      #FFFFFF; /* Page background */
  --color-background-soft: #F7F7F7; /* Subtle off-white for alternating sections */

  /* Short aliases used in components */
  --color-bg:     var(--color-background);
  --color-bg-alt: var(--color-background-soft);

  /* Borders */
  --color-border: #E5E5E5; /* Dividers, card outlines */

  /* ==========================================================================
     2. TYPOGRAPHY
     Font family: Inter (loaded from Google Fonts in index.html)
     Weights available: 300, 400, 500, 600, 700, 800
  ========================================================================== */

  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  /* Modular type scale (fluid-friendly, based on a 16px root) */
  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-lg:   1.125rem;  /*  18px */
  --fs-xl:   1.25rem;   /*  20px */
  --fs-2xl:  1.5rem;    /*  24px */
  --fs-3xl:  1.875rem;  /*  30px */
  --fs-4xl:  2.25rem;   /*  36px */
  --fs-5xl:  3rem;      /*  48px */

  /* Line heights */
  --lh-tight:   1.2;  /* Headings */
  --lh-base:    1.5;  /* Body text */
  --lh-relaxed: 1.75; /* Long-form reading */

  /* Font weights */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ==========================================================================
     3. SPACING
     Base unit: 8px (0.5rem)
     Scale follows a multiplier pattern: 1, 2, 3, 4, 6, 8, 12, 16, 24, 32
  ========================================================================== */

  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ==========================================================================
     4. BORDER RADIUS
     From subtle (6px) to very rounded (28px).
  ========================================================================== */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ==========================================================================
     5. SHADOWS
     Subtle, modern drop shadows using neutral dark tones.
     Avoid overly dark or coloured shadows.
  ========================================================================== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
               0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
               0 4px 6px -2px rgba(0, 0, 0, 0.04);

  /* ==========================================================================
     6. TRANSITIONS
     Consistent motion speeds across interactive elements.
  ========================================================================== */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ==========================================================================
     7. LAYOUT
  ========================================================================== */

  --container-max: 1280px; /* Maximum content width */

  /* Breakpoints — used in media queries in component files */
  /* --bp-sm:  640px  (small screens / landscape phones)  */
  /* --bp-md:  768px  (medium screens / tablets)          */
  /* --bp-lg:  1024px (large screens / small desktops)    */
  /* --bp-xl:  1280px (extra large / full desktops)       */

}