/* ============================================================================
 * InnovaLabWorks Brand System -- CSS tokens
 * Version: 1.0.0  (2026-04-29)
 * Source of truth: BRAND_SYSTEM.md at InnovaLabWorks root
 *
 * This file mirrors the brand system document. When BRAND_SYSTEM.md changes,
 * regenerate this file (and brand-tokens.js + BrandTokens.swift) in lockstep.
 * Do not edit any token here without first updating the document.
 *
 * Drop-in: <link rel="stylesheet" href="/assets/tokens/brand-tokens.css?v=1.0.0">
 *          must come BEFORE style.css so existing custom properties win where
 *          intentionally overridden.
 * ============================================================================ */

:root {
    /* ---------------------------------------------------------------------- */
    /* Colors -- backgrounds (navy spectrum) */
    /* ---------------------------------------------------------------------- */
    --bs-deep-navy:       #06080F;  /* Page bg, full-bleed surfaces */
    --bs-card-navy:       #0F1420;  /* Cards, paywall sheets, modals */
    --bs-surface-navy:    #191F2F;  /* Form fields, raised buttons, hairline borders */
    --bs-bg-secondary:    #080B14;  /* Web alt panel, footer, divider sections */

    /* Marketing backdrop gradient (NEW -- OG / hero only, not iOS UI) */
    --bs-marketing-backdrop: radial-gradient(ellipse at 30% 20%,
        #172650 0%,
        #0A1130 45%,
        #04091A 100%
    );

    /* ---------------------------------------------------------------------- */
    /* Colors -- gold accents */
    /* ---------------------------------------------------------------------- */
    --bs-warm-gold:       #D4AF37;  /* Primary brand accent, CTAs, links */
    --bs-light-gold:      #F0D060;  /* Gradient highlight, glow */
    --bs-muted-gold:      #A68B3C;  /* Pressed CTAs, gradient endpoint */
    --bs-gold-dim:        rgba(212,175,55,0.10);
    --bs-gold-glow:       rgba(212,175,55,0.25);

    /* Gold gradients */
    --bs-gold-shimmer: linear-gradient(90deg,
        #A68B3C, #D4AF37, #F0D060, #D4AF37, #A68B3C);
    --bs-gold-vertical: linear-gradient(180deg,
        #F0D060, #D4AF37);

    /* ---------------------------------------------------------------------- */
    /* Colors -- text */
    /* ---------------------------------------------------------------------- */
    --bs-text-primary:    #F5F5F7;  /* Web off-white (iOS uses pure #FFFFFF) */
    --bs-text-secondary:  rgba(245,245,247,0.65);
    --bs-text-tertiary:   rgba(245,245,247,0.50);

    /* ---------------------------------------------------------------------- */
    /* Colors -- utility / state */
    /* ---------------------------------------------------------------------- */
    --bs-success:         #10b981;  /* Web variant -- iOS uses #4CAF50 */
    --bs-error:           #ef4444;  /* Web variant -- iOS uses #EF5350 */
    --bs-error-bright:    #ff6b6b;
    --bs-warning:         #FFB74D;

    /* ---------------------------------------------------------------------- */
    /* Colors -- borders / dividers */
    /* ---------------------------------------------------------------------- */
    --bs-border:          rgba(255,255,255,0.07);
    --bs-border-gold:     rgba(212,175,55,0.25);

    /* ---------------------------------------------------------------------- */
    /* Typography -- families (with system fallback chain) */
    /* ---------------------------------------------------------------------- */
    --bs-font-family-serif:   "Playfair Display", system-ui, ui-serif, "SF Pro Display", "Times New Roman", serif;
    --bs-font-family-default: "DM Sans", system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --bs-font-family-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* ---------------------------------------------------------------------- */
    /* Typography -- type scale (rem-based, root 16px) */
    /* ---------------------------------------------------------------------- */
    --bs-font-display-large:    1.75rem;     /* 28px */
    --bs-font-display-medium:   1.5rem;      /* 24px */
    --bs-font-headline:         1.375rem;    /* 22px */
    --bs-font-subheadline:      1.0625rem;   /* 17px */
    --bs-font-body:             1rem;        /* 16px */
    --bs-font-body-secondary:   0.875rem;    /* 14px */
    --bs-font-caption:          0.75rem;     /* 12px */
    --bs-font-mono:             0.875rem;    /* 14px */
    --bs-font-mono-small:       0.75rem;     /* 12px */

    /* Weights */
    --bs-weight-regular:  400;
    --bs-weight-medium:   500;
    --bs-weight-semibold: 600;
    --bs-weight-bold:     700;
    --bs-weight-extra:    800;  /* gold-iq suffix uses this */

    /* Line heights */
    --bs-lh-display:  1.15;
    --bs-lh-headline: 1.25;
    --bs-lh-body:     1.5;
    --bs-lh-caption:  1.4;

    /* Letter spacing (display only) */
    --bs-tracking-display: -0.02em;

    /* ---------------------------------------------------------------------- */
    /* Spacing -- 4-pt baseline grid */
    /* ---------------------------------------------------------------------- */
    --bs-space-xxs:  4px;
    --bs-space-xs:   8px;
    --bs-space-sm:   12px;
    --bs-space-md:   16px;
    --bs-space-lg:   24px;
    --bs-space-xl:   32px;
    --bs-space-xxl:  48px;
    --bs-space-xxxl: 64px;

    /* Touch targets */
    --bs-touch-min:    44px;
    --bs-touch-comf:   52px;
    --bs-touch-prim:   56px;

    /* ---------------------------------------------------------------------- */
    /* Corner radii */
    /* ---------------------------------------------------------------------- */
    --bs-radius-xs:   6px;
    --bs-radius-sm:   10px;
    --bs-radius-md:   14px;
    --bs-radius-lg:   20px;
    --bs-radius-xl:   28px;
    --bs-radius-pill: 999px;

    /* ---------------------------------------------------------------------- */
    /* Motion -- easing */
    /* ---------------------------------------------------------------------- */
    --bs-ease-default:  cubic-bezier(0.4, 0.0, 0.2, 1);
    --bs-ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
    --bs-ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1);
    --bs-duration-fast:    150ms;
    --bs-duration-normal:  250ms;
    --bs-duration-slow:    400ms;
}

/* ============================================================================
 * Wordmark -- gold-iq treatment
 * One class per app prefix; .brand-iq is shared and always gold.
 * Override on gold/light backgrounds: dark navy ink for legibility.
 * ============================================================================ */

.bs-brand-curr,
.bs-brand-clav,
.bs-brand-iq,
.bs-brand-lab {
    font-family: var(--bs-font-family-default);
}

.bs-brand-curr { color: var(--bs-text-primary); font-weight: var(--bs-weight-bold); }
.bs-brand-clav { color: var(--bs-text-primary); font-weight: var(--bs-weight-bold); }
.bs-brand-iq   { color: var(--bs-warm-gold);   font-weight: var(--bs-weight-extra); }
.bs-brand-lab  { color: var(--bs-warm-gold);   font-weight: var(--bs-weight-extra); }

/* Contrast inversions on gold/light backgrounds */
.nav-cta .bs-brand-iq,
.btn-primary .bs-brand-iq,
[style*="background:#D4AF37"] .bs-brand-iq,
[style*="background-color:#D4AF37"] .bs-brand-iq { color: var(--bs-deep-navy); font-weight: var(--bs-weight-extra); }

.nav-cta .bs-brand-curr,
.nav-cta .bs-brand-clav,
.btn-primary .bs-brand-curr,
.btn-primary .bs-brand-clav { color: var(--bs-deep-navy); }

/* ============================================================================
 * Components
 * ============================================================================ */

/* Primary button -- gold gradient, navy ink */
.bs-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-gold-vertical);
    color: var(--bs-deep-navy);
    font-family: var(--bs-font-family-default);
    font-size: var(--bs-font-subheadline);
    font-weight: var(--bs-weight-semibold);
    padding: var(--bs-space-sm) var(--bs-space-md);
    border: none;
    border-radius: var(--bs-radius-md);
    cursor: pointer;
    transition: transform var(--bs-duration-fast) var(--bs-ease-default),
                box-shadow var(--bs-duration-fast) var(--bs-ease-default);
}
.bs-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--bs-gold-glow);
}
.bs-btn-primary:active { transform: translateY(0); }
.bs-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.bs-btn-primary--pill { border-radius: var(--bs-radius-pill); padding: var(--bs-space-md) var(--bs-space-lg); }

