:root {
    /* Immutable Brand Tokens: SEO Sri Lanka */
    --color-text-inverse:   #bda41d;
    --color-surface-raised: #b9da37;
    --color-border:         #e9eaeb;

    --font-family-primary: 'Archivo', sans-serif;
    
    --font-size-xs:  12px;   /* captions, badges, eyebrows */
    --font-size-sm:  14px;   /* secondary labels, table text */
    --font-size-md:  16px;   /* body copy */
    --font-size-lg:  18px;   /* h4 / step labels */
    --font-size-xl:  22px;   /* h3 / card titles */
    --font-size-2xl: 28px;   /* h2 / section titles */
    --font-size-3xl: 36px;   /* reserved / large display */
    --font-size-4xl: 48px;   /* h1 / hero headline */
    --font-line-base: 1.6;   /* unitless ratio — scales with font size */

    --space-1: 6px;
    --space-2: 7px;
    --space-3: 8px;
    --space-4: 9px;
    --space-5: 10px;
    --space-6: 11px;
    --space-7: 13px;
    --space-8: 14px;

    --radius-xs: 12px;
    --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-nav: 0 2px 8px rgba(0,0,0,0.05);
    --motion-instant: 200ms;
    --motion-fast: 300ms;

    /* Light Mode Default */
    --color-bg-app:         #ffffff;
    --color-surface-base:   #ffffff;
    --color-surface-card:   #ffffff;
    --color-surface-onyx:   #f8f9fa;
    --color-text-primary:   #3f3f3f;
    --color-text-secondary: #333333;
    --color-text-tertiary:  #ffffff; /* Used for text on dark backgrounds like buttons */
    --color-nav-bg:         rgba(255, 255, 255, 0.9);
    --color-border:         #e9eaeb;

    /* Semantic Status Tokens */
    --color-status-success: #b9da37; /* Same as surface-raised */
    --color-status-warning: #bda41d; /* Same as text-inverse */
    --color-status-danger:  #f24e1e; /* From Tailwind config */
}

/* Dark Mode overrides */
[data-theme="dark"] {
    --color-bg-app:         #000000;
    --color-surface-base:   #000000;
    --color-surface-card:   #121212;
    --color-surface-onyx:   #121212;
    --color-text-primary:   #ffffff;
    --color-text-secondary: #ffffff;
    --color-border:         rgba(255, 255, 255, 0.1);
    --color-nav-bg:         rgba(0, 0, 0, 0.8);
    
    --color-status-success: #b9da37;
    --color-status-warning: #bda41d;
    --color-status-danger:  #ff5c2b; /* Slightly brighter for dark mode */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-app:         #000000;
        --color-surface-base:   #000000;
        --color-surface-card:   #121212;
        --color-surface-onyx:   #121212;
        --color-text-primary:   #ffffff;
        --color-text-secondary: #ffffff;
        --color-border:         rgba(255, 255, 255, 0.1);
        --color-nav-bg:         rgba(0, 0, 0, 0.8);

        --color-status-success: #b9da37;
        --color-status-warning: #bda41d;
        --color-status-danger:  #ff5c2b;
    }
}

[x-cloak] { display: none !important; }

* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
html, body { background: var(--color-surface-base); }
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    line-height: var(--font-line-base);
    font-weight: 400;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4, .display {
    font-family: var(--font-family-primary);
    font-weight: 800;
    letter-spacing: -0.02em;
}
h1 { font-size: var(--font-size-4xl); line-height: 1.1;  } /* 48px — tight for big display text */
h2 { font-size: var(--font-size-2xl); line-height: 1.2;  } /* 28px — section titles */
h3 { font-size: var(--font-size-xl);  line-height: 1.35; } /* 22px — card / step titles */
h4 { font-size: var(--font-size-lg);  line-height: 1.4;  } /* 18px — compact labels */
code, .font-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }

