/* ============================================================
   EmbedPeople - Design Tokens (base.css)
   ============================================================ */

:root {
    /* ---- Color Palette ---- */
    --navy:           #0d1b3e;
    --navy-dark:      #070e21;
    --navy-mid:       #162d5e;
    --navy-light:     #1e3a7a;
    --navy-tint:      #eef2ff;

    --accent:         #2563eb;
    --accent-hover:   #1d4ed8;
    --accent-light:   #dbeafe;

    --white:          #ffffff;
    --off-white:      #f8fafc;
    --light-gray:     #f1f5f9;

    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --border:         #e2e8f0;

    --green:          #059669;
    --red:            #dc2626;

    /* ---- Typography ---- */
    --font-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* ---- Type Scale ---- */
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;
    --text-hero:  clamp(2.25rem, 5vw, 4rem);

    /* ---- Spacing ---- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ---- Section padding ---- */
    --section-y:   clamp(3.5rem, 8vw, 6rem);

    /* ---- Layout ---- */
    --container:     1200px;
    --container-sm:  760px;
    --container-lg:  1400px;

    /* ---- Borders & Shadows ---- */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    --shadow-sm:  0 1px 3px rgba(15,23,42,.08);
    --shadow:     0 4px 16px rgba(15,23,42,.08);
    --shadow-lg:  0 12px 40px rgba(15,23,42,.12);

    /* ---- Transitions ---- */
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:   cubic-bezier(0, 0, 0.2, 1);
    --duration:   200ms;
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Aliases (used in inline styles across templates) ---- */
    --color-primary:   var(--navy);
    --color-text:      var(--text-primary);
    --color-text-sec:  var(--text-secondary);
    --cyan:            #0EA5E9;
    --cyan-dark:       #0284C7;
    --teal:            #14B8A6;
    --success:         var(--green);
    --header-height:   68px;

    /* Neutral scale */
    --neutral-50:    #f8fafc;
    --neutral-100:   #f1f5f9;
    --neutral-200:   #e2e8f0;
    --neutral-600:   #475569;
    --neutral-700:   #334155;

    /* Type aliases */
    --text-body:     var(--text-base);
    --text-caption:  var(--text-xs);
    --text-small:    var(--text-sm);
    --text-h2:       clamp(1.75rem, 3.5vw, 2.5rem);
    --text-h3:       var(--text-2xl);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-primary);
}

p {
    margin: 0;
}

/* ============================================================
   Container
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* ============================================================
   Accessibility
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
   Skip link
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: var(--navy);
    color: white;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    z-index: 9999;
}
.skip-link:focus { top: 0; }