/* Clipizo design system v1. Canonical values: see ../DESIGN_SYSTEM.md.
   Load AFTER style.css and page-specific styles. */
:root {
    color-scheme: dark;

    /* Palette */
    --color-canvas: #0c0c0c;
    --color-deep: #070707;
    --color-section: #101010;
    --color-panel: #181818;
    --color-surface: #1e1e1e;
    --color-surface-hover: #262626;
    --color-border: #333333;
    --color-border-subtle: #242424;
    --color-border-strong: #515151;
    --color-text: #f4f4f4;
    --color-muted: #a8a8a8;
    --color-subtle: #858585;
    --color-accent: #bfff00;
    --color-accent-hover: #d1ff4d;
    --color-on-accent: #0c0c0c;
    --color-success: #a6e3a1;
    --color-warning: #f5cf78;
    --color-danger: #ff8b83;
    --color-info: #88c8ff;
    --color-focus: var(--color-accent);

    /* Type: the four weights shipped locally. */
    --font-body: 'Inter', Arial, Helvetica, sans-serif;
    --font-mono: 'Consolas', 'SFMono-Regular', monospace;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 800;
    --text-label: 0.75rem;
    --text-small: 0.875rem;
    --text-body: 1rem;
    --text-lead: 1.125rem;
    --text-card: 1.25rem;
    --text-section: clamp(1.875rem, 3.4vw, 3rem);
    --text-page: clamp(2.25rem, 4.5vw, 4rem);
    --text-display: clamp(2.5rem, 6vw, 5.5rem);
    --leading-tight: 1.05;
    --leading-heading: 1.15;
    --leading-body: 1.65;
    --tracking-heading: -0.04em;
    --tracking-label: 0.1em;

    /* Four-pixel rhythm */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-section: clamp(48px, 7vw, 96px);
    --content-wide: 1200px;
    --content-reading: 1000px;
    --gutter: clamp(20px, 5vw, 72px);

    /* Geometry, stroke weight and depth */
    --border-hairline: 1px;
    --border-control: 2px;
    --border-depth: 4px;
    --radius-node: 3px;
    --radius-tag: 4px;
    --radius-control: 10px;
    --radius-panel: 16px;
    --radius-pill: 999px;
    --control-height: 44px;
    --control-padding-x: 18px;
    --control-padding-y: 12px;
    --focus-width: 2px;
    --focus-offset: 4px;
    --shadow-card: 0 4px 0 var(--color-deep);
    --shadow-popover: 0 16px 36px rgb(0 0 0 / 0.35);

    /* Motion */
    --duration-press: 80ms;
    --duration-fast: 160ms;
    --duration-base: 240ms;
    --duration-settle: 520ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --hover-lift: -4px;
    --press-travel: 2px;

    /* Canvas values are read by living-signal-grid.js; RGB triples are intentional. */
    --signal-sitewide: 1;
    --signal-hero-only: 1;
    --signal-continuous: 1;
    --signal-cell-x: 56;
    --signal-cell-y: 28;
    --signal-line-rgb: 126, 139, 116;
    --signal-accent-rgb: 191, 255, 0;
    --signal-line-alpha: 0.13;
    --signal-radius: 230;
    --signal-displacement: 24;
    --signal-spring: 125;
    --signal-damping: 18;
    --signal-idle-ms: 1100;
    --signal-edge-fade: 240;
    --signal-separator-height: 3;

    /* Compatibility aliases for existing public components. */
    --bg-main: var(--color-canvas);
    --bg-deep: var(--color-deep);
    --bg-section: var(--color-section);
    --bg-card: var(--color-surface);
    --bg-card-hover: var(--color-surface-hover);
    --bg-panel: var(--color-panel);
    --bg-color: var(--color-canvas);
    --border-soft: var(--color-border);
    --surface-shadow: var(--color-deep);
    --text-main: var(--color-text);
    --text-muted: var(--color-muted);
    --accent: var(--color-accent);
    --accent-yellow: var(--color-accent);
    --clipizo-surface: var(--color-surface);
    --clipizo-surface-hover: var(--color-surface-hover);
    --clipizo-deep: var(--color-deep);
    --clipizo-deeper: var(--color-panel);
    --clipizo-border: var(--color-border);
    --clipizo-border-soft: var(--color-border-subtle);
    --clipizo-text: var(--color-text);
    --clipizo-muted: var(--color-muted);
    --clipizo-accent: var(--color-accent);
    --fusion-grid-bg: var(--color-canvas);
    --fusion-grid-line: #151515;
    --fusion-grid-separator: var(--color-border-subtle);
    --node-face: #2e3036;
    --node-face-hover: #353741;
    --node-edge: var(--color-deep);
    --node-highlight: rgb(255 255 255 / 0.12);
    --node-pin-green: #aaff00;
    --node-pin-yellow: #ffe200;
    --node-pin-blue: #20b8ff;
    --node-pin-gray: #cfd6d3;
    --node-title-line: var(--color-accent);
    --node-link: #c8c8c8;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
    background-color: var(--color-canvas);
}

