/*
 * Public CSS contract for `@nordcom/nordstar`.
 *
 * Tailwind v4 consumers: `@import "@nordcom/nordstar";` after `@import "tailwindcss";`.
 * Tokens declared via @theme become utility classes (bg-primary, font-heading, etc.).
 *
 * Override values by setting --nordstar-* variables in :root from your own CSS,
 * or pass a `theme` prop to <NordstarProvider/>.
 *
 * NOTE: @source directives are appended to the published version of this file
 *       by scripts/build-css.mjs. They are NOT present in the source.
 */

@theme {
    /* Colors — HSL components for clean alpha modifiers (bg-primary/50). */
    --color-foreground: hsl(var(--nordstar-color-foreground, 0 0% 100%));
    --color-foreground-highlight: hsl(var(--nordstar-color-foreground-highlight, 0 0% 51%));
    --color-background: hsl(var(--nordstar-color-background, 0 0% 0%));
    --color-background-highlight: hsl(var(--nordstar-color-background-highlight, 0 0% 15%));
    --color-primary: hsl(var(--nordstar-color-primary, 220 50% 50%));
    --color-primary-foreground: hsl(var(--nordstar-color-primary-foreground, 0 0% 100%));
    --color-secondary: hsl(var(--nordstar-color-secondary, 280 50% 50%));
    --color-secondary-foreground: hsl(var(--nordstar-color-secondary-foreground, 0 0% 100%));
    --color-error: hsl(var(--nordstar-color-error, 0 51% 49%));

    /* Fonts. */
    --font-heading: var(--nordstar-font-heading, var(--nordstar-font-sans, var(--nordstar-font-fallback)));
    --font-body: var(--nordstar-font-body, var(--nordstar-font-sans, var(--nordstar-font-fallback)));
    --font-sans: var(--nordstar-font-sans, var(--nordstar-font-fallback));
    --font-mono: var(--nordstar-font-mono, monospace);

    /* Borders — referenced as border-1/2/4 (custom Nordstar widths). */
    --border-width-1: var(--nordstar-border-width-small, 1px);
    --border-width-2: var(--nordstar-border-width, 2px);
    --border-width-4: var(--nordstar-border-width-large, 4px);

    /*
     * Easing — characterful curves shared across the system.
     * `ease-out-soft` decelerates hard (good for entrances); `ease-spring`
     * overshoots a touch (good for toggles/presses that should feel physical).
     */
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

    /*
     * Elevation — a three-step shadow scale tuned to read on the near-black
     * default surface (a tight contact shadow layered under a soft ambient one).
     * `shadow-raised` lifts resting surfaces (cards, buttons); `shadow-overlay`
     * and `shadow-floating` sit under portalled surfaces (menus, tooltips).
     */
    --shadow-raised: 0 1px 2px -1px hsl(0 0% 0% / 0.55), 0 6px 16px -8px hsl(0 0% 0% / 0.45);
    --shadow-overlay: 0 8px 24px -6px hsl(0 0% 0% / 0.65), 0 4px 10px -4px hsl(0 0% 0% / 0.5);
    --shadow-floating: 0 18px 48px -12px hsl(0 0% 0% / 0.72), 0 6px 16px -6px hsl(0 0% 0% / 0.55);

    /*
     * Overlay entrance choreography. Radix unmounts portalled surfaces on close,
     * so only the enter is animated; the global prefers-reduced-motion reset
     * neutralises it for users who opt out.
     */
    --animate-overlay-in: overlay-in 0.16s var(--ease-out-soft);

    /*
     * Disclosure (accordion) height choreography, driven by the height Radix
     * measures onto `--radix-accordion-content-height`. Both directions animate
     * because the content stays mounted while collapsing.
     */
    --animate-accordion-down: accordion-down 0.2s var(--ease-out-soft);
    --animate-accordion-up: accordion-up 0.2s var(--ease-out-soft);

    /* Inheritance helpers (preserves text-inherit / font-inherit semantics from v3 config). */
    --text-inherit: inherit;
    --font-weight-inherit: inherit;

    @keyframes overlay-in {
        from {
            opacity: 0;
            transform: translateY(-0.25rem) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes accordion-down {
        from {
            height: 0;
        }
        to {
            height: var(--radix-accordion-content-height);
        }
    }

    @keyframes accordion-up {
        from {
            height: var(--radix-accordion-content-height);
        }
        to {
            height: 0;
        }
    }
}

/* :root baseline — works without <NordstarProvider/>. */
:root {
    --nordstar-font-fallback:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue",
        sans-serif;

    --nordstar-border-width-small: 0.138rem;
    --nordstar-border-width: 0.2rem;
    --nordstar-border-width-large: 0.29rem;
    --nordstar-border-radius: 0.45rem;

    --nordstar-layout-page-width: min(1200px, 100% - 2rem);
    --nordstar-layout-page-spacing: 1rem;
    --nordstar-layout-section-spacing: 1rem;
    --nordstar-layout-section-padding: 1.75rem;
    --nordstar-layout-block-padding: 1rem;

    --nordstar-duration-short: 0.25s;
    --nordstar-duration-medium: 0.5s;
    font-family: var(--font-sans);
    color: hsl(var(--nordstar-color-foreground, 0 0% 100%));
    background: hsl(var(--nordstar-color-background, 0 0% 0%));

    /* Engine/platform-specific tweaks */
    -webkit-text-size-adjust: 100%;
}

@layer base {
    a,
    button,
    [role="button"],
    input,
    select,
    textarea,
    img,
    svg {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
}

/*
 * Honor the user's reduced-motion preference. Only applies when the OS-level
 * setting is enabled, so it never removes motion the user hasn't opted out of.
 */
@media (prefers-reduced-motion: reduce) {
    /* biome-ignore-start lint/complexity/noImportantStyles: a universal reduced-motion reset must override Tailwind's transition/animation utilities, which a `*` selector can only do with !important */
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* biome-ignore-end lint/complexity/noImportantStyles: see above */
}


/* @source directive appended at build time. */
@source "./";