/* Ghost / secondary button -- transparent, gold border + text */
.bs-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--bs-warm-gold);
    font-family: var(--bs-font-family-default);
    font-size: var(--bs-font-subheadline);
    font-weight: var(--bs-weight-semibold);
    padding: var(--bs-space-sm) var(--bs-space-md);
    border: 1px solid var(--bs-gold-dim);
    border-radius: var(--bs-radius-md);
    cursor: pointer;
    transition: border-color var(--bs-duration-fast) var(--bs-ease-default);
}
.bs-btn-secondary:hover { border-color: var(--bs-border-gold); }

/* Form field */
.bs-field {
    width: 100%;
    background: rgba(255,255,255,0.035);
    color: var(--bs-text-primary);
    font-family: var(--bs-font-family-default);
    font-size: var(--bs-font-body);
    padding: 12px var(--bs-space-md);
    min-height: var(--bs-touch-prim);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    transition: border-color var(--bs-duration-fast) var(--bs-ease-default);
}
.bs-field:focus { outline: none; border-color: var(--bs-warm-gold); box-shadow: 0 0 0 2px var(--bs-gold-dim); }
.bs-field::placeholder { color: var(--bs-text-tertiary); }

/* Card */
.bs-card {
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-lg);
    padding: var(--bs-space-md);
}
.bs-card--lg { padding: var(--bs-space-lg); }
.bs-card--featured { border-color: var(--bs-border-gold); }

