/*
 * logixcel.com design tokens: Dusk, Logixcel's own theme (DESIGN.md), from
 * the round 5 mockup (https://claude.ai/artifact/DHa9DhYCxAmiLoViumwjnU).
 *
 * Colour: dark only, on the Carbon ground, whatever the system setting: a
 * white page loses the mystery. Colour comes from the logo's white and green;
 * the Neon accent is kept for the main button and highlights.
 *
 * Type: Tomorrow for headings, Hanken Grotesk for text, both from
 * fonts.bunny.net. With the font service down, the system's own sans stands in.
 * Nothing is set under 16px.
 *
 * The token names the pages already use are kept, so every page takes Dusk
 * without edits. After them come the scales the sections draw on: display
 * sizes, larger spacing steps, radii, shadows, blur, durations, easings and
 * layers.
 */
@import url('https://fonts.bunny.net/css?family=hanken-grotesk:400,500,600,700|tomorrow:500,600&display=swap');

:root {
    /* The Carbon ground, and the cards, panels and inputs set on it. */
    --background: #070908;
    --foreground: #eef2f0;
    --card: #0e1110;
    --card-foreground: #eef2f0;
    --popover: #0e1110;
    --popover-foreground: #eef2f0;
    --muted: #0e1110;
    --muted-foreground: #a0aba6;
    --secondary: #0b0d0c;
    --secondary-foreground: #eef2f0;
    --accent: #0b0d0c;
    --accent-foreground: #eef2f0;
    --border: #1c211f;
    --border-strong: #2c3431;
    --input: #2c3431;
    --ring: #eef2f0;
    --overlay: rgb(0 0 0 / 0.6);

    /* Neon: the main button, links and highlights. */
    --primary: #2bf27a;
    --primary-hover: #5cf596;
    --primary-foreground: #03160b;

    /* The home page's closing call to action: a raised Carbon panel with its
       own white text, button and focus ring, quiet beside the Neon. */
    --brand: #0e1110;
    --brand-foreground: #eef2f0;

    /* Neon again: the logo's L and dot, dots and fills, and green text. */
    --green: #2bf27a;
    --green-text: #2bf27a;
    --tint: rgb(43 242 122 / 0.12);
    --glow: rgb(43 242 122 / 0.16);

    /* Chips over photos, and the lines of the Beams page head. */
    --glass: rgb(7 9 8 / 0.6);
    --glass-foreground: #eef2f0;
    --grid-line: rgb(255 255 255 / 0.06);

    /* The sample circuit board on the home page: the board, its copper, the
       silkscreen and the parts on it. */
    --pcb: #0b3d47;
    --copper: #d9a066;
    --silk: #eef3f8;
    --chip: #15181d;

    /* Status. --destructive is also its own text colour, on the ground. Each other
       foreground is the text set on its fill; --warning-text is amber on the ground
       or on --warning-tint, an emergency that reads as a warning whatever the brand. */
    --destructive: #ff7a7a;
    --destructive-foreground: #ff7a7a;
    --success: #2bf27a;
    --success-foreground: #03160b;
    --info: #86d9ff;
    --info-foreground: #04121a;
    --warning: #f6b451;
    --warning-foreground: #1d1204;
    --warning-tint: rgb(246 180 81 / 0.2);
    --warning-text: #f6b451;

    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -12px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 20px 48px -16px rgb(0 0 0 / 0.55);

    --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-heading: 'Tomorrow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --radius: 0.625rem;
}

/* The scales. Spacing, type, radius and motion keep Tailwind's steps and add the mockup's. */
:root {
    color-scheme: dark;

    /* Spacing: a 4px step, with the half steps and larger steps the sections use. */
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Type. Nothing is under 16px, so the small steps meet there. Body text is
       18–20px, a touch larger than the nav and buttons. Display sizes grow with
       the window: section headings, page heads, the home hero, and the
       footer's full-width name. */
    --text-2xs: 1rem;
    --text-xs: 1rem;
    --text-sm: 1rem;
    --text-base: 1rem;
    --text-ui: 1.0625rem;
    --text-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-lead: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
    --text-display-sm: clamp(1.8125rem, 3.3vw, 2.5rem);
    --text-display-md: clamp(2.125rem, 1.4rem + 2.75vw, 4rem);
    --text-display-lg: clamp(2.125rem, 4.6vw, 3.5rem);
    --text-display-xl: clamp(4.5rem, 16.5vw, 14.75rem);
    --leading-none: 1;
    --leading-display: 1.04;
    --leading-heading: 1.1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.7;
    --tracking-display: -0.03em;
    --tracking-heading: -0.02em;
    --tracking-tight: -0.025em;
    --tracking-snug: -0.012em;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.06em;
    --tracking-widest: 0.11em;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --measure: 46ch;

    /* Corners: buttons and inputs a touch tighter, cards a touch rounder, then
       the mockup's large cards, photos and closing panel, and pills and dots. */
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --radius-4xl: 2rem;
    --radius-full: 9999px;

    /* Surfaces: hairline borders and a faint shadow under cards and buttons; the
       mockup's softer, deeper shadows for raised cards (--shadow-md, --shadow-lg,
       above with their dark values), a halo for chosen items, and a button's lift. */
    --border-width: 1px;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-halo: 0 0 0 3px var(--tint);
    --shadow-lift: 0 10px 22px -10px var(--primary);
    --focus-width: 2px;
    --focus-offset: 2px;

    /* Blur: glass chips, the header glass, and the soft background blobs. */
    --blur-sm: 8px;
    --blur-md: 14px;
    --blur-lg: 64px;

    /* Motion: transitions, entrances, loops, and the steps between staggered items. */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-medium: 300ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    --duration-slowest: 900ms;
    --duration-loop-fast: 1.2s;
    --duration-loop: 2s;
    --duration-loop-slow: 7s;
    --duration-demo: 8s;
    --duration-drift: 26s;
    --duration-marquee: 46s;
    --stagger-1: 70ms;
    --stagger-2: 140ms;
    --stagger-3: 210ms;
    --stagger-4: 280ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

    /* Layers: behind, raised within a card or photo, the sticky header. */
    --z-behind: -1;
    --z-base: 0;
    --z-raised: 1;
    --z-overlay: 2;
    --z-top: 3;
    --z-header: 30;

    /* Layout. Media queries can't read custom properties, so they repeat these values. */
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 56.25rem;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-6xl: 72rem;
    --tap-target: 2.75rem;
    --button-height: 3.25rem;
    --icon-size-sm: 1rem;
    --icon-size: 1.25rem;
    --icon-size-lg: 1.5rem;
    --logo-height: 1.5rem;
}