/* ============================================================
   swiss-tokens.css — single source of truth for the "about-page"
   visual quality across every Pandora surface.
   ============================================================

   WHY THIS FILE EXISTS
   --------------------
   The /about page (frontend/about.html) is the canonical visual
   standard: Instrument Serif headlines, Geist body, JetBrains Mono
   accents, an 8pt spacing scale, a 3-stop gradient (purple→blue→
   green) used for the logomark + gradient text, and a specific
   blue-button + hover-lift pattern.

   Every other public surface (dashboard, login, pricing, privacy,
   terms, security, status, customer portal) was previously defining
   its own tokens — often using Inter/system-sans without the serif
   accent, or its own font triad (Fraunces+Inter on customer.html).
   That created an "inferior" feel relative to /about.

   This file consolidates the about-page tokens so every surface
   can import it via <link rel="stylesheet" href="/static/css/swiss-tokens.css">
   and inherit the same type stack, colors, spacing, motion, and
   button styles. Allowed by CSP (style-src 'self').

   2026-05-17 — Pandora coherence pass.
   ============================================================ */

:root {
    /* ── Colour tokens (about-page palette) ── */
    --bg-root:        #09090b;
    --bg-surface:     #0f0f11;
    --bg-raised:      #18181b;

    --border-subtle:  #1e1e22;
    --border-default: #27272a;
    --border-strong:  #3f3f46;

    --text-primary:   #fafafa;
    --text-secondary: #b4b4bf;
    --text-tertiary:  #787882;
    --text-muted:     #959599;
    --text-link:      var(--blue-400);   /* link text color (2026-05-31 backfill — was undefined, used in index.html/app.js/inbox.js without fallback) */

    --blue-500:       #3b82f6;
    --blue-400:       #60a5fa;
    --blue-500-rgb:   59, 130, 246;

    --green-500:      #22c55e;
    --green-bg:       rgba(34, 197, 94, 0.08);
    --amber-500:      #f59e0b;
    --amber-bg:       rgba(245, 158, 11, 0.08);
    --purple-400:     #c084fc;
    --red-500:        #ef4444;
    --red-400:        #f87171;
    --red-bg:         rgba(239, 68, 68, 0.08);
    --blue-bg:        rgba(59, 130, 246, 0.08);

    /* ── Missing-token backfill (2026-05-30) ──
       These were referenced WITHOUT fallbacks across the dashboard CSS but
       never defined, so they silently resolved to invalid → transparent
       backgrounds / missing borders / collapsed spacing (e.g. the Telegram
       More-menu rendered see-through via `background: var(--bg-card)`).
       Audit: --border-hairline (40 uses), --space-7 (15), --bg-card (1
       no-fallback), --accent-rgb (4), --accent-soft (2), --indigo-300 (1).
       Same class as the earlier --radius-xs gap. */
    --bg-card:        var(--bg-surface);          /* matches existing var(--bg-card, var(--bg-surface)) fallbacks */
    --border-hairline: var(--border-subtle);      /* used as a (dashed) border colour */
    --accent-rgb:     var(--blue-500-rgb);         /* used in rgba(var(--accent-rgb), x) */
    --accent-soft:    var(--blue-400);             /* used as `color: var(--accent-soft)` (fallback was --blue-400) */
    --indigo-300:     #a5b4fc;                     /* light indigo accent text */

    /* ── Radius ── */
    --radius-xs:      4px;
    --radius-sm:      6px;
    --radius-md:      8px;
    --radius-lg:      12px;
    --radius-xl:      16px;

    /* ── Spacing scale (4pt base, matches login.html) ── */
    --space-1:        4px;
    --space-2:        8px;
    --space-3:        12px;
    --space-4:        16px;
    --space-5:        20px;
    --space-6:        24px;
    --space-7:        28px;
    --space-8:        32px;
    --space-10:       40px;
    --space-12:       48px;
    --space-16:       64px;

    /* ── Typography ── The about-page canonical triad.
       Instrument Serif for editorial headlines (italic accents),
       Geist for body, JetBrains Mono for eyebrows + technical
       accents (labels, URLs, code). */
    --font-sans:      "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif:     "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    --font-mono:      "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", monospace;
    /* --font-display — alias for the canonical editorial display face.
       Referenced ~30× by skin-customer.css/skin-customer-2.css with no
       inline fallback; it was only ever defined inline in customer.html, so
       on the dashboard those serif headers silently fell back to plain sans.
       Defining it here (the single source of truth) makes editorial serif
       headers render as intended on every surface that loads this file. */
    --font-display:   var(--font-serif);

    /* ── Motion ── */
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --duration:       320ms;
    --duration-fast:  160ms;

    /* ── Reading column (legal/long-form pages) ── */
    --col-reading:    720px;
    --col-page:       1080px;
}

