/* =============================================================================
   design-system.css — Apple-inspired design language (see DESIGN.md)

   Single source of truth for the VibeMapping / integrAIt visual language.
   Loaded AFTER Bootstrap in base.html so the overrides below win the cascade.

   Principles (from DESIGN.md):
   - One interactive accent: Action Blue (#0066cc). No second accent color.
   - SF Pro on Apple devices, Inter elsewhere; negative tracking at display sizes.
   - Surfaces: pure white / parchment / near-black. Color change IS the divider.
   - Exactly ONE drop-shadow, reserved for product imagery — never cards/buttons.
   - States: default + active (scale 0.95) only. No decorative hover.
   ============================================================================= */

:root {
    /* --- Brand & accent --- */
    --ds-primary: #0066cc;
    --ds-primary-focus: #0071e3;
    --ds-primary-on-dark: #2997ff;

    /* --- Text --- */
    --ds-ink: #1d1d1f;
    --ds-body: #1d1d1f;
    --ds-body-on-dark: #ffffff;
    --ds-body-muted: #cccccc;
    --ds-ink-muted-80: #333333;
    --ds-ink-muted-48: #7a7a7a;

    /* --- Surfaces --- */
    --ds-canvas: #ffffff;
    --ds-parchment: #f5f5f7;
    --ds-pearl: #fafafc;
    --ds-tile-1: #272729;
    --ds-tile-2: #2a2a2c;
    --ds-tile-3: #252527;
    --ds-black: #000000;
    --ds-chip-translucent: rgba(210, 210, 215, 0.64);

    /* --- Hairlines & borders --- */
    --ds-divider-soft: #f0f0f0;
    --ds-hairline: #e0e0e0;

    /* --- Radius scale --- */
    --ds-r-none: 0px;
    --ds-r-xs: 5px;
    --ds-r-sm: 8px;
    --ds-r-md: 11px;
    --ds-r-lg: 18px;
    --ds-r-pill: 9999px;
    --ds-r-btn: 10px;      /* buttons: medium-rounded, B2B-polished (not pill) */

    /* --- Neutral secondary button --- */
    --ds-btn-secondary-border: #c7c7cc;   /* mid gray hairline */
    --ds-btn-secondary-text:   #424245;   /* readable gray ink */
    --ds-btn-secondary-hover-border: #8e8e93;
    --ds-btn-secondary-hover-bg:     #f5f5f7;

    /* --- Spacing scale --- */
    --ds-s-xxs: 4px;
    --ds-s-xs: 8px;
    --ds-s-sm: 12px;
    --ds-s-md: 17px;
    --ds-s-lg: 24px;
    --ds-s-xl: 32px;
    --ds-s-xxl: 48px;
    --ds-s-section: 80px;

    /* --- Type sizes --- */
    --ds-fs-hero: 56px;
    --ds-fs-display-lg: 40px;
    --ds-fs-display-md: 34px;
    --ds-fs-lead: 28px;
    --ds-fs-lead-airy: 24px;
    --ds-fs-tagline: 21px;
    --ds-fs-body: 17px;
    --ds-fs-caption: 14px;
    --ds-fs-fine: 12px;

    /* --- Font stacks --- */
    --ds-font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ds-font-text: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* --- The single drop-shadow: product imagery only --- */
    --ds-shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

    /* --- Frosted-glass backdrop (sub-nav, sticky bars) --- */
    --ds-frost: saturate(180%) blur(20px);
}

/* =============================================================================
   Base typography
   ============================================================================= */

body {
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-body);
    font-weight: 400;
    line-height: 1.44; /* Inter-adjusted from 1.47 per DESIGN.md note */
    letter-spacing: -0.01em;
    color: var(--ds-ink);
    font-feature-settings: 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ds-hero, .ds-display-lg, .ds-display-md {
    font-family: var(--ds-font-display);
    font-weight: 600;
    color: var(--ds-ink);
    letter-spacing: -0.02em;
}