/* Static public-site grid; only explicitly marked heroes receive an animated layer. */
body.signal-page {
    position: relative;
    isolation: isolate;
    /* Suppress the legacy body grid, including when an older script is cached. */
    background-image: none !important;
}
.site-signal-grid {
    /* Share a document-space origin with the hero mesh so section edges never restart the grid. */
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--signal-line-rgb), var(--signal-line-alpha)) var(--border-hairline), transparent var(--border-hairline)),
        linear-gradient(90deg, rgba(var(--signal-line-rgb), var(--signal-line-alpha)) var(--border-hairline), transparent var(--border-hairline));
    background-size: calc(var(--signal-cell-x) * 1px) calc(var(--signal-cell-y) * 1px);
}
.site-signal-grid::after {
    /* Original full-width section lines, measured on the same document-aligned grid. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--signal-section-lines, none);
    background-repeat: no-repeat;
    pointer-events: none;
}
.signal-hero { isolation: isolate; }
.hero-signal-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    /* Fade the backing WITH the mesh, revealing the aligned static lines at quiet sections. */
    background-color: var(--color-canvas);
    mask-image: linear-gradient(transparent, #000 min(50%, calc(var(--signal-edge-fade) * 1px)), #000 max(50%, calc(100% - var(--signal-edge-fade) * 1px)), transparent);
}
.hero-signal-grid .signal-canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.signal-page .contact-section, .signal-page .policy-page { background-color: transparent; }
.signal-page .contact-section::before { display: none; }

::selection { color: var(--color-on-accent); background: var(--color-accent); }
[hidden] { display: none !important; }
html { scroll-padding-top: 88px; }

:where(h1, h2, h3, h4) {
    font-family: var(--font-body);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-heading);
    text-wrap: balance;
}

.hero h1 {
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--space-6);
}

:is(.store-page-header, .tool-page-header, .portfolio-header, .dashboard-header) h1 {
    font-size: var(--text-page);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}

.section-header h2, .contact-info h2 {
    font-size: var(--text-section);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}

.product-info h3 { font-size: var(--text-card); font-weight: var(--weight-bold); }
.hero p, .section-header p { font-size: var(--text-lead); line-height: var(--leading-body); }
.product-info p, .tool-panel p, .tool-panel li, .contact-info p { font-size: var(--text-body); line-height: var(--leading-body); }
.nav-links a { font-size: var(--text-small); font-weight: var(--weight-medium); }
.nav-links a[aria-current="page"] { color: var(--color-accent); }

.btn, .product-footer .btn {
    min-height: var(--control-height);
    padding: var(--control-padding-y) var(--control-padding-x);
    gap: var(--space-2);
    border: var(--border-control) solid var(--color-deep);
    border-bottom-width: var(--border-depth);
    border-radius: var(--radius-control);
    background: var(--color-panel);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-standard);
}

.btn:visited { color: var(--color-accent); }
.btn:hover { color: var(--color-text); background-color: var(--color-surface-hover); }
.btn:active { transform: translateY(var(--press-travel)); border-bottom-width: var(--border-control); }
.btn.btn--primary, .btn.btn--primary:visited { background: var(--color-accent); color: var(--color-on-accent); }
.btn.btn--primary:hover { background: var(--color-accent-hover); }
.btn.btn--quiet { color: var(--color-text); background: var(--color-section); border-color: var(--color-border); }
.btn.btn--quiet:hover { background: var(--color-panel); border-color: var(--color-border-strong); }
.btn:disabled, .btn[aria-disabled="true"], .btn.btn-disabled {
    color: var(--color-subtle);
    background: var(--color-section);
    border-color: var(--color-border-subtle);
    cursor: not-allowed;
    transform: none !important;
}

