/* Design tokens — sweetandglory.com visual language.
   Pink + Source Sans Pro + light theme. Mobile-first.
   Any colour or size not here should be an exception that's written inline. */

:root {
    /* Brand */
    --color-primary:        #EF5190;
    --color-primary-hover:  #d93a79;
    --color-primary-dark:   #b02a60;
    --color-primary-tint:   #fde5ee;

    /* Neutrals */
    --color-text:           #1a1a1a;
    --color-text-muted:     #6b6b6b;
    --color-border:         #e2e2e2;
    --color-border-strong:  #8d8d8d;
    --color-bg:             #ffffff;
    --color-bg-alt:         #fafafa;
    --color-bg-dark:        #141414;
    --color-success:        #28a745;
    --color-danger:         #d9534f;

    /* Type — Source Sans Pro (loaded from Google Fonts in base.css). */
    --font-family:          'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-size-base:       16px;
    --font-size-sm:         14px;
    --font-size-xs:         12px;
    --font-size-lg:         18px;
    --font-size-h3:         20px;
    --font-size-h2:         24px;
    --font-size-h1:         32px;
    --font-size-hero:       40px;
    --line-height:          1.5;
    --font-weight-body:     400;
    --font-weight-medium:   600;
    --font-weight-bold:     700;

    /* Spacing (8-pt scale) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* Radius + shadow */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 3px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    /* Layout */
    --container-max: 1240px;
    --nav-height:    64px;
    --nav-height-mobile: 56px;

    /* Breakpoints (for JS only — CSS uses media queries directly) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1200px;
}