/* v2, 2026-04-24 glass tokens merged */
/* ============================================================
   HubScope Design System, colors_and_type.css
   Extracted from HubScopeOfficial/hubscope.io (dev)
   Source of truth: src/styles/globals.css (HSL tokens)
   ============================================================ */

/* -------- Fonts: Satoshi (product) + Geist (site) -------- */
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Variable.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-VariableItalic.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("./fonts/Satoshi-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Geist Sans is the default site font in production (next/font/google).
   We load the closest match from Google Fonts here, swap in the real files if needed. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
    /* =========== TYPE FAMILIES =========== */
    --font-sans: "Geist", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Satoshi", "Geist", sans-serif;       /* hero + marketing */
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* =========== TYPE SCALE ===========
       Marketing uses very tight, very large headlines. Tracking gets
       tighter the bigger you go. */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --text-6xl: 60px;
    --text-7xl: 72px;
    --text-8xl: 96px;

    --leading-hero: 0.85;   /* hero headlines, cramped, confident */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-hero: -0.02em; /* headlines */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    /* =========== CORE THEME (light, the only scheme) =========== */
    --background: hsl(210 40% 98%);       /* near-white off-blue */
    --foreground: hsl(165 80% 4%);        /* near-black green */
    --card: hsl(165 25% 97%);
    --card-foreground: hsl(165 80% 4%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(240 10% 3.9%);

    --primary: hsl(165 80% 34%);          /* #289F85 HubScope emerald */
    --primary-foreground: hsl(0 0% 98%);

    --secondary: hsl(165 30% 96%);
    --secondary-foreground: hsl(165 80% 4%);

    --muted: hsl(165 20% 96%);
    --muted-foreground: hsl(165 60% 25%);

    --accent: hsl(165 20% 92%);
    --accent-foreground: hsl(165 80% 4%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(165 20% 90%);
    --input: hsl(165 20% 90%);
    --ring: hsl(165 80% 34%);

    /* =========== BRAND =========== */
    --brand-primary: #289F85;    /* main emerald  , hsl(165 80% 34%) */
    --brand-secondary: #256C8F;  /* deep teal-blue, hsl(210 65% 35%) */
    --brand-accent-1: #4E4CC2;   /* indigo        , hsl(251 70% 45%) */
    --brand-accent-2: #6E2C95;   /* deep purple   , hsl(280 60% 40%) */

    /* Hero dark surface (aurora backdrop starts from these) */
    --hero-bg: #0b1220;

    /* =========== STATUS (pastel bg + saturated fg, always paired) =========== */
    --status-green-bg: hsl(144 55% 90%);
    --status-green-fg: hsl(144 60% 25%);
    --status-lime-bg: hsl(133 58% 90%);
    --status-lime-fg: hsl(133 60% 25%);
    --status-yellow-bg: hsl(46 75% 90%);
    --status-yellow-fg: hsl(46 80% 25%);
    --status-orange-bg: hsl(30 90% 90%);
    --status-orange-fg: hsl(30 85% 25%);
    --status-red-bg: hsl(0 85% 90%);
    --status-red-fg: hsl(0 85% 30%);

    /* =========== CATEGORY (data chips, tags) =========== */
    --category-blue-bg: hsl(220 80% 90%);
    --category-blue-fg: hsl(220 80% 25%);
    --category-purple-bg: hsl(280 80% 90%);
    --category-purple-fg: hsl(280 80% 25%);
    --category-pink-bg: hsl(330 80% 90%);
    --category-pink-fg: hsl(330 80% 25%);
    --category-teal-bg: hsl(180 80% 90%);
    --category-teal-fg: hsl(180 80% 25%);
    --category-indigo-bg: hsl(240 80% 90%);
    --category-indigo-fg: hsl(240 80% 25%);
    --category-magenta-bg: hsl(300 80% 90%);
    --category-magenta-fg: hsl(300 80% 25%);
    --category-cyan-bg: hsl(210 80% 90%);
    --category-cyan-fg: hsl(210 80% 25%);
    --category-gray-bg: hsl(220 20% 90%);
    --category-gray-fg: hsl(220 20% 25%);

    /* =========== CHARTS (ordinal) =========== */
    --chart-1: hsl(165 80% 34%);
    --chart-2: hsl(195 70% 45%);
    --chart-3: hsl(215 65% 50%);
    --chart-4: hsl(245 60% 55%);
    --chart-5: hsl(275 55% 60%);

    /* =========== PRODUCT NEUTRALS ===========
       The app UI uses zinc/slate from tailwind because everything is
       flat whites + cool grays. Keep these available as tokens. */
    --zinc-50:  #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;

    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* =========== RADII =========== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;        /* default */
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* =========== SHADOWS =========== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Signature frosted-glass card shadow from the hero */
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --shadow-glass-hover: 0 16px 48px 0 rgba(31, 38, 135, 0.6);

    /* Primary-tinted hover shadow (see Button `default` variant) */
    --shadow-primary: 0 10px 15px -3px hsl(165 80% 34% / 0.2);

    /* =========== SPACING SCALE (4pt grid) =========== */
    --space-0: 0;
    --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-24: 96px;
    --space-32: 128px;

    /* =========== TRANSITIONS =========== */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* @kind other */ /* used on landing */
    --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1); /* @kind other */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
    --duration-fast: 150ms; /* @kind other */
    --duration-base: 300ms; /* @kind other */
    --duration-slow: 700ms; /* @kind other */
    --duration-hero: 1000ms; /* @kind other */
}

/* =========== SEMANTIC ELEMENT STYLES =========== */
html, body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-5xl), 6vw, var(--text-8xl));
    font-weight: var(--weight-light);       /* hero: light + a black accent word */
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
    color: var(--foreground);
}
h2, .h2 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--foreground);
}
h3, .h3 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}
h4, .h4 {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}
p, .p {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--foreground);
}
.lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: color-mix(in oklab, var(--foreground) 70%, transparent);
    font-weight: var(--weight-light);
}
.eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}
small, .small {
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}
code, pre, .mono {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

/* Utility: the signature "gradient word" used in the hero */
.gradient-word {
    background: linear-gradient(to right, #60a5fa, #2dd4bf, #3b82f6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hs-gradient 8s ease infinite;
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
}
@keyframes hs-gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================================
   LANDSCAPE GLASS TOKENS
   The MapView (landscape) is the visual heart of HubScope. Every
   floating surface inside it, nodes, toolbars, panels, legends
   uses this frosted-glass language. Mirrors
   src/app/(protected)/workspace/.../landscape-glass-tokens.ts.
   ============================================================ */
:root {
    /* Canvas under the map, a very slight cool tint so white nodes read as floating glass */
    --map-canvas: #f8fafc;            /* slate-50 */
    --map-canvas-grid: #e2e8f0;       /* slate-200, dot-grid colour */

    /* NODE, the graph node. White at 70% on slate-50 canvas. */
    --glass-node-bg: rgba(255, 255, 255, 0.70);
    --glass-node-blur: 12px;
    --glass-node-border: rgba(148, 163, 184, 0.35);         /* slate-400/35 */
    --glass-node-border-active: rgba(100, 116, 139, 0.50);  /* slate-500/50 */
    --glass-node-border-width: 1.5px;
    --glass-node-radius: 12px;
    --glass-node-shadow:        0 1px 4px rgba(0,0,0,0.04),  inset 0 1px 0 rgba(255,255,255,0.8);
    --glass-node-shadow-hover:  0 3px 10px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
    --glass-node-shadow-active: 0 4px 16px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1.0);

    /* PANEL, toolbar dropdowns, legends, sheets. More opaque than nodes. */
    --glass-panel-bg: rgba(250, 250, 249, 0.95);
    --glass-panel-blur: 4px;
    --glass-panel-border: rgba(212, 212, 216, 0.9);   /* zinc-300/90 */
    --glass-panel-radius: 16px;
    --glass-panel-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);

    /* PILL, floating toolbar shell, status badges. Same as panel, full round. */
    --glass-pill-radius: 9999px;

    /* Edge colours on the graph */
    --map-edge: #cbd5e1;          /* slate-300, default edge */
    --map-edge-strong: #64748b;   /* slate-500, selected/traced */
    --map-handle: #cbd5e1;        /* handle dot */
    --map-handle-border: #94a3b8; /* handle ring */
}

