/**
 * PALEOPHILATELIE DESIGN SYSTEM
 * Museum Editorial Design — Black/White/Golden Ochre
 *
 * Single source of truth for ALL design tokens.
 * Both --color-* (structural) and --hp-* (editorial) tokens live here.
 */

:root {
    /* ===== MUSEUM EDITORIAL PALETTE (hp-*) ===== */
    /* Used across all page types — must be defined globally */
    --hp-black: #0a0a0a;
    --hp-black-soft: #1a1a1a;
    --hp-white: #ffffff;
    --hp-cream: #faf9f7;
    --hp-warm-white: #f7f6f3;
    --hp-gray-light: #f0efec;
    --hp-gray: #e5e4e1;
    --hp-gray-medium: #9a9a9a;
    --hp-gray-dark: #5a5a5a;

    /* Golden Ochre Accent */
    --hp-yellow: #d4a72c;
    --hp-yellow-light: #e8c45a;
    --hp-yellow-dark: #b8922a;
    --hp-yellow-glow: rgba(212, 167, 44, 0.15);

    /* Text */
    --hp-text: #2a2a2a;
    --hp-text-light: #4a4a4a;

    /* ===== EDITORIAL TYPOGRAPHY ===== */
    --font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Reading Rhythm */
    --reading-width: 72ch;
    --line-height-body: 1.75;
    --line-height-heading: 1.2;

    /* Section Spacing */
    --section-padding: clamp(1rem, 4vw, 2rem);
    --content-gap: clamp(1.5rem, 4vw, 2.5rem);

    /* ===== PRIMARY COLORS - Pure Black ===== */
    --color-primary: #000000;
    --color-primary-dark: #000000;
    --color-primary-light: #1a1a1a;
    /* added by mkogan */
    --color-primary-email: #ffd666;

    /* ===== SECONDARY COLORS - Dark Gray ===== */
    --color-secondary: #212529;
    --color-secondary-light: #343a40;
    --color-secondary-dark: #0d0d0d;

    /* ===== ACCENT COLORS - Golden Yellow ===== */
    --color-accent: #f4c542;
    --color-accent-dark: #d4a72c;
    --color-accent-light: #ffd666;
    --color-accent-hover: #d4a72c;

    /* ===== BACKGROUND COLORS - Clean White ===== */
    --color-background: #ffffff;
    --color-bg-secondary: #f8f8f8;
    --color-bg-tertiary: #f0f0f0;
    --color-background-alt: #f5f5f5;

    /* ===== HEADER COLORS - Black Top Bar ===== */
    --color-header-bg: #000000;
    --color-header-bg-solid: #000000;

    /* ===== NAVIGATION BAR - White with Black Text ===== */
    --color-nav-bg: #ffffff;
    --color-navbar-bg: #ffffff;
    --color-nav-text: #212529;
    --color-nav-hover: #000000;

    /* ===== FOOTER COLORS - Pure Black ===== */
    --color-footer-bg: #000000;
    --color-footer-text: #a3a3a3;
    --color-footer-heading: #f4c542;

    /* ===== DARK SURFACE COLORS ===== */
    --color-dark-surface: #292524;
    --color-dark-border: #44403c;

    /* ===== NEUTRAL COLORS ===== */
    --color-white: #FFFFFF;
    --color-off-white: #fdfcfb;
    --color-gray-100: #f5f5f4;
    --color-gray-200: #e7e5e4;
    --color-gray-300: #d6d3d1;
    --color-gray-400: #a8a29e;
    --color-gray-500: #78716c;
    --color-gray-600: #57534e;
    --color-gray-700: #44403c;
    --color-gray-800: #292524;
    --color-gray-900: #1c1917;
    --color-black: #0c0a09;

    /* ===== SEMANTIC TEXT COLORS ===== */
    --color-text-primary: #1c1917;
    --color-text-secondary: #57534e;
    --color-text-muted: #78716c;
    --color-text-inverse: var(--color-white);
    --color-text-on-dark: #e7e5e4;
    --color-text-on-dark-muted: #a8a29e;

    /* ===== SURFACE COLORS ===== */
    --color-surface: var(--color-white);
    --color-border: #e7e5e4;

    /* ===== LINK COLORS ===== */
    --color-link: #000000;
    --color-link-hover: #f4c542;

    /* ===== SEMANTIC STATUS COLORS ===== */
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;

    /* ===== TYPOGRAPHY - Editorial Magazine Style ===== */
    --font-family-base: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-family-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3rem;      /* 48px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

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

    /* ===== BORDERS - Sharp Editorial with Subtle Roundness ===== */
    --border-radius-none: 0;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 10px;
    --border-radius-full: 9999px;

    /* Card corners - subtle roundness */
    --card-radius: 6px;
    --card-radius-sm: 4px;
    --card-radius-lg: 8px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
    --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07), 0 2px 4px rgba(28, 25, 23, 0.06);
    --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1), 0 4px 6px rgba(28, 25, 23, 0.05);
    --shadow-xl: 0 20px 25px rgba(28, 25, 23, 0.1), 0 8px 10px rgba(28, 25, 23, 0.04);

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* ===== LAYOUT ===== */
    --container-max-width: 1000px;
    --header-height: 72px;
    --header-height-scrolled: 64px;

    /* ===== Z-INDEX ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* ===== DESIGN TOKENS ===== */
    /* Category label styling */
    --category-label-bg: var(--color-primary);
    --category-label-color: var(--color-white);
    --category-label-font-size: 0.6875rem;
    --category-label-padding: 0.25rem 0.625rem;
    --category-label-letter-spacing: 0.08em;

    /* Accent borders */
    --accent-border-width: 3px;
    --accent-border-top: var(--accent-border-width) solid var(--color-primary);

    /* Image overlay gradient */
    --overlay-gradient: linear-gradient(
        to top,
        rgba(28, 25, 23, 0.9) 0%,
        rgba(28, 25, 23, 0.5) 40%,
        rgba(28, 25, 23, 0) 100%
    );

    /* Dark section styling */
    --dark-section-bg: var(--color-gray-900);
    --dark-section-text: var(--color-text-on-dark);

    /* Browse card gradients */
    --gradient-country: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    --gradient-year: linear-gradient(135deg, #f4c542 0%, #d4a72c 100%);
    --gradient-topic: linear-gradient(135deg, #212529 0%, #000000 100%);
}