/* ═══════════════════════════════════════════════════════════════
   Skintruth — light theme tokens (system UI fonts)
═══════════════════════════════════════════════════════════════ */

:root {
    --font-scale: 1;
    --r: 16px;
    --r-sm: 10px;
    --radius-card: var(--r);
    --radius-inner: var(--r-sm);
    --radius-pill: 99px;
    /* ChatGPT / Claude-like system UI stack */
    --font: ui-sans-serif, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: var(--font);
    --font-ritual: var(--font);
    --border: 1px solid var(--border-color);

    /* Light (only) */
    --bg: #f0eae0;
    --bg2: #e6ddd0;
    --bg3: #ddd3c3;
    --surface: #faf7f2;
    --card: #ffffff;
    --card-hi: #fbf8f3;

    --gold: #9c7928;
    --gold-lt: #c8961a;
    --gold-dk: #6b5118;
    --gold-pale: #f0e4c4;
    --gfaint: rgba(156, 121, 40, 0.1);
    --border-gold: rgba(156, 121, 40, 0.3);

    --verd: #2a7a72;
    --verd-lt: #3d9990;
    --verd-dk: #1f5c56;
    --verd-pale: #d4edeb;

    --terra: #b84a28;
    --terra-pale: #f5ddd6;

    --ink: #1c1712;
    --ink-2: #3d332a;
    --ink-3: #6b5d52;
    --ink-4: #8c7d72;

    --cream: var(--ink);
    --cream-2: var(--ink-2);
    --cream-3: var(--ink-3);

    --border-color: rgba(28, 23, 18, 0.1);
    --border-hi: rgba(28, 23, 18, 0.22);

    --shadow-sm: 0 2px 12px rgba(28, 23, 18, 0.08);
    --shadow-md: 0 8px 32px rgba(28, 23, 18, 0.1);
    --shadow-lg: 0 20px 60px rgba(28, 23, 18, 0.12);

    --on-gold: #ffffff;
    --nav-scrim: rgba(240, 234, 224, 0.88);
    --overlay-scrim: rgba(240, 234, 224, 0.97);
    --popup-scrim: rgba(28, 23, 18, 0.45);
    --inverted-bg: var(--card);
    --inverted-text: var(--ink);
    --inverted-muted: var(--ink-3);
    --report-inset-bg: var(--gold-pale);
    --report-tag-bg: var(--card);
    --report-tag-border: var(--border-hi);
    --report-bar-track: var(--bg2);
    --report-facet-border: var(--border-color);

    --grain-opacity: 0.5;
    --grain-blend: multiply;
    --grain-strength: 0.025;

    --geom-r1: rgba(156, 121, 40, 0.13);
    --geom-r2: rgba(156, 121, 40, 0.17);
    --geom-r3: rgba(156, 121, 40, 0.2);
    --geom-r4: rgba(42, 122, 114, 0.18);
    --geom-r5: rgba(156, 121, 40, 0.28);
    --geom-lines: rgba(156, 121, 40, 0.07);
    --geom-dots: rgba(156, 121, 40, 0.45);
    --geom-glow-gold: rgba(156, 121, 40, 0.05);
    --geom-glow-verd: rgba(42, 122, 114, 0.05);
    --geom-glow-terra: rgba(184, 74, 40, 0.04);

    --zone-panel-bg: var(--card);
    --zone-panel-border: var(--border-color);
    --zone-panel-text: var(--ink-3);
    --zone-panel-strong: var(--gold);

    --error-border: rgba(184, 74, 40, 0.35);
    --error-icon: var(--terra);
    --error-text: var(--ink-2);

    --page-bg: var(--bg);
    --card-bg: var(--card);
    --inner-bg: var(--surface);
    --text-primary: var(--cream);
    --text-secondary: var(--cream-2);
    --text-tertiary: var(--cream-3);
    --accent-amber: var(--gold);
    --accent-red: var(--terra);
    --accent-green: var(--verd);
    --accent-blue: var(--verd-dk);

    --arc-gauge-bg: #f5f0e8;
    --arc-gauge-border: #d9d0c3;
    --arc-track: #d9d0c3;
    --arc-fill-start: #1d5c4a;
    --arc-fill-end: #2e7d62;
    --arc-fill-start-alt: #0f6e56;
    --arc-fill-end-alt: #2e7d62;
    --arc-score: #1d5c4a;
    --arc-you-label: #9a8e7e;
    --arc-title: #1d5c4a;
    --arc-legend-text: #5c5348;
    --arc-marker-avg: #9fd4c0;
    --arc-marker-ideal: #a88b3a;
    --arc-marker-stroke: #f5f0e8;
    --arc-legend-you: #2e7d62;
    --arc-legend-avg: #9fd4c0;
    --arc-legend-ideal: #a88b3a;
}