/* Keyboard-first focus: WCAG 2.2 AA non-negotiable */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-surface-base); }
::-webkit-scrollbar-thumb { background: var(--color-surface-raised); border-radius: 10px; }

/* Surfaces */
.surface-raised {
    background: var(--color-surface-raised);
    color: #000000;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-1);
    transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.surface-raised:hover { transform: translate(-2px, -2px); box-shadow: rgba(0,0,0,0.4) 6px 6px 12px 0px; }

.surface-card {
    background: var(--color-surface-card);
    color: var(--color-text-primary);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-1);
    border: 1px solid var(--color-border);
}

.surface-onyx {
    background: var(--color-surface-onyx);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
}

/* Eyebrow / overline */
.eyebrow {
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
}

/* Buttons (must define default/hover/focus-visible/active/disabled/loading) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-family: var(--font-family-primary);
    font-weight: 800;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: var(--space-7) var(--space-8);
    border-radius: var(--radius-xs);
    border: 2px solid transparent;
    transition: transform var(--motion-instant) ease, background var(--motion-instant) ease, color var(--motion-instant) ease, box-shadow var(--motion-instant) ease;
    cursor: pointer;
}
.btn-primary {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-1);
}
.btn-primary:hover { transform: translate(-2px, -2px); }
.btn-primary:active { transform: translate(0, 0); box-shadow: rgba(0,0,0,0.4) 2px 2px 4px 0px; }
.btn-primary[disabled],
.btn-primary[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-ghost {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-surface-raised);
}
.btn-ghost:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }

/* Form */
.form-shell {
    background: var(--color-surface-base);
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-1);
    padding: var(--space-1);
    display: flex;
    gap: var(--space-1);
    align-items: stretch;
}
.form-shell input {
    flex: 1;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    padding: 0 var(--space-8);
    min-width: 0;
    outline: none;
}
.form-shell input::placeholder { color: #9a9a9a; font-weight: 500; }
@media (max-width: 640px) {
    .form-shell { flex-direction: column; padding: var(--space-2); }
    .form-shell input { padding: var(--space-7); }
}

/* Nav */
#main-nav { 
    transition: all var(--motion-fast) ease;
}

#main-nav.scrolled {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.nav-shell {
    background: var(--color-nav-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-nav);
    color: var(--color-text-primary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--motion-fast) ease;
}

#main-nav.scrolled .nav-shell {
    background: var(--color-surface-base);
    box-shadow: var(--shadow-1);
}

.nav-link {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    transition: all var(--motion-instant) ease;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link:hover { 
    color: var(--color-surface-raised);
    background: rgba(185, 218, 55, 0.08);
}

/* Specific fix for theme toggle button which is a nav-link */
#theme-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Brand mark */
.wordmark { font-weight: 900; letter-spacing: -0.02em; font-size: var(--font-size-lg); }
.wordmark .accent { color: var(--color-surface-raised); }
.wordmark .gold { color: var(--color-text-inverse); }

/* Gauge */
.gauge-container { position: relative; width: 160px; height: 160px; }
.gauge-svg { transform: rotate(-90deg); }
.gauge-bg { fill: none; stroke: var(--color-border); stroke-width: 12; }
.gauge-fill {
    fill: none;
    stroke: var(--color-surface-base);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray var(--motion-fast) ease-out;
}
.gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Report Summary Components */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); width: 100%; margin-top: var(--space-8); }
.status-card {
    padding: var(--space-8);
    border-radius: var(--radius-xs);
    text-align: center;
    border: 1px solid var(--color-border);
    background: var(--color-surface-onyx);
    transition: transform var(--motion-fast) ease;
}
.status-card:hover { transform: translateY(-4px); }
.status-card .count { font-size: var(--font-size-2xl); font-weight: 900; line-height: 1; display: block; margin-bottom: 4px; }
.status-card .label { font-size: var(--font-size-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; }
.status-card.pass { border-bottom: 4px solid var(--color-surface-raised); }
.status-card.warn { border-bottom: 4px solid var(--color-text-inverse); }
.status-card.fail { border-bottom: 4px solid var(--color-status-danger); }

.filter-tabs {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
    white-space: nowrap;
    padding: var(--space-4) var(--space-7);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-secondary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--motion-instant) ease;
    border: 1px solid transparent;
}
.filter-tab:hover { background: var(--color-surface-onyx); }
.filter-tab.active {
    background: var(--color-surface-base);
    color: var(--color-surface-raised);
    border-color: var(--color-surface-raised);
}