/* === Glass surface utility classes (mirror the .ts export names) === */
.glass-node {
    background: var(--glass-node-bg);
    border: var(--glass-node-border-width) solid var(--glass-node-border);
    border-radius: var(--glass-node-radius);
    box-shadow: var(--glass-node-shadow);
    backdrop-filter: blur(var(--glass-node-blur));
    -webkit-backdrop-filter: blur(var(--glass-node-blur));
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.glass-node:hover  { box-shadow: var(--glass-node-shadow-hover); }
.glass-node.is-active,
.glass-node.is-selected {
    box-shadow: var(--glass-node-shadow-active);
    border-color: var(--glass-node-border-active);
}

.glass-panel {
    background: var(--glass-panel-bg);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--glass-panel-radius);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: blur(var(--glass-panel-blur));
    -webkit-backdrop-filter: blur(var(--glass-panel-blur));
}
.glass-pill {
    background: var(--glass-panel-bg);
    border: 1px solid var(--glass-panel-border);
    border-radius: var(--glass-pill-radius);
    box-shadow: var(--glass-panel-shadow);
    backdrop-filter: blur(var(--glass-panel-blur));
    -webkit-backdrop-filter: blur(var(--glass-panel-blur));
}

/* Dot-grid canvas background, the default under MapView */
.map-canvas {
    background-color: var(--map-canvas);
    background-image: radial-gradient(circle, var(--map-canvas-grid) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* Toolbar section label, used throughout the landscape UI */
.landscape-section-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--slate-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Marketing aurora glass (dark-surface), retained for the hero */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-glass);
    border-radius: var(--radius-2xl);
    backdrop-filter: blur(8px);
}

