/* ═══════════════════════════════════════════════════════════
   Plan2Permit — Design System
   Aesthetic: Clean institutional authority meets modern clarity.
   Palette: Deep navy anchors, warm amber accents, cool neutrals.
   Typography: Fraunces (display) + DM Sans (body).
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ─────────────────────────────────── */
    --navy-950: #0a1628;
    --navy-900: #0f2140;
    --navy-800: #152d54;
    --navy-700: #1c3d6e;
    --navy-600: #2a5298;
    --navy-500: #3668b5;
    --navy-400: #5a8ad4;
    --navy-300: #8db0e6;
    --navy-200: #b8d0f2;
    --navy-100: #dce8f8;
    --navy-50:  #eef3fc;

    --amber-600: #b5760a;
    --amber-500: #d4920f;
    --amber-400: #e8a817;
    --amber-300: #f4c24e;
    --amber-200: #f9da8a;
    --amber-100: #fcedc4;
    --amber-50:  #fef8ec;

    --sage-700: #37543e;
    --sage-600: #48694f;
    --sage-500: #5a8063;
    --sage-400: #7da486;
    --sage-300: #a4c4ab;
    --sage-200: #caddce;
    --sage-100: #e6f0e8;
    --sage-50:  #f3f8f4;

    --red-600: #b91c1c;
    --red-500: #dc2626;
    --red-100: #fee2e2;

    /* ── Neutrals ─────────────────────────────────────── */
    --gray-950: #111318;
    --gray-900: #1a1d25;
    --gray-800: #2a2e38;
    --gray-700: #3d4250;
    --gray-600: #545a6b;
    --gray-500: #6e7588;
    --gray-400: #919ab0;
    --gray-300: #b4bbd0;
    --gray-200: #d4d9e6;
    --gray-100: #eceef4;
    --gray-50:  #f6f7fa;
    --white:    #ffffff;

    /* ── Semantic Tokens ──────────────────────────────── */
    --color-bg:         var(--white);
    --color-bg-subtle:  var(--gray-50);
    --color-bg-muted:   var(--gray-100);
    --color-bg-dark:    var(--navy-950);
    --color-bg-dark-2:  var(--navy-900);

    --color-text:       var(--gray-900);
    --color-text-muted: var(--gray-600);
    --color-text-light: var(--gray-400);
    --color-text-on-dark: var(--gray-200);
    --color-text-on-dark-muted: var(--gray-400);

    --color-primary:    var(--navy-700);
    --color-primary-hover: var(--navy-800);
    --color-accent:     var(--sage-500);
    --color-accent-hover: var(--sage-600);
    --color-success:    var(--sage-600);

    --color-border:     var(--gray-200);
    --color-border-light: var(--gray-100);

    /* ── Typography ───────────────────────────────────── */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --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-6xl:  3.75rem;

    /* ── Spacing ──────────────────────────────────────── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ── Layout ───────────────────────────────────────── */
    --max-width:  1200px;
    --nav-height: 72px;

    /* ── Radius ───────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────── */
    --shadow-sm:  0 1px 2px rgba(15, 33, 64, 0.06);
    --shadow-md:  0 4px 12px rgba(15, 33, 64, 0.08);
    --shadow-lg:  0 8px 30px rgba(15, 33, 64, 0.10);
    --shadow-xl:  0 16px 50px rgba(15, 33, 64, 0.12);

    /* ── Transitions ─────────────────────────────────── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --duration:   0.3s;
}


/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }


/* ═══════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════ */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.section { padding: var(--space-4xl) 0; }
.section--dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}
.section--subtle { background: var(--color-bg-subtle); }
.section--muted  { background: var(--color-bg-muted); }


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

.heading-display {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.heading-section {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-3xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.text-body-lg {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.text-overline {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.text-overline--light {
    color: var(--sage-300);
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration) var(--ease-out);
    white-space: nowrap;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--white);
}
.btn--primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--accent {
    background: var(--color-accent);
    color: var(--navy-950);
}
.btn--accent:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn--outline {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.btn--outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    padding: 0.5rem 1rem;
}
.btn--ghost:hover { background: var(--navy-50); }

.btn--lg {
    padding: 1rem 2.25rem;
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
}


/* ═══════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
    outline: none;
}

.form-input:focus {
    border-color: var(--navy-400);
    box-shadow: 0 0 0 3px rgba(42, 82, 152, 0.12);
}

.form-input::placeholder {
    color: var(--color-text-light);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-error {
    font-size: var(--text-sm);
    color: var(--red-600);
}


/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */

.card {
    background: var(--white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    transition: transform var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card--dark {
    background: var(--color-bg-dark-2);
    border-color: rgba(255, 255, 255, 0.06);
}

.card--flat {
    border: none;
    background: var(--color-bg-subtle);
}
.card--flat:hover {
    transform: none;
    box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════
   ALERTS / MESSAGES
   ═══════════════════════════════════════════════════════════ */

.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
}

.alert--success {
    background: var(--sage-50);
    color: var(--sage-700);
    border: 1px solid var(--sage-200);
}

.alert--error {
    background: var(--red-100);
    color: var(--red-600);
    border: 1px solid rgba(185, 28, 28, 0.15);
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-6xl: 2.75rem;
        --text-4xl: 1.875rem;
        --text-3xl: 1.5rem;
        --space-4xl: 4rem;
    }
    .container { padding: 0 var(--space-lg); }
}

@media (max-width: 480px) {
    :root {
        --text-5xl: 1.875rem;
        --text-6xl: 2.25rem;
        --space-4xl: 3rem;
    }
    .container { padding: 0 var(--space-md); }
}