/* Display type utilities */
.ds-hero {
    font-size: var(--ds-fs-hero);
    line-height: 1.07;
    letter-spacing: -0.03em;
}
.ds-display-lg {
    font-size: var(--ds-fs-display-lg);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.ds-display-md {
    font-size: var(--ds-fs-display-md);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.ds-tagline {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-tagline);
    font-weight: 600;
    line-height: 1.19;
}
.ds-lead {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-lead);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0;
    color: var(--ds-ink-muted-80);
}
.ds-lead-airy {
    font-size: var(--ds-fs-lead-airy);
    font-weight: 300;
    line-height: 1.5;
}
.ds-caption {
    font-size: var(--ds-fs-caption);
    line-height: 1.43;
}
.ds-fine-print {
    font-size: var(--ds-fs-fine);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Single-accent text colors */
.ds-text-accent { color: var(--ds-primary) !important; }
.ds-text-accent-on-dark { color: var(--ds-primary-on-dark) !important; }
.ds-text-muted { color: var(--ds-ink-muted-48) !important; }

/* Legal documents (Terms, Privacy) — denser, smaller type than the marketing
   pages, for comfortable long-form reading. Scoped to .legal-page so the global
   type scale used elsewhere is untouched. */
.legal-page .ds-hero { font-size: 34px; }
.legal-page .ds-lead { font-size: 17px; line-height: 1.5; }
.legal-page .ds-text-muted { font-size: 13px; }
.legal-page h2.h4 { font-size: 18px; }
.legal-page p,
.legal-page li { font-size: 15px; line-height: 1.55; }
.legal-page .ds-btn-pill-ghost { font-size: 14px; }

/* =============================================================================
   Bootstrap overrides — token-level theming reaches every page (incl. workspace)
   Remap Bootstrap "primary" onto Action Blue so existing markup picks up the
   new language without per-page edits.
   ============================================================================= */

/* Every button shares one medium-rounded corner (10px) — no pills. */
.btn,
.btn-sm,
.btn-lg {
    border-radius: var(--ds-r-btn);
}

/* Primary CTA — blue fill, white text */
.btn-primary {
    background-color: var(--ds-primary);
    border: none;
    color: var(--ds-body-on-dark);
    border-radius: var(--ds-r-btn);
    padding: 11px 22px;
    font-family: var(--ds-font-text);
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: transform 0.1s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ds-primary);
    color: var(--ds-body-on-dark);
}
.btn-primary:focus,
.btn-primary:focus-visible {
    outline: 2px solid var(--ds-primary-focus);
    outline-offset: 2px;
    box-shadow: none;
}
.btn-primary:active {
    background-color: var(--ds-primary) !important;
    transform: scale(0.95);
}

/* Emphasized outline (blue) — second-tier CTA / provider buttons */
.btn-outline-primary,
.btn-outline-dark {
    background-color: transparent;
    color: var(--ds-primary);
    border: 1px solid var(--ds-primary);
    border-radius: var(--ds-r-btn);
    padding: 11px 22px;
    font-family: var(--ds-font-text);
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: transform 0.1s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: transparent;
    color: var(--ds-primary);
    border-color: var(--ds-primary);
}
.btn-outline-primary:active,
.btn-outline-dark:active {
    transform: scale(0.95);
    background-color: transparent !important;
    color: var(--ds-primary) !important;
}

/* Secondary — white fill, gray border, gray text. The neutral companion to the
   blue primary; used for low-emphasis actions (Copy, Cancel, secondary tools). */
.btn-outline-secondary {
    background-color: var(--ds-canvas);
    color: var(--ds-btn-secondary-text);
    border: 1px solid var(--ds-btn-secondary-border);
    border-radius: var(--ds-r-btn);
    font-family: var(--ds-font-text);
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: transform 0.1s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--ds-btn-secondary-hover-bg);
    color: var(--ds-btn-secondary-text);
    border-color: var(--ds-btn-secondary-hover-border);
}
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    outline: 2px solid var(--ds-primary-focus);
    outline-offset: 2px;
    box-shadow: none;
}
.btn-outline-secondary:active {
    transform: scale(0.95);
    background-color: var(--ds-btn-secondary-hover-bg) !important;
    color: var(--ds-btn-secondary-text) !important;
}