/* Intentional specialist component: Fusion node geometry and existing drag transforms. */
.hero-button-group .btn {
    min-height: 28px;
    padding: 4px 18px 7px;
    gap: 0;
    border-width: var(--border-hairline);
    border-radius: var(--radius-node);
    border-color: var(--node-edge);
    background-color: var(--node-face);
    background-image: linear-gradient(var(--node-title-line), var(--node-title-line));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 3px);
    background-size: 100% 2px;
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1;
    font-size: 13px;
    cursor: grab;
}
.hero-button-group .btn:hover { background-color: var(--node-face-hover); }

/* Conventional controls for phones, tablets, small windows and touch-first devices. */
@media (max-width: 1399px), (hover: none), (pointer: coarse) {
    .hero[data-signal-hero] {
        min-height: 0;
        padding-inline: var(--gutter);
        padding-block: clamp(64px, 9vw, 120px);
    }
    .hero-button-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-3);
        max-width: 640px;
        margin-inline: auto;
    }
    .hero-button-group .btn {
        min-width: 0;
        min-height: var(--space-12);
        padding: var(--control-padding-y) var(--control-padding-x);
        gap: var(--space-2);
        z-index: auto;
        overflow: hidden;
        border: var(--border-control) solid var(--color-border);
        border-bottom-width: var(--border-depth);
        border-radius: var(--radius-control);
        background: var(--color-panel);
        color: var(--color-text);
        font: var(--weight-bold) var(--text-small) / 1.15 var(--font-body);
        text-shadow: none;
        box-shadow: none;
        cursor: pointer;
        touch-action: manipulation;
        /* Override legacy mobile/drag transforms, including inline node offsets. */
        transform: none !important;
        transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-press);
    }
    .hero-button-group .btn:hover {
        background: var(--color-surface-hover);
        border-color: var(--color-border-strong);
        box-shadow: none;
    }
    .hero-button-group .btn:active {
        transform: translateY(var(--press-travel)) !important;
        border-bottom-width: var(--border-control);
        box-shadow: none;
    }
    .hero-button-group .btn[data-node-id="products"] {
        background: var(--color-accent);
        color: var(--color-on-accent);
        border-color: var(--color-deep);
    }
    .hero-button-group .btn[data-node-id="products"]:hover { background: var(--color-accent-hover); }
    .hero-button-group .btn::before, .hero-button-group .btn::after,
    .hero-button-group .btn > span::before, .hero-button-group .btn > span::after,
    .hero-button-group .hero-merge-node,
    .node-link-layer, .node-input-marker, .node-output-marker, .node-selection-box { display: none !important; }
    .hero-button-group .btn .hero-btn-icon {
        display: inline-block;
        width: var(--space-4);
        height: var(--space-4);
        flex: 0 0 var(--space-4);
        color: inherit;
        fill: currentColor;
    }
}
@media (max-width: 600px) {
    .hero[data-signal-hero] h1 { font-size: clamp(32px, 10vw, 48px); }
    .hero-button-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-button-group .btn[data-node-id="products"] { grid-column: 1 / -1; }
}

.product-card, .preset-card, .faq-item, .tool-panel, .release-card,
.auth-container, .upload-container, .details-card, .policy-card {
    border-radius: var(--radius-panel);
    border-width: var(--border-control);
    border-color: var(--color-border);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}
.product-card { transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-fast), border-color var(--duration-fast); }
.product-info { padding: var(--space-6); }
.preset-title { font-size: var(--text-small); font-weight: var(--weight-bold); }
.tag { border-radius: var(--radius-tag); font-size: var(--text-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); }
.tool-panel h2, .auth-container h2, .upload-container h2, .faq-item summary { font-weight: var(--weight-bold); }
.price { font-size: var(--text-card); font-weight: var(--weight-bold); }
.nav-user-dropdown, .mobile-menu-panel { border-radius: var(--radius-panel); box-shadow: var(--shadow-popover); }

