/* ─────────────────────────────────────────────────────────────
   Waypoint OS — Design Tokens
   Shared foundation for the premium visual language.

   Pillars:
   (1) One accent (gold) + neutrals. Color only for state.
   (2) Glass in layers — translucency + hairline borders + blur.
   (3) One display face, one UI face, tabular-nums for numbers.
   (4) Motion is nearly invisible — 150ms, subtle.
   (5) No emoji in chrome. Typographic marks only.
   ───────────────────────────────────────────────────────────── */

:root {
    /* ── PALETTE ─────────────────────────────────────────────── */
    /* Canvas — lighter, airier than v1. Closer to Linear / Superhuman. */
    --wp-navy-900: #10192c;          /* deepest — used sparingly */
    --wp-navy-800: #17233b;          /* dark — top-nav, card bases */
    --wp-navy-700: #1f2e4c;          /* mid — subtle panels */
    --wp-navy-600: #2a3c5f;          /* raised panels */
    --wp-navy-500: #3b4f76;          /* elevated on raised */

    /* Ink on dark — warmer, slightly elevated opacities for breathability */
    --wp-ink-100: #f5f8ff;           /* primary text on dark (warmer than pure white) */
    --wp-ink-80:  rgba(245,248,255,0.78);
    --wp-ink-60:  rgba(245,248,255,0.58);
    --wp-ink-40:  rgba(245,248,255,0.40);
    --wp-ink-20:  rgba(245,248,255,0.20);

    /* Steel — cool secondary accent. The everyday interactive color,
       replaces gold for routine UI elements (marks, chevrons, eyebrows). */
    --wp-steel:      #8aa4d6;
    --wp-steel-lt:   #b4c5ea;
    --wp-steel-soft: rgba(138,164,214,0.12);
    --wp-steel-edge: rgba(138,164,214,0.28);

    /* Ink on light */
    --wp-navy:    #1a2a44;           /* primary text on light */
    --wp-slate-80: #475569;
    --wp-slate-60: #64748b;
    --wp-slate-40: #94a3b8;

    /* Surfaces */
    --wp-surface:   #ffffff;
    --wp-surface-2: #f7f8fa;
    --wp-surface-3: #eef0f4;
    --wp-border:    #e5e8ee;
    --wp-border-strong: #d3d8df;

    /* Accent — gold only */
    --wp-gold:       #b89548;
    --wp-gold-lt:    #d4af6a;
    --wp-gold-pale:  rgba(184,149,72,0.12);
    --wp-gold-edge:  rgba(184,149,72,0.28);

    /* State — used sparingly */
    --wp-state-good:    #22c55e;     /* success / positive */
    --wp-state-good-dk: #16a34a;
    --wp-state-good-soft: rgba(34,197,94,0.12);
    --wp-state-warn:    #f59e0b;
    --wp-state-warn-soft: rgba(245,158,11,0.12);
    --wp-state-bad:     #ef4444;
    --wp-state-bad-soft: rgba(239,68,68,0.12);
    --wp-state-info:    #60a5fa;
    --wp-state-info-soft: rgba(96,165,250,0.12);

    /* Semantic data accents — each one has exactly ONE job on a given
       screen. Applied via is-* modifier classes, never decoratively. */
    --wp-income:    #22c55e;   /* revenue / money flowing in */
    --wp-amber:     #d97706;   /* listings (seller-side convention) */
    --wp-pipeline:  var(--wp-steel);  /* active deals / in-progress work */

    /* ── TYPOGRAPHY ──────────────────────────────────────────── */
    --wp-font-display: 'Playfair Display', Georgia, serif;
    --wp-font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

    /* ── SPACING (8pt grid) ──────────────────────────────────── */
    --wp-s-1:  4px;
    --wp-s-2:  8px;
    --wp-s-3:  12px;
    --wp-s-4:  16px;
    --wp-s-5:  20px;
    --wp-s-6:  24px;
    --wp-s-8:  32px;
    --wp-s-10: 40px;
    --wp-s-12: 48px;

    /* ── RADII ───────────────────────────────────────────────── */
    --wp-r-sm: 6px;
    --wp-r-md: 10px;
    --wp-r-lg: 14px;
    --wp-r-xl: 20px;
    --wp-r-pill: 999px;

    /* ── SHADOWS — restrained ────────────────────────────────── */
    --wp-shadow-xs: 0 1px 2px rgba(8,15,29,0.20);
    --wp-shadow-sm: 0 2px 8px rgba(8,15,29,0.24);
    --wp-shadow-md: 0 8px 24px rgba(8,15,29,0.32);
    --wp-shadow-lg: 0 24px 60px rgba(8,15,29,0.40);

    /* ── MOTION ──────────────────────────────────────────────── */
    --wp-ease:       cubic-bezier(0.2, 0, 0, 1);
    --wp-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --wp-t-fast:     120ms;
    --wp-t-med:      200ms;
    --wp-t-slow:     360ms;

    /* ── PAGE BACKDROP (dark) ───────────────────────────────
       Lighter than v1. Subtle cool bloom top-left, whisper of warmth
       bottom-right. Flipped wholesale in .theme-light below. */
    --wp-page-bg:
        radial-gradient(1400px 700px at 15% -20%, rgba(138,164,214,0.10), transparent 60%),
        radial-gradient(1000px 600px at 110% 110%, rgba(184,149,72,0.04), transparent 60%),
        linear-gradient(180deg, #1b294a 0%, #18243d 45%, var(--wp-navy-800) 100%);

    /* ── THEME-AWARE SURFACE TOKENS ──────────────────────────
       These are the values that must flip between dark and light.
       Referenced throughout the app; redefined under .theme-light.  */
    --wp-card-bg:      linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
    --wp-card-border:  rgba(255,255,255,0.08);
    --wp-track:        rgba(255,255,255,0.08);   /* progress tracks, subtle fills */
    --wp-hairline:     rgba(255,255,255,0.06);   /* dividers between cells */
    --wp-overlay:      rgba(255,255,255,0.04);   /* subtle hover/elevated panels */
    --wp-shadow-card:  0 8px 24px rgba(8,15,29,0.32);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — soft white canvas, white cards, navy ink.
   Keeps the same accent vocabulary (gold + steel) just with
   darker variants that read on a light background.
   ═══════════════════════════════════════════════════════════ */
.theme-light {
    /* Canvas — cool light grey, notably deeper than off-white so the
       white cards read as a discrete layer. Darker than v1 because the
       v1 was still too close to the card tone. */
    --wp-page-bg:
        radial-gradient(1400px 700px at 15% -20%, rgba(76,107,160,0.06), transparent 60%),
        radial-gradient(1000px 600px at 110% 110%, rgba(160,124,46,0.03), transparent 60%),
        linear-gradient(180deg, #dce2ea 0%, #ced5df 100%);

    /* Ink — navy on light. Opacities tuned to be generous with contrast;
       a paid tool should read at a glance, not require squinting. */
    --wp-ink-100: #17233b;
    --wp-ink-80:  rgba(23,35,59,0.90);
    --wp-ink-60:  rgba(23,35,59,0.78);
    --wp-ink-40:  rgba(23,35,59,0.64);
    --wp-ink-20:  rgba(23,35,59,0.36);

    /* Steel — truer pipeline blue on light. Bumped saturation so "Under
       Contract" reads as an action color, not another shade of grey. */
    --wp-steel:      #2e4fa0;
    --wp-steel-lt:   #4c6ba0;
    --wp-steel-soft: rgba(46,79,160,0.10);
    --wp-steel-edge: rgba(46,79,160,0.24);

    /* Gold — keep same hue, slightly deeper for contrast */
    --wp-gold-lt:    #a07c2e;   /* primary gold on light = the base gold */
    --wp-gold-pale:  rgba(160,124,46,0.08);
    --wp-gold-edge:  rgba(160,124,46,0.22);

    /* Semantic data accents — brightened one step so the color is
       actually visible on a denser grey canvas without sliding into
       highlighter territory. */
    --wp-income:    #059669;    /* emerald-600 — punchy but still tasteful */
    --wp-amber:     #c2410c;    /* orange-700 — more orange so it reads distinct from gold */
    --wp-state-bad: #dc2626;    /* red-600 on light */

    /* Surface tokens — white cards with firmer hairline borders +
       higher-opacity tracks + hairlines, so every divider reads as a
       real edge instead of a ghost. */
    --wp-card-bg:      #ffffff;
    --wp-card-border:  #c2cad6;
    --wp-track:        rgba(23,35,59,0.16);
    --wp-hairline:     rgba(23,35,59,0.14);
    --wp-overlay:      #f2f4f8;
    --wp-shadow-card:  0 1px 2px rgba(23,35,59,0.08), 0 8px 24px rgba(23,35,59,0.08);
}

/* Under .theme-light, the glass utilities become clean white cards.
   No backdrop-filter — it's expensive and invisible on solid white. */
.theme-light .wp-glass-subtle,
.theme-light .wp-glass,
.theme-light .wp-glass-raised {
    background: var(--wp-card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--wp-card-border);
    box-shadow: var(--wp-shadow-card);
}
.theme-light .wp-glass-subtle { background: var(--wp-overlay); }
.theme-light .wp-glass-raised { box-shadow: 0 24px 60px rgba(23,35,59,0.10); }

/* Interactive hover — under light, slightly deepen border instead of lifting */
.theme-light .wp-glass-interactive:hover {
    border-color: #c9d0dd;
    transform: translateY(-1px);
}

/* Buttons re-contrast for light backgrounds */
.theme-light .wp-btn-ghost {
    background: #ffffff;
    color: var(--wp-ink-100);
    border-color: var(--wp-card-border);
}
.theme-light .wp-btn-ghost:hover {
    background: var(--wp-overlay);
    border-color: #c9d0dd;
}

/* Pills re-contrast */
.theme-light .wp-pill-neutral { background: var(--wp-overlay); color: var(--wp-ink-60); border-color: var(--wp-card-border); }
.theme-light .wp-pill-steel   { background: var(--wp-steel-soft); color: var(--wp-steel); border-color: var(--wp-steel-edge); }
.theme-light .wp-pill-gold    { background: var(--wp-gold-pale); color: var(--wp-gold-lt); border-color: var(--wp-gold-edge); }
.theme-light .wp-pill-good    { background: rgba(34,197,94,0.10); color: #15803d; border-color: rgba(34,197,94,0.26); }
.theme-light .wp-pill-warn    { background: rgba(245,158,11,0.10); color: #a16207; border-color: rgba(245,158,11,0.28); }
.theme-light .wp-pill-bad     { background: rgba(239,68,68,0.10); color: #b91c1c; border-color: rgba(239,68,68,0.26); }

/* Marks re-contrast */
.theme-light .wp-mark {
    background: var(--wp-steel-soft);
    color: var(--wp-steel);
    border-color: var(--wp-steel-edge);
}
.theme-light .wp-mark.is-gold {
    background: var(--wp-gold-pale);
    color: var(--wp-gold-lt);
    border-color: var(--wp-gold-edge);
}

/* ─────────────────────────────────────────────────────────────
   GLASS — the key premium material
   Three tiers: subtle (barely raised), base (card), raised (hero)
   ───────────────────────────────────────────────────────────── */

.wp-glass,
.wp-glass-subtle,
.wp-glass-raised {
    background-clip: padding-box;
    /* Fallback for browsers w/o backdrop-filter */
    background-color: rgba(26, 42, 68, 0.72);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .wp-glass-subtle {
        background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        backdrop-filter:         blur(14px) saturate(160%);
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 1px 2px rgba(8,15,29,0.25);
    }
    .wp-glass {
        background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        backdrop-filter:         blur(22px) saturate(180%);
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.08),
            0 8px 24px rgba(8,15,29,0.32);
    }
    .wp-glass-raised {
        background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03));
        -webkit-backdrop-filter: blur(30px) saturate(200%);
        backdrop-filter:         blur(30px) saturate(200%);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.12),
            inset 0 -1px 0 rgba(0,0,0,0.25),
            0 24px 60px rgba(8,15,29,0.42);
    }
}

/* Interactive hover lift — barely perceptible but real */
.wp-glass-interactive {
    transition:
        transform var(--wp-t-med) var(--wp-ease),
        border-color var(--wp-t-med) var(--wp-ease),
        box-shadow var(--wp-t-med) var(--wp-ease);
}
.wp-glass-interactive:hover {
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────── */

.wp-display { font-family: var(--wp-font-display); font-weight: 700; letter-spacing: -0.01em; }
.wp-display-lg { font-family: var(--wp-font-display); font-weight: 800; font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; }
.wp-display-md { font-family: var(--wp-font-display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -0.015em; }

.wp-eyebrow {
    font-family: var(--wp-font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wp-ink-40);
}

.wp-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
   Primary = gold on dark. Ghost = transparent with glass edge.
   Never use rainbow accents on buttons.
   ───────────────────────────────────────────────────────────── */

.wp-btn {
    font-family: var(--wp-font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 10px 16px;
    border-radius: var(--wp-r-md);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background var(--wp-t-fast) var(--wp-ease),
        border-color var(--wp-t-fast) var(--wp-ease),
        color var(--wp-t-fast) var(--wp-ease),
        transform var(--wp-t-fast) var(--wp-ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.wp-btn:active { transform: translateY(1px); }

/* Primary — gold, for confirming actions */
.wp-btn-primary {
    background: linear-gradient(180deg, var(--wp-gold-lt), var(--wp-gold));
    color: #1a1200;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 1px 2px rgba(8,15,29,0.35);
}
.wp-btn-primary:hover { background: linear-gradient(180deg, #e0b877, var(--wp-gold-lt)); }

/* Ghost — transparent glass, default action on dark */
.wp-btn-ghost {
    background: rgba(255,255,255,0.04);
    color: var(--wp-ink-100);
    border-color: rgba(255,255,255,0.10);
}
.wp-btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
}

/* Quiet — no fill, just text with underline on hover */
.wp-btn-quiet {
    background: transparent;
    color: var(--wp-ink-60);
    padding: 6px 10px;
}
.wp-btn-quiet:hover { color: var(--wp-ink-100); }

/* ─────────────────────────────────────────────────────────────
   BADGES + PILLS
   ───────────────────────────────────────────────────────────── */

.wp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--wp-r-pill);
    font-family: var(--wp-font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.wp-pill-neutral { background: rgba(255,255,255,0.06); color: var(--wp-ink-60); border: 1px solid rgba(255,255,255,0.08); }
.wp-pill-steel   { background: var(--wp-steel-soft); color: var(--wp-steel-lt); border: 1px solid var(--wp-steel-edge); }
.wp-pill-gold    { background: var(--wp-gold-pale); color: var(--wp-gold-lt); border: 1px solid var(--wp-gold-edge); }
.wp-pill-good    { background: var(--wp-state-good-soft); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.wp-pill-warn    { background: var(--wp-state-warn-soft); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
.wp-pill-bad     { background: var(--wp-state-bad-soft); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); }

/* ─────────────────────────────────────────────────────────────
   HAIRLINES — 1px dividers at the right opacity
   ───────────────────────────────────────────────────────────── */

.wp-hairline     { height: 1px; background: rgba(255,255,255,0.06); border: 0; margin: 0; }
.wp-hairline-vx  { width: 1px; background: rgba(255,255,255,0.06); align-self: stretch; }

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHIC MARKS — replace emoji in chrome
   Render small, restrained, monochrome.
   ───────────────────────────────────────────────────────────── */

.wp-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--wp-steel-soft);
    color: var(--wp-steel-lt);
    border: 1px solid var(--wp-steel-edge);
    font-family: var(--wp-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
/* Gold variant — reserved for hero / celebratory moments only. */
.wp-mark.is-gold {
    background: var(--wp-gold-pale);
    color: var(--wp-gold-lt);
    border-color: var(--wp-gold-edge);
}

/* ─────────────────────────────────────────────────────────────
   A11y — respect reduced motion
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .wp-glass-interactive,
    .wp-btn {
        transition: none;
    }
    .wp-glass-interactive:hover { transform: none; }
}