/* Dark utility button (nav actions, email sign-in submit) */
.btn-dark {
    background-color: var(--ds-ink);
    border: none;
    color: var(--ds-body-on-dark);
    border-radius: var(--ds-r-sm);
    padding: 8px 15px;
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-caption);
    letter-spacing: -0.01em;
    transition: transform 0.1s ease;
}
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--ds-ink);
    color: var(--ds-body-on-dark);
}
.btn-dark:active {
    transform: scale(0.95);
    background-color: var(--ds-ink) !important;
}

/* Light button on dark surfaces */
.btn-light {
    border-radius: var(--ds-r-btn);
    border: none;
    transition: transform 0.1s ease;
}
.btn-light:active { transform: scale(0.95); }

/* Cards: hairline + lg radius, no decorative shadow */
.card {
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-lg);
    box-shadow: none !important;
}
.card .card-header {
    border-bottom: 1px solid var(--ds-hairline);
    background-color: var(--ds-parchment);
}
/* Neutralize Bootstrap elevation utilities on these surfaces */
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* Form controls: hairline, soft radius, accent focus ring */
.form-control {
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-sm);
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-body);
    color: var(--ds-ink);
    padding: 10px 14px;
}
.form-control:focus {
    border-color: var(--ds-primary-focus);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.25);
}

/* Accent-colored chrome */
.text-primary { color: var(--ds-primary) !important; }
.badge.bg-primary,
.bg-primary { background-color: var(--ds-primary) !important; }
a { color: var(--ds-primary); }

/* Pill helper for any element that should read as an action */
.rounded-pill { border-radius: var(--ds-r-pill) !important; }

/* =============================================================================
   Global navigation — thin true-black bar
   ============================================================================= */

.navbar.ds-global-nav,
.navbar.navbar-dark.bg-primary {
    background-color: var(--ds-black) !important;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}
.ds-global-nav .navbar-brand,
.navbar-dark.bg-primary .navbar-brand {
    font-family: var(--ds-font-display);
    font-weight: 600;
    font-size: var(--ds-fs-tagline);
    letter-spacing: -0.02em;
    color: var(--ds-body-on-dark);
}
.ds-global-nav .nav-link,
.navbar-dark.bg-primary .nav-link {
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-caption);
    letter-spacing: -0.01em;
    color: var(--ds-body-on-dark);
}
/* Dropdown trigger reads as a dark-utility button */
.ds-global-nav .btn-outline-light,
.navbar-dark.bg-primary .btn-outline-light {
    border-radius: var(--ds-r-sm);
    border-color: rgba(255, 255, 255, 0.4);
    font-size: var(--ds-fs-caption);
    padding: 6px 14px;
}

/* =============================================================================
   Sub-nav (frosted) — optional surface-specific strip
   ============================================================================= */

.ds-sub-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 52px;
    background-color: rgba(245, 245, 247, 0.8);
    backdrop-filter: var(--ds-frost);
    -webkit-backdrop-filter: var(--ds-frost);
    border-bottom: 1px solid var(--ds-hairline);
    display: flex;
    align-items: center;
}

/* =============================================================================
   Full-bleed product tiles — color change is the divider, no radius, no gap
   ============================================================================= */

.ds-tile {
    padding-top: var(--ds-s-section);
    padding-bottom: var(--ds-s-section);
    border-radius: var(--ds-r-none);
    border: none;
}
.ds-tile--light {
    background-color: var(--ds-canvas);
    color: var(--ds-ink);
}
.ds-tile--parchment {
    background-color: var(--ds-parchment);
    color: var(--ds-ink);
}
.ds-tile--dark {
    background-color: var(--ds-tile-1);
    color: var(--ds-body-on-dark);
}
.ds-tile--dark-2 { background-color: var(--ds-tile-2); color: var(--ds-body-on-dark); }
.ds-tile--dark-3 { background-color: var(--ds-tile-3); color: var(--ds-body-on-dark); }