/* ============================================================
   BUTTONS  ·  canonical .hs-btn family
   One base + size modifiers + emphasis variants. Used on the
   marketing site and product chrome. Radius = --radius (8px),
   never a pill (pills are reserved for nav/floating chrome).
   ------------------------------------------------------------
   Base:        .hs-btn
   Sizes:       .hs-btn--sm (36) · default (44) · .hs-btn--lg (52)
   Emphasis:    --primary  solid emerald  (the workhorse CTA)
                --gradient emerald→teal→indigo (hero / max emphasis)
                --secondary white + hairline
                --ghost     transparent + hairline
                --subtle    emerald tint
   ============================================================ */
.hs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: transform 160ms var(--ease-out), box-shadow 220ms var(--ease-out),
                background 160ms, background-position 520ms var(--ease-out),
                border-color 160ms, color 160ms;
    -webkit-tap-highlight-color: transparent;
}
.hs-btn:active { transform: translateY(0) scale(0.97); }
.hs-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.hs-btn > svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* sizes */
.hs-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; gap: 6px; }
.hs-btn--sm > svg { width: 14px; height: 14px; }
.hs-btn--lg { height: 52px; padding: 0 26px; font-size: 15px; gap: 10px; }

/* primary — the original solid emerald workhorse */
.hs-btn--primary {
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.hs-btn--primary:hover {
    background: hsl(165 80% 30%);
    box-shadow: var(--shadow-primary);
    transform: translateY(-1px);
}

/* gradient — brand emerald→teal→indigo; max-emphasis hero CTA.
   Leads with emerald so it sits in the brand-accent family; the
   gradient only resolves toward indigo on hover. */
.hs-btn--gradient {
    color: #fff;
    background-image: linear-gradient(108deg, var(--brand-primary) 0%, var(--brand-secondary) 52%, var(--brand-accent-1) 100%);
    background-size: 165% 100%;
    background-position: 0% 50%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.hs-btn--gradient:hover {
    background-position: 100% 50%;
    box-shadow: 0 10px 22px -8px rgba(78, 76, 194, 0.50);
    transform: translateY(-1px);
}
/* play affordance for video/demo triggers */
.hs-btn--gradient .hs-btn-play,
.hs-btn--primary .hs-btn-play { fill: currentColor; transition: transform 260ms var(--ease-out); }
.hs-btn--gradient:hover .hs-btn-play,
.hs-btn--primary:hover .hs-btn-play { transform: translateX(2px); }

/* demo CTA composition — rounded-2xl frosted-glass shell + trailing
   frosted play chip. Use on max-emphasis "watch / see it in action". */
.hs-btn--demo {
    border-radius: var(--radius-full);
    padding-right: 8px;
    gap: 12px;
    border: 1.5px solid #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 1px 2px rgba(15, 23, 42, 0.12);
}
.hs-btn--demo:hover {
    border-color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 10px 22px -8px rgba(78, 76, 194, 0.50);
}
.hs-btn--demo.hs-btn--lg { padding-left: 24px; }
/* frosted glass icon chip — mirrors the frosted map panel in the CTA banner */
.hs-btn-iconframe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 260ms var(--ease-out), background 260ms, box-shadow 260ms;
}
.hs-btn-iconframe svg { width: 11px; height: 11px; flex: 0 0 auto; fill: #fff; }
.hs-btn--sm .hs-btn-iconframe { width: 26px; height: 26px; flex-basis: 26px; }
.hs-btn:hover .hs-btn-iconframe {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.07);
}

/* secondary — white surface, hairline border */
.hs-btn--secondary {
    background: #fff;
    color: var(--slate-800);
    border-color: var(--slate-200);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hs-btn--secondary:hover { border-color: var(--slate-300); background: var(--zinc-50); transform: translateY(-1px); }

/* ghost — transparent, hairline border */
.hs-btn--ghost {
    background: transparent;
    color: var(--slate-700);
    border-color: rgba(15, 23, 42, 0.12);
}
.hs-btn--ghost:hover { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.22); }

/* subtle — emerald tint, no border */
.hs-btn--subtle {
    background: rgba(40, 159, 133, 0.10);
    color: var(--brand-primary);
}
.hs-btn--subtle:hover { background: rgba(40, 159, 133, 0.16); }

@media (prefers-reduced-motion: reduce) {
    .hs-btn { transition: background 160ms, border-color 160ms, color 160ms; }
    .hs-btn:hover { transform: none; }
}