.dry-form { gap: var(--space-5); }
.form-group { gap: var(--space-2); }
.form-group label, .email-label, .store-filter-label {
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
}
.dry-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.dry-form textarea, .dry-form select, .store-filter-select {
    min-height: var(--control-height);
    padding: var(--space-3);
    border: var(--border-control) solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-panel);
    color: var(--color-text);
    font: var(--weight-regular) var(--text-body) / 1.5 var(--font-body);
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.store-filter-select { padding-right: var(--space-8); font-size: var(--text-small); }
.dry-form :is(input, textarea, select):focus { border-color: var(--color-focus); background-color: var(--color-surface); }
.dry-form :is(input, textarea)::placeholder { color: var(--color-subtle); opacity: 1; }
.dry-form :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-accent); }
.contact-section .dry-form textarea { min-height: 144px; max-height: 420px; height: 144px; resize: vertical; }
.contact-form-status { border-radius: var(--radius-control); font-size: var(--text-small); }
.contact-form-status.is-error { color: var(--color-danger); border-color: var(--color-danger); background: rgb(255 139 131 / 0.08); }
.contact-form-status.is-success { color: var(--color-success); border-color: var(--color-success); background: rgb(166 227 161 / 0.08); }

.signal-page .faq-section { padding-block: var(--space-section); }
/* The full-width grid line replaces the inset footer rule without changing its spacing. */
.signal-page.signal-section-lines .footer-bottom { border-top-color: transparent; }
.faq-item summary { gap: var(--space-4); font-weight: var(--weight-semibold); }
.faq-item summary::after { flex-shrink: 0; }
.faq-item[open] summary { border-bottom-color: var(--color-border-subtle); }
.faq-item .faq-content { background: var(--color-surface); color: var(--color-muted); }
.tool-back-link { min-width: var(--control-height); min-height: var(--control-height); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: var(--content-wide);
    margin-inline: auto;
    border-top-color: var(--color-border-subtle);
}
.footer-bottom > p { order: -1; margin: 0; }
.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-3);
    font-size: var(--text-small);
}
.footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    color: var(--color-muted);
    text-decoration: none;
    text-underline-offset: var(--space-1);
}
.footer-legal a:hover { color: var(--color-text); text-decoration: underline; }
.site-footer { padding: var(--space-5) var(--gutter); margin-top: auto; }
.site-footer .footer-legal { margin-top: 0; }
.footer-bottom .footer-legal { margin-top: 0; }
.policy-page .policy-card { padding: clamp(24px, 4vw, 48px); }
.policy-page .policy-card h2 { color: var(--color-text); font-size: var(--text-card); line-height: var(--leading-heading); }
.policy-page .policy-card :is(p, li) { overflow-wrap: anywhere; }

/* Intentional priority: older pages suppress outlines, including on card overlays. */
:is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: var(--focus-width) solid var(--color-focus) !important;
    outline-offset: var(--focus-offset) !important;
}
.product-card:focus-within { border-color: var(--color-focus); }

@media (hover: hover) and (pointer: fine) {
    .product-card:hover { transform: translateY(var(--hover-lift)); border-color: var(--color-border-strong); }
}
@media (max-width: 768px) {
    .navbar { padding: var(--space-4) var(--gutter); gap: var(--space-2); }
    .navbar .logo-link { flex-basis: auto; }
    .nav-links { gap: var(--space-1) var(--space-3); flex-wrap: wrap; }
    .nav-links a { display: inline-flex; align-items: center; min-height: var(--control-height); font-size: var(--text-small); }
    .auth-container { width: calc(100% - 2 * var(--gutter)); max-width: 440px; margin: var(--space-10) auto; padding: var(--space-6); }
    .mobile-menu-toggle { width: var(--space-12); height: var(--space-12); }
    .mobile-menu-panel { top: var(--space-16); }
    .footer-bottom { justify-content: center; }
    .product-info { padding: var(--space-5); }
    .product-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .product-card:hover { transform: none; }
}