/* Section dividers */
.section { padding: 96px 24px; }
.section-dark { background: var(--color-surface-base); color: var(--color-text-primary); transition: background var(--motion-fast) ease, color var(--motion-fast) ease; }
.section-light { background: var(--color-surface-onyx); color: var(--color-text-primary); transition: background var(--motion-fast) ease, color var(--motion-fast) ease; }

.report-section-header {
    margin: 56px 0 var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-7);
}
.report-section-header h3 {
    font-size: var(--font-size-sm);
    font-weight: 900;
    color: var(--color-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    flex-shrink: 0;
}
.report-section-header .line { height: 2px; background: rgba(255,255,255,0.08); flex-grow: 1; }

.category-stats { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cat-stat {
    font-size: var(--font-size-xs);
    font-weight: 800;
    padding: var(--space-1) var(--space-7);
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cat-stat.pass { background: var(--color-surface-raised); color: var(--color-text-primary); }
.cat-stat.warn { background: var(--color-text-inverse); color: var(--color-surface-base); }
.cat-stat.miss { background: var(--color-status-danger); color: var(--color-text-tertiary); }

/* FAQ Accordion */
.faq-item {
    border: 1px solid var(--color-border);
    transition: all var(--motion-fast) ease;
}
.faq-item:hover {
    background: rgba(185, 218, 55, 0.02);
}
.faq-item.active {
    border-color: var(--color-surface-raised);
    box-shadow: var(--shadow-1);
    background: var(--color-surface-base);
}
.faq-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    transition: background var(--motion-instant) ease;
}
.faq-trigger:hover {
    background: rgba(185, 218, 55, 0.05);
}
.faq-content {
    padding: 0 var(--space-8) var(--space-8) var(--space-8);
}
.faq-chevron {
    color: var(--color-surface-raised);
    transition: transform var(--motion-fast) ease;
}

/* Audit rows */
.audit-row {
    display: grid;
    grid-template-columns: 56px 220px 1fr 110px 32px;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-8) calc(var(--space-8) * 2);
    margin-bottom: var(--space-7);
    background: var(--color-surface-card);
    color: var(--color-text-primary);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-1);
    transition: transform var(--motion-fast) ease;
    cursor: pointer;
    position: relative;
}
.audit-row:hover { transform: translate(-2px, -2px); }
.audit-row:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 4px; }
@media (max-width: 900px) {
    .audit-row { grid-template-columns: 48px 1fr 80px; padding: var(--space-7) var(--space-8); }
    .audit-row .audit-desc, .audit-row .audit-details-toggle { display: none; }
}