/* Empty state */
.bs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--bs-space-xxxl) var(--bs-space-md);
    gap: var(--bs-space-lg);
}
.bs-empty__icon { font-size: 80px; opacity: 0.6; }
.bs-empty__title {
    font-family: var(--bs-font-family-serif);
    font-size: var(--bs-font-display-medium);
    font-weight: var(--bs-weight-bold);
    color: var(--bs-text-primary);
    line-height: var(--bs-lh-display);
    letter-spacing: var(--bs-tracking-display);
}
.bs-empty__desc {
    font-size: var(--bs-font-body-secondary);
    color: var(--bs-text-secondary);
    max-width: 60ch;
    line-height: var(--bs-lh-body);
}

/* OG / social card preview helper (1200x630 aspect when displayed in-page) */
.bs-og-preview {
    aspect-ratio: 1200 / 630;
    background: var(--bs-marketing-backdrop);
    border-radius: var(--bs-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-text-primary);
}

/* ============================================================================
 * Type-scale convenience classes (use sparingly; prefer semantic tags)
 * ============================================================================ */
.bs-text-display-large {
    font-family: var(--bs-font-family-serif);
    font-size: var(--bs-font-display-large);
    font-weight: var(--bs-weight-bold);
    line-height: var(--bs-lh-display);
    letter-spacing: var(--bs-tracking-display);
}
.bs-text-display-medium {
    font-family: var(--bs-font-family-serif);
    font-size: var(--bs-font-display-medium);
    font-weight: var(--bs-weight-bold);
    line-height: var(--bs-lh-display);
    letter-spacing: var(--bs-tracking-display);
}
.bs-text-headline {
    font-family: var(--bs-font-family-default);
    font-size: var(--bs-font-headline);
    font-weight: var(--bs-weight-semibold);
    line-height: var(--bs-lh-headline);
}
.bs-text-body {
    font-family: var(--bs-font-family-default);
    font-size: var(--bs-font-body);
    font-weight: var(--bs-weight-regular);
    line-height: var(--bs-lh-body);
}
.bs-text-caption {
    font-family: var(--bs-font-family-default);
    font-size: var(--bs-font-caption);
    font-weight: var(--bs-weight-medium);
    line-height: var(--bs-lh-caption);
}
.bs-text-mono {
    font-family: var(--bs-font-family-mono);
    font-size: var(--bs-font-mono);
}