/* ── Global focus ring fallback (WCAG 2.4.7) ── */
:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

/* ── Skip link (WCAG 2.4.1) — reusable across every page ── */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.6rem 1rem;
    background: var(--blue-500);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    transform: translateY(-150%);
    transition: transform 0.15s ease-out;
    z-index: 1000;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* ── Shared logomark — used in nav + footer brand mark ── */
.logomark {
    display: inline-block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.logomark__square {
    stroke: url(#pandora-mark-grad);
    stroke-width: 2.2;
    fill: none;
    transform-origin: 14px 14px;
}
.logomark__p {
    stroke: var(--text-primary);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
@media (prefers-reduced-motion: no-preference) {
    .logomark__square { animation: logomark-spin 28s linear infinite; }
}
@keyframes logomark-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Ambient background halo — adds subtle depth to landing-style pages.
   Opt-in via `<body class="swiss-ambient">` so it doesn't fire on
   dashboard-style pages where it would clash. */
body.swiss-ambient { position: relative; }
body.swiss-ambient::before {
    content: "";
    position: fixed;
    inset: -10% -10% 60%;
    z-index: -1;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(var(--blue-500-rgb), 0.10), transparent 65%),
        radial-gradient(35% 40% at 85% 20%, rgba(192, 132, 252, 0.06), transparent 70%);
    pointer-events: none;
}

/* ── Shared page wrapper ── */
.swiss-page {
    max-width: var(--col-page);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Shared nav (matches /about) ──
   2026-05-18 visual-sweep: header padding 1.25→1.5rem, brand gap
   0.6→0.85rem so the P-icon and PANDORA wordmark have ≥12px clear
   space (Designer LAYOUT-CORRECTNESS mandate check #2). */
.swiss-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 1rem;
    flex-wrap: wrap;
}
.swiss-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
}
.swiss-nav-brand:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 4px;
    border-radius: 4px;
}
.swiss-nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.swiss-nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-md);
    transition: color 0.15s, background 0.15s;
}
.swiss-nav-link.active { color: var(--text-primary); }
.swiss-nav-link:hover  { color: var(--text-primary); background: var(--bg-raised); }
.swiss-nav-link:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

/* ── Shared button — `.swiss-btn-primary` matches /about's small CTA ── */
.swiss-btn-primary {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--blue-400);
    text-decoration: none;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--blue-500-rgb), 0.35);
    background: rgba(var(--blue-500-rgb), 0.12);
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: inherit;
}
.swiss-btn-primary:hover {
    background: rgba(var(--blue-500-rgb), 0.22);
    box-shadow: 0 0 0 1px rgba(var(--blue-500-rgb), 0.4);
}
.swiss-btn-primary:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

/* ── Shared hero button — `.swiss-btn-hero` matches /about's big CTA ── */
.swiss-btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #4b8ef7 0%, var(--blue-500) 100%);
    border: 1px solid var(--blue-500);
    transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 24px -8px rgba(var(--blue-500-rgb), 0.6);
    cursor: pointer;
    font-family: inherit;
}
.swiss-btn-hero .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
.swiss-btn-hero:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.22) inset,
        0 14px 36px -8px rgba(var(--blue-500-rgb), 0.75);
}
.swiss-btn-hero:hover .arrow { transform: translateX(3px); }
.swiss-btn-hero:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