/* On dark tiles, headings/links flip color */
.ds-tile--dark h1, .ds-tile--dark h2, .ds-tile--dark h3,
.ds-tile--dark h4, .ds-tile--dark h5, .ds-tile--dark h6,
.ds-tile--dark .ds-hero, .ds-tile--dark .ds-display-lg, .ds-tile--dark .ds-display-md,
.ds-tile--dark-2 h2, .ds-tile--dark-3 h2 {
    color: var(--ds-body-on-dark);
}
.ds-tile--dark .ds-lead { color: var(--ds-body-muted); }
.ds-tile--dark a:not(.btn) { color: var(--ds-primary-on-dark); }
.ds-tile--dark .text-muted { color: var(--ds-body-muted) !important; }

/* =============================================================================
   Pill buttons (explicit DS classes for redesigned pages)
   ============================================================================= */

.ds-btn-pill {
    display: inline-block;
    background-color: var(--ds-primary);
    color: var(--ds-body-on-dark);
    border: none;
    border-radius: var(--ds-r-pill);
    padding: 12px 24px;
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-body);
    text-decoration: none;
    transition: transform 0.1s ease;
}
.ds-btn-pill:hover, .ds-btn-pill:focus { color: var(--ds-body-on-dark); }
.ds-btn-pill:active { transform: scale(0.95); }

.ds-btn-pill-ghost {
    display: inline-block;
    background-color: transparent;
    color: var(--ds-primary);
    border: 1px solid var(--ds-primary);
    border-radius: var(--ds-r-pill);
    padding: 12px 24px;
    font-family: var(--ds-font-text);
    font-size: var(--ds-fs-body);
    text-decoration: none;
    transition: transform 0.1s ease;
}
.ds-btn-pill-ghost:active { transform: scale(0.95); }
.ds-tile--dark .ds-btn-pill-ghost {
    color: var(--ds-primary-on-dark);
    border-color: var(--ds-primary-on-dark);
}

/* =============================================================================
   Cards & containers
   ============================================================================= */

/* Utility card: white, hairline, lg radius, no shadow */
.ds-utility-card {
    background-color: var(--ds-canvas);
    border: 1px solid var(--ds-hairline);
    border-radius: var(--ds-r-lg);
    padding: var(--ds-s-lg);
    color: var(--ds-ink);
    height: 100%;
}
.ds-tile--dark .ds-utility-card,
.ds-tile--dark-2 .ds-utility-card {
    background-color: var(--ds-tile-2);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ds-body-on-dark);
}

/* The single product shadow — apply only to product imagery resting on a surface */
.ds-product-shadow {
    box-shadow: var(--ds-shadow-product) !important;
    border-radius: var(--ds-r-lg);
}

/* Single-accent icon treatment (replaces multi-color icon circles) */
.ds-icon-accent {
    color: var(--ds-primary);
}
.ds-tile--dark .ds-icon-accent { color: var(--ds-primary-on-dark); }

/* =============================================================================
   Footer — parchment, dense link leading
   ============================================================================= */

footer.ds-footer,
.footer {
    background-color: var(--ds-parchment);
    color: var(--ds-ink-muted-80);
    border-top: none;
    margin-top: 0;
    padding: 64px 0;
}
.footer small,
.ds-footer small {
    color: var(--ds-ink-muted-48);
    font-size: var(--ds-fs-fine);
}

/* =============================================================================
   Responsive type — collapse hero/display per DESIGN.md breakpoints
   ============================================================================= */

@media (max-width: 1068px) {
    .ds-hero { font-size: var(--ds-fs-display-lg); }
}
@media (max-width: 640px) {
    .ds-hero { font-size: var(--ds-fs-display-md); }
    .ds-display-lg { font-size: 28px; }
    .ds-lead { font-size: var(--ds-fs-tagline); }
    .ds-tile { padding-top: var(--ds-s-xxl); padding-bottom: var(--ds-s-xxl); }
}
@media (max-width: 419px) {
    .ds-hero { font-size: 28px; }
}