/* Geometry SVG strokes via CSS */
.geom-svg .g-r1 { stroke: var(--geom-r1); }
.geom-svg .g-r2 { stroke: var(--geom-r2); }
.geom-svg .g-r3 { stroke: var(--geom-r3); }
.geom-svg .g-r4 { stroke: var(--geom-r4); }
.geom-svg .g-r5 { stroke: var(--geom-r5); }
.geom-svg .g-lines { stroke: var(--geom-lines); }
.geom-svg .g-dots { fill: var(--geom-dots); }

.geom-bg::after {
    background:
        radial-gradient(ellipse 70% 50% at 50% 50%, var(--geom-glow-gold) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 20% 80%, var(--geom-glow-verd) 0%, transparent 55%),
        radial-gradient(ellipse 30% 30% at 80% 20%, var(--geom-glow-terra) 0%, transparent 50%);
}

body::after {
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
}

.ld-title,
.app-title {
    color: var(--ink);
}

/* Component polish */
.site-nav {
    box-shadow: 0 1px 0 rgba(156, 121, 40, 0.08);
}

.btn-primary,
.btn-primary.btn-analyze {
    box-shadow: 0 4px 20px rgba(156, 121, 40, 0.28);
}

.btn-primary:hover,
.btn-analyze:hover {
    box-shadow: 0 12px 36px rgba(156, 121, 40, 0.38);
}

.m-card,
.card,
.preview-slot,
.intake-fieldset {
    box-shadow: var(--shadow-sm);
}

.zone-map-layout__mask .panel-card {
    background: var(--zone-panel-bg);
    border: 1px solid var(--zone-panel-border);
}

.zone-map-layout__mask .panel-card__title,
.zone-map-layout__mask .zone-hover-brief {
    color: var(--zone-panel-text);
}

.zone-map-layout__mask .zone-hover-brief strong {
    color: var(--zone-panel-strong);
}

.chatgpt-summary {
    background: var(--card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

.chatgpt-summary::before {
    background: radial-gradient(ellipse 60% 40% at 80% 0%, rgba(156, 121, 40, 0.08) 0%, transparent 60%);
}

.chatgpt-summary-content {
    color: var(--ink-2);
}

.chatgpt-summary-content h1,
.chatgpt-summary-content h2,
.chatgpt-summary-content h3 {
    color: var(--ink);
}

.zone-detail {
    background: var(--report-inset-bg);
    border-color: var(--border-color);
}

.zone-detail__tag-pill {
    background: var(--report-tag-bg);
    border-color: var(--report-tag-border);
    color: var(--ink-2);
}

.zone-detail__bar-track {
    background: var(--report-bar-track) !important;
    border-color: var(--border-color) !important;
}

.zone-detail__sub--muted {
    color: var(--ink-4) !important;
}

.tip-row__text {
    color: var(--ink-3);
}

.tips-block--facet {
    border-top-color: var(--border-color);
}

.zone-facet-btn {
    border-color: var(--report-facet-border);
    background: var(--card);
}

.zone-facet-btn:hover {
    border-color: var(--border-hi);
    background: var(--card-hi);
}

.zone-facet-btn--na .zone-facet-btn__sum {
    color: var(--ink-4);
}

.zone-detail__na-note {
    color: var(--ink-3);
}

.state-target__divider {
    background: var(--border-color);
}

.mask-silhouette {
    fill: #e8e0d4;
    stroke: #b5a48f;
}

.mask-grid-line {
    stroke: rgba(28, 23, 18, 0.14);
}

.mask-grid-line--accent {
    stroke: rgba(28, 23, 18, 0.22);
    stroke-dasharray: 3 5;
}

.mask-node {
    fill: #8c7d72;
}

.mask-aperture {
    fill: #ddd3c3;
    stroke: #2a7a72;
}

.error-popup__panel {
    box-shadow: var(--shadow-lg);
}

.edit-thumb-btn {
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid var(--gold);
    color: var(--gold-dk);
    box-shadow: 0 2px 12px rgba(28, 23, 18, 0.22);
}

.edit-thumb-btn:hover {
    background: var(--gold);
    border-color: var(--gold-dk);
    color: var(--on-gold);
}