/* Lifted verbatim from /Users/maziar/Documents/c/neWeb/tunnelsIoLanding/index.html
   (the entire <style> block) so tcloud-web shares the same design language.
   Only difference: @font-face URLs point to /static/fonts/ instead of /fonts/. */

/* ─── Font ─── */
@font-face {
    font-family: 'Styrene B';
    src: url('/static/fonts/styrene-b-regular.woff2') format('woff2'),
         url('/static/fonts/styrene-b-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Theme: Light ─── */
:root, [data-theme="light"] {
    color-scheme: light;
    --n-50:  #FDFCFA; --n-100: #F8F7F5; --n-200: #F0EFED; --n-300: #E0DFDD; --n-400: #C0BFBD;
    --n-500: #9B9A98; --n-600: #6B6A68; --n-700: #4B4A48; --n-800: #2B2A28; --n-900: #1B1A18;

    --ivory: #FDFCFA; --surface: #FFFFFF;

    --color-sky: #87CEEB; --color-sky-deep: #6AB4D6;
    --color-clay: #D4A574; --color-clay-deep: #C49464;
    --color-heather: #B8A9C9; --color-heather-deep: #9E8FB5;
    --color-coral: #FF6B6B; --color-olive: #808000; --color-success: #67C090;

    --glass:        rgba(255,255,255,0.80);
    --glass-strong: rgba(255,255,255,0.95);

    --badge-sky-bg:      rgba(135,206,235,0.08); --badge-sky-text:    #5A9BB5; --badge-sky-ring:    rgba(135,206,235,0.19);
    --badge-clay-bg:     rgba(212,165,116,0.08); --badge-clay-text:   #B0854E; --badge-clay-ring:   rgba(212,165,116,0.19);
    --badge-heather-bg:  rgba(184,169,201,0.10); --badge-heather-text:#8A78A0; --badge-heather-ring:rgba(184,169,201,0.22);
    --badge-success-bg:  rgba(103,192,144,0.10); --badge-success-text:#3F8B65; --badge-success-ring:rgba(103,192,144,0.25);
    --badge-coral-bg:    rgba(255,107,107,0.08); --badge-coral-text:  #C24A4A; --badge-coral-ring:  rgba(255,107,107,0.22);

    --dot-sky:     rgba(135,206,235,0.60);
    --dot-clay:    rgba(212,165,116,0.60);
    --dot-success: #67C090;
    --dot-heather: rgba(184,169,201,0.70);

    --icon-bg-sky:     rgba(135,206,235,0.15);
    --icon-bg-clay:    rgba(212,165,116,0.15);
    --icon-bg-heather: rgba(184,169,201,0.15);
    --icon-bg-success: rgba(103,192,144,0.15);

    --code-bg: #F4F2EE; --code-text: #2B2A28;

    --mesh-opacity: 0.12; --mesh-section: 0.06;
    --card-shadow:    0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
    --card-shadow-sky:  var(--card-shadow);
    --card-shadow-clay: var(--card-shadow);

    --btn-primary-bg: #1B1A18; --btn-primary-text: #FDFCFA; --btn-primary-hover: #2B2A28;
}

/* ─── Theme: Dark — claude.ai design language ─── */
[data-theme="dark"] {
    color-scheme: dark;
    --n-50: #1F1E1D; --n-100: #30302E; --n-200: #3A3836; --n-300: #484543; --n-400: #9C9A92;
    --n-500: #9C9A92; --n-600: #C2C0B6; --n-700: #C2C0B6; --n-800: #E8E6E0; --n-900: #FAF9F5;

    --ivory: #262624; --surface: #30302E;

    --color-sky: #74ABE2; --color-sky-deep: #5A90C4;
    --color-clay: #D4915A; --color-clay-deep: #BA7840;
    --color-heather: #A896BC; --color-heather-deep: #9480A8;
    --color-coral: #FF9494; --color-olive: #B8B848; --color-success: #7FCFA1;

    --glass:        rgba(26,25,24,0.92);
    --glass-strong: rgba(26,25,24,0.97);

    --badge-sky-bg:      rgba(116,171,226,0.10); --badge-sky-text:    #74ABE2; --badge-sky-ring:    rgba(116,171,226,0.22);
    --badge-clay-bg:     rgba(212,145,90,0.10);  --badge-clay-text:   #D4915A; --badge-clay-ring:   rgba(212,145,90,0.22);
    --badge-heather-bg:  rgba(168,150,188,0.13); --badge-heather-text:#C5B5D6; --badge-heather-ring:rgba(168,150,188,0.28);
    --badge-success-bg:  rgba(127,207,161,0.10); --badge-success-text:#7FCFA1; --badge-success-ring:rgba(127,207,161,0.28);
    --badge-coral-bg:    rgba(255,148,148,0.10); --badge-coral-text:  #FF9494; --badge-coral-ring:  rgba(255,148,148,0.28);

    --dot-sky:     rgba(116,171,226,0.70);
    --dot-clay:    rgba(212,145,90,0.70);
    --dot-success: #7FCFA1;
    --dot-heather: rgba(168,150,188,0.80);

    --icon-bg-sky:     rgba(116,171,226,0.11);
    --icon-bg-clay:    rgba(212,145,90,0.11);
    --icon-bg-heather: rgba(168,150,188,0.11);
    --icon-bg-success: rgba(127,207,161,0.11);

    --code-bg: #1F1E1D; --code-text: #E8E6E0;

    --mesh-opacity: 0; --mesh-section: 0;
    --card-shadow:      0 0 0 1px rgba(222,220,209,0.09), 0 4px 16px rgba(0,0,0,0.30);
    --card-shadow-sky:  0 0 0 1px rgba(116,171,226,0.18), 0 4px 20px rgba(116,171,226,0.07);
    --card-shadow-clay: 0 0 0 1px rgba(212,145,90,0.18), 0 4px 20px rgba(212,145,90,0.07);

    --btn-primary-bg: #FAF9F5; --btn-primary-text: #1B1A18; --btn-primary-hover: #E8E6E0;
}

/* ─── Smooth theme switch ─── */
.theme-shifting,
.theme-shifting *,
.theme-shifting *::before,
.theme-shifting *::after {
    transition: background-color 0.35s ease, color 0.25s ease, border-color 0.35s ease,
                box-shadow 0.35s ease, fill 0.25s ease, stroke 0.25s ease, opacity 0.35s ease !important;
    transition-delay: 0s !important;
}

/* ─── Toggle icon visibility ─── */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="dark"]  .icon-moon { display: none; }

/* ─── Base ─── */
html { scroll-behavior: smooth; }
body {
    font-family: 'Styrene B', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
    color: var(--n-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* ─── Themed surfaces ─── */
.glass-nav  { background: var(--glass); }
.glass-menu { background: var(--glass-strong); }
.bg-surface { background-color: var(--surface); }
.surface-translucent { background-color: var(--glass); }

/* ─── Badges ─── */
.badge-sky     { background-color: var(--badge-sky-bg);     color: var(--badge-sky-text);     border-color: var(--badge-sky-ring); }
.badge-clay    { background-color: var(--badge-clay-bg);    color: var(--badge-clay-text);    border-color: var(--badge-clay-ring); }
.badge-heather { background-color: var(--badge-heather-bg); color: var(--badge-heather-text); border-color: var(--badge-heather-ring); }
.badge-success { background-color: var(--badge-success-bg); color: var(--badge-success-text); border-color: var(--badge-success-ring); }
.badge-coral   { background-color: var(--badge-coral-bg);   color: var(--badge-coral-text);   border-color: var(--badge-coral-ring); }

/* ─── Dots ─── */
.dot-sky     { background-color: var(--dot-sky); }
.dot-clay    { background-color: var(--dot-clay); }
.dot-success { background-color: var(--dot-success); }
.dot-heather { background-color: var(--dot-heather); }

/* ─── Card hover ─── */
.card-hover:hover { box-shadow: var(--card-shadow); }

/* ─── Code/mono ─── */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-feature-settings: "calt" 0;
}
.code-pill {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 0.10rem 0.45rem;
    border-radius: 0.375rem;
    font-size: 0.78em;
}

/* ─── Buttons ─── */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover { background-color: var(--btn-primary-hover); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
    color: var(--n-900);
    border-color: var(--n-300);
    background-color: transparent;
}
.btn-secondary:hover {
    background-color: var(--n-100);
    border-color: var(--n-400);
}

/* ─── Animations ─── */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
.live-dot { animation: pulse-dot 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

/* ─── Forms ─── */
.input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--n-300);
    background-color: var(--surface);
    color: var(--n-900);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px var(--badge-sky-bg);
}