.icon-circle {
    width: 48px; height: 48px;
    border-radius: var(--radius-xs);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-circle svg { width: 22px; height: 22px; }
.audit-row.success .icon-circle { background: var(--color-surface-raised); color: var(--color-text-primary); }
.audit-row.warning .icon-circle { background: var(--color-text-inverse); color: var(--color-surface-base); }
.audit-row.critical .icon-circle { background: var(--color-status-danger); color: var(--color-text-tertiary); }

.audit-label { font-size: var(--font-size-md); font-weight: 800; color: var(--color-text-secondary); }
.audit-desc { font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: 1.5; font-weight: 500; }
.audit-score-pill {
    font-size: var(--font-size-xs);
    font-weight: 900;
    padding: var(--space-1) var(--space-7);
    border-radius: var(--radius-xs);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.audit-score-pill.success { background: var(--color-surface-raised); color: var(--color-text-primary); }
.audit-score-pill.warning { background: var(--color-text-inverse); color: var(--color-surface-base); }
.audit-score-pill.critical { background: var(--color-status-danger); color: var(--color-text-tertiary); }

.audit-details-toggle { color: var(--color-text-secondary); transition: transform var(--motion-instant) ease; }
.audit-row.expanded .audit-details-toggle { transform: rotate(180deg); }
.audit-details {
    grid-column: 1 / -1;
    padding-top: var(--space-8);
    margin-top: var(--space-7);
    display: none;
    border-top: 2px solid var(--color-border);
    animation: slideDown var(--motion-fast) ease;
}
.audit-row.expanded .audit-details { display: block; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.trace-block { padding: 0; border-radius: var(--radius-xs); overflow: hidden; }
.analysis-section {
    padding: var(--space-8);
    border-bottom: 1px solid var(--color-border);
}
.analysis-section:last-child { border-bottom: 0; }
.analysis-section.action { background: var(--color-surface-onyx); }


.trace-section-label {
    font-size: var(--font-size-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.trace-section-label::after { content: ''; flex-grow: 1; height: 1px; background: var(--color-border); }

.value-trace-box {
    margin-top: var(--space-5);
    padding: var(--space-7);
    background: var(--color-surface-base);
    color: var(--color-surface-raised);
    border-radius: var(--radius-xs);
    max-height: 160px;
    overflow-y: auto;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: var(--font-size-xs);
    line-height: 1.7;
    white-space: pre-wrap;
}

.value-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface-base);
    color: var(--color-surface-raised);
    padding: var(--space-3) var(--space-7);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: 700;
    margin-top: var(--space-3);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.value-pill .label { color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 0.12em; }

/* Performance overview */
.perf-table { width: 100%; border-collapse: collapse; }
.perf-table tr { border-bottom: 1px solid rgba(0,0,0,0.08); }
.perf-table tr:last-child { border-bottom: 0; }
.perf-table th {
    text-align: left;
    padding: var(--space-7) 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.perf-table td {
    text-align: right;
    padding: var(--space-7) 0;
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    font-weight: 800;
}

/* Log window */
#log-window {
    height: 256px;
    overflow-y: auto;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--color-surface-raised);
}
#log-window .log-error { color: var(--color-status-danger); }

/* Pulse */
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-surface-raised);
    box-shadow: 0 0 0 0 rgba(185, 218, 55, 0.6);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(185, 218, 55, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(185, 218, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(185, 218, 55, 0); }
}

/* Footer */
.premium-footer {
    background: #000000;
    color: #ffffff;
    border-top: 2px solid var(--color-surface-raised);
    padding: 80px 0 40px;
    margin-top: 80px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-8);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-title {
    font-size: var(--font-size-xs);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-8);
    display: block;
}
.footer-link {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-7);
    text-decoration: none;
    transition: color var(--motion-instant) ease;
    font-weight: 500;
}
.footer-link:hover { color: var(--color-surface-raised); }

/* Numbered step marker */
.step-num {
    font-family: var(--font-family-primary);
    font-weight: 900;
    font-size: var(--font-size-3xl);
    color: var(--color-surface-raised);
    min-width: 56px;
}

/* PDF print */
.pdf-only { display: none; }
@media print {
    body { background: white; color: var(--color-text-primary); }
    .no-print { display: none !important; }
    .pdf-only { display: block; border-bottom: 3px solid var(--color-surface-raised); margin-bottom: 30px; padding-bottom: 20px; }
    .surface-card, .audit-row { box-shadow: none !important; border: 1px solid #e5e5e5 !important; break-inside: avoid; page-break-inside: avoid; }
    .section-dark { background: white !important; color: var(--color-text-primary) !important; }
}

/* Reveal */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}