/* ── Shared hero — staggered fade-up just like /about ── */
.swiss-hero {
    padding: 5rem 0 3.5rem;
    text-align: center;
}
.swiss-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue-400);
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(var(--blue-500-rgb), 0.28);
    border-radius: 999px;
    background: rgba(var(--blue-500-rgb), 0.06);
}
.swiss-hero-eyebrow::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(var(--blue-500-rgb), 0.18);
}
.swiss-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    max-width: 800px;
    margin: 0 auto 1.5rem;
}
.swiss-hero h1 em,
.swiss-hero h1 .accent {
    font-style: italic;
    background: linear-gradient(120deg, #c084fc 0%, #60a5fa 50%, #22c55e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.swiss-hero p.lead {
    font-size: 1.08rem;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}
@media (prefers-reduced-motion: no-preference) {
    .swiss-hero-eyebrow,
    .swiss-hero h1,
    .swiss-hero p.lead {
        opacity: 0;
        transform: translateY(12px);
        animation: swiss-hero-rise var(--duration) var(--ease-out) forwards;
    }
    .swiss-hero-eyebrow { animation-delay: 60ms; }
    .swiss-hero h1      { animation-delay: 140ms; }
    .swiss-hero p.lead  { animation-delay: 240ms; }
}
@keyframes swiss-hero-rise { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 540px) {
    .swiss-hero { padding: 3.5rem 0 2.5rem; }
}

/* ── Section label + serif section title (re-usable) ── */
.swiss-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 0.6rem;
}
.swiss-section-title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    max-width: 640px;
}

/* ── Shared footer ── */
.swiss-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.swiss-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.swiss-footer-links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.swiss-footer-links a {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.15s;
}
.swiss-footer-links a:hover  { color: var(--text-secondary); }
.swiss-footer-links a:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 4px;
}

/* ── Reading column — for long-form legal / docs pages.
   Caps measure at ~70 chars for comfortable reading. ── */
.swiss-reading {
    max-width: var(--col-reading);
    margin: 0 auto;
    padding: 1rem 0 4rem;
}
.swiss-reading h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-top: 2.5rem;
    margin-bottom: 0.8rem;
}
.swiss-reading h3 {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.6rem;
    margin-bottom: 0.5rem;
}
.swiss-reading p,
.swiss-reading li {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.swiss-reading p { margin-bottom: 0.9rem; }
.swiss-reading ul,
.swiss-reading ol { margin: 0 0 1rem 1.4rem; }
.swiss-reading li { margin-bottom: 0.4rem; }
.swiss-reading a {
    color: var(--blue-400);
    text-underline-offset: 2px;
}
.swiss-reading code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--bg-surface);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.swiss-reading .meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 1rem;
}

/* ── Lift-on-hover card (assembly-line + tier card pattern) ── */
.swiss-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1rem;
    transition: transform 200ms var(--ease-out), border-color 200ms;
}
.swiss-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}
@media (prefers-reduced-motion: reduce) {
    .swiss-card:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile touch-target minimums (WCAG 2.5.5 — 44×44 CSS px)
   Ensures all interactive elements (buttons, links) have minimum
   44×44 CSS px touch targets on mobile and touch-capable devices.
   Updated 2026-05-20 to fix undersized touch targets across all pages
   including inline links in privacy, terms, security, and footer areas.
   See issue #2779.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px), (pointer: coarse), (hover: none) {
    /* Ensure all links are tap-friendly on mobile */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem;
        box-sizing: border-box;
    }

    /* Nav + footer link rows: make each link a proper tap rectangle */
    nav a,
    header nav a,
    .nav-links a,
    .footer-links a,
    footer a,
    .tap-target,
    /* Additional nav selectors to catch all variations */
    .swiss-nav a,
    .swiss-footer a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
    }

    /* Canonical button classes across the public surfaces */
    .btn-ghost,
    .btn-primary,
    .btn-hero,
    .btn-hero-secondary,
    .btn-submit,
    .cookie-btn,
    .nav-link,
    .swiss-btn-primary,
    .swiss-btn-hero,
    button[type="submit"],
    button[type="button"],
    button[type="reset"],
    button:not([class]),
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Language toggle and other button groups */
    .lang-toggle button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Form inputs in any waitlist/contact/login row */
    .field-input,
    .waitlist-form input,
    .waitlist-form textarea,
    form input[type="email"],
    form input[type="text"],
    form input[type="password"] {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Brand wordmark also a tap target when it's a link to /home */
    a.nav-brand,
    a.footer-brand,
    a.swiss-nav-brand,
    a.swiss-footer-brand {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem;
    }

    /* Accessibility skip-link: ensure it's always 44px minimum */
    a.skip-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.85rem;
        box-sizing: border-box;
    }

    a.skip-link:focus,
    a.skip-link:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }

    /* Links in legal/reading sections and main content */
    .swiss-reading a,
    main a,
    p a,
    li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem;
    }

    /* Empty-state sign-in links (CTA, not reading flow) */
    .empty a,
    p.empty a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        box-sizing: border-box;
    }
}
/* ── End mobile touch-target minimums ── */