/* =======================================
   JoeYam Theme — Base Styles
   ======================================= */

/* -----------------------------------------------------------------------
   Design Tokens — "Revenue" Palette (joeyam.com design system)
----------------------------------------------------------------------- */
:root {
    /* Colour palette */
    --color-primary:      #1A2B49;   /* Deep Navy   — headers, footers, dark sections */
    --color-accent:       #3B82F6;   /* Accent Blue — buttons, links, active states   */
    --color-bg-light:     #F9FAFB;   /* Light Gray  — section bg, cards, borders      */
    --color-text-main:    #111827;   /* Text Primary */
    --color-text-muted:   #4B5563;   /* Text Secondary */
    --color-border:       #E5E7EB;   /* Border      */
    --color-white:        #FFFFFF;

    /* Legacy aliases (kept for backward compat with other page CSS) */
    --jy-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --jy-navy:         #1A2B49;
    --jy-navy-dark:    #111d30;
    --jy-teal:         #3B82F6;
    --jy-teal-hover:   #2563EB;
    --jy-text:         #111827;
    --jy-text-secondary: #4B5563;
    --jy-text-muted:   #6B7280;
    --jy-bg:           #F9FAFB;
    --jy-border:       #E5E7EB;
    --jy-radius:       8px;

    /* Typography */
    --font-main: 'Inter', sans-serif;

    /* Spacing */
    --spacing-section: 80px;
    --radius-std: 8px;
}

/* -----------------------------------------------------------------------
   Base Reset & Body
----------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    font-size: 1rem;          /* 16px */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--color-text-main);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------
   Typography Scale
----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--color-text-main);
    margin-top: 0;
}

h1 {
    font-size: 3.5rem;     /* 56px */
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2 {
    font-size: 2.25rem;    /* 36px */
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.5rem;     /* 24px */
    line-height: 1.3;
    font-weight: 600;
}

h4, h5, h6 {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
}

p {
    margin-top: 0;
    line-height: 1.6;
}

/* Body Large utility */
.text-lg {
    font-size: 1.125rem;   /* 18px */
    line-height: 1.6;
}

/* Caption / metadata utility */
.text-sm {
    font-size: 0.875rem;   /* 14px */
    line-height: 1.4;
    font-weight: 500;
}

/* -----------------------------------------------------------------------
   Layout
----------------------------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
}