/* src/components/basic/XWUIBox/XWUIBox.css */
/**
 * XWUIBox Component Styles
 * Basic layout container
 */

.xwui-box-container {
    /* Container has no specific styles */
}

.xwui-box {
    /* Box element - styles applied via inline styles or className */
    box-sizing: border-box;
    color: var(--text-primary, inherit);
}

/* Card-like surface · token-driven, so a theme switch restyles every surface.
   Replaces bespoke .xw-surface utility classes in host apps. */
.xwui-box-surface {
    /* Same token fallback chain XWUICard uses (--bg-card is empty in most
       themes, so it resolves to --bg-primary). */
    background: var(--bg-card, var(--bg-primary, var(--bg-secondary)));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg, 1.5rem);
    transition:
        transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
        border-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
    /* Resting elevation is a token so a theme can lift every surface without
       a host rewriting the property. Unset stays flat, which is the look
       surfaces shipped with. */
    box-shadow: var(--xwui-box-surface-shadow, none);
}
.xwui-box-surface--hover:hover {
    transform: translateY(-2px);
    border-color: var(--border-color);
    box-shadow: var(--xwui-box-surface-shadow-hover, var(--shadow-md));
}

/* Gradient background support */
.xwui-box-gradient-background {
    position: relative;
    overflow: hidden;
}

.xwui-box-gradient-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.xwui-box-gradient-wrapper svg {
    width: 100%;
    height: 100%;
}

/* Glass effect support */
.xwui-box-glass-effect {
    /* Glass effect styles are applied inline via JavaScript */
    /* This class is used for identification and potential CSS overrides */
    /* Use CSS variables from styles system for shadow */
    box-shadow: var(--shadow-lg, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}


/* ── glass ──────────────────────────────────────────────────────────────
   `surface: 'glass'`: a translucent, blurred panel with a hairline and a
   soft drop shadow. Every value is a token, so a theme decides the glass. */
.xwui-box-glass {
    position: relative;
    border-radius: var(--radius-glass, var(--radius-container, 20px));
    background: var(--surface-glass-fill, linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)));
    border: 1px solid var(--surface-glass-border, var(--border-light, rgba(255, 255, 255, 0.08)));
    -webkit-backdrop-filter: blur(var(--surface-glass-blur, 18px));
    backdrop-filter: blur(var(--surface-glass-blur, 18px));
    box-shadow: var(--surface-glass-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 80px -40px rgba(0, 0, 0, 0.8));
}
.xwui-box-glow-lime {
    box-shadow: var(--surface-glow-lime, 0 0 0 1px rgba(200, 255, 61, 0.35), 0 20px 80px -20px rgba(200, 255, 61, 0.45));
}
.xwui-box-glow-violet {
    box-shadow: var(--surface-glow-violet, 0 0 0 1px rgba(155, 107, 255, 0.35), 0 30px 90px -20px rgba(155, 107, 255, 0.55));
}
.xwui-box-gradient-border {
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--surface-gradient-border-fill, var(--bg-primary)), var(--surface-gradient-border-fill, var(--bg-primary))) padding-box,
        var(--surface-gradient-border, linear-gradient(100deg, #2ee6ff 0%, #9b6bff 34%, #ff4fa3 66%, #ff8a3d 100%)) border-box !important;
}

/* ── band ───────────────────────────────────────────────────────────────
   `surface: 'band'`: a full-bleed tone band. It takes theme tokens only, so
   a theme switch retones every band, and it is TWO elements on purpose.

   The adopted root (.xwui-box-container, as wide as the host) paints the tone
   and CAPTURES the page tokens as --xwui-band-* (the ground and the ink the
   band is made of). The box element inside it RE-SCOPES the page tokens from
   those captures. One element cannot do both: swapping --text-primary and
   --bg-primary on the same element makes each read the other, a cycle, and a
   custom property in a cycle computes to nothing. Different elements read each
   other's inherited value, so there is no cycle.

   Only the inverse and brand tones re-scope: default and subtle are page
   surfaces, so the page tokens already read correctly on them.

   Tokens a theme derives from another at :root (--bg-menu, --bg-header,
   --control-*, ...) were already resolved there and cannot follow; the ones
   listed below are the ones components paint and ink with. */

.xwui-box-container--band {
    display: block; /* a custom-element host is inline by default */
    box-sizing: border-box;
    background: var(--xwui-band-bg);
    color: var(--xwui-band-fg);
}

.xwui-box-container--band-default {
    --xwui-band-bg: var(--bg-primary);
    --xwui-band-fg: var(--text-primary);
}

.xwui-box-container--band-subtle {
    --xwui-band-bg: var(--bg-secondary);
    --xwui-band-fg: var(--text-primary);
}

/* Inverse: the page ink is the ground and the page surface is the ink, so the
   band is dark on a light theme and light on a dark theme, whatever the theme. */
.xwui-box-container--band-inverse {
    --xwui-band-bg: var(--text-primary);
    --xwui-band-fg: var(--bg-primary);
    --xwui-band-accent: var(--accent-primary);
    --xwui-band-accent-hover: var(--accent-hover, var(--accent-primary));
    --xwui-band-accent-light: var(--accent-light, var(--accent-primary));
}

/* Brand: the accent is the ground, with the ink the accent already declares for
   a fill (white or near black, whichever clears AA on that accent). */
.xwui-box-container--band-brand {
    --xwui-band-bg: var(--accent-primary);
    --xwui-band-fg: var(--role-primary-fg, var(--text-inverse));
}

.xwui-box-container--band-inverse > .xwui-box,
.xwui-box-container--band-brand > .xwui-box {
    --text-primary: var(--xwui-band-fg);
    --text-inverse: var(--xwui-band-bg);
    --border-color: color-mix(in srgb, var(--xwui-band-fg) 20%, var(--xwui-band-bg));
    --border-light: color-mix(in srgb, var(--xwui-band-fg) 12%, var(--xwui-band-bg));
    --border-subtle: color-mix(in srgb, var(--xwui-band-fg) 12%, var(--xwui-band-bg));
    --border-medium: color-mix(in srgb, var(--xwui-band-fg) 20%, var(--xwui-band-bg));
    --border-strong: color-mix(in srgb, var(--xwui-band-fg) 30%, var(--xwui-band-bg));
    --bg-primary: var(--xwui-band-bg);
    --bg-secondary: color-mix(in srgb, var(--xwui-band-fg) 8%, var(--xwui-band-bg));
    --bg-tertiary: color-mix(in srgb, var(--xwui-band-fg) 12%, var(--xwui-band-bg));
    --bg-elevated: color-mix(in srgb, var(--xwui-band-fg) 10%, var(--xwui-band-bg));
    --bg-card: color-mix(in srgb, var(--xwui-band-fg) 10%, var(--xwui-band-bg));
    --bg-muted: color-mix(in srgb, var(--xwui-band-fg) 8%, var(--xwui-band-bg));
    --bg-hover: color-mix(in srgb, var(--xwui-band-fg) 10%, var(--xwui-band-bg));
    --bg-active: color-mix(in srgb, var(--xwui-band-fg) 16%, var(--xwui-band-bg));
    --role-surface-bg: var(--xwui-band-bg);
    --role-surface-fg: var(--xwui-band-fg);
}

/* Inverse ink steps. The mix percentages are measured, not eyeballed: on the
   shipped colour themes the secondary step clears 4.5:1 and the tertiary step
   (non-text ink) clears 3:1 on all but the two solarized themes, whose own
   primary text is below that ratio. */
.xwui-box-container--band-inverse > .xwui-box {
    --text-secondary: color-mix(in srgb, var(--xwui-band-fg) 84%, var(--xwui-band-bg));
    --text-tertiary: color-mix(in srgb, var(--xwui-band-fg) 64%, var(--xwui-band-bg));
}

/* Inverse accent: mixed toward the band ink (light on a dark band, dark on a
   light one), which lifts it clear of the ground for links, eyebrows and
   outlines. 40% accent keeps the text at 4.5:1 or better on 48 of the 49
   shipped accents on a dark theme (the near-white chalk is the exception) and
   on all 49 on a light one. A filled primary button takes the band ground as
   its ink, since the page's own ink was chosen for the unlifted accent. */
.xwui-box-container--band-inverse > .xwui-box {
    --accent-primary: color-mix(in srgb, var(--xwui-band-accent) 40%, var(--xwui-band-fg));
    --accent-hover: color-mix(in srgb, var(--xwui-band-accent-hover) 40%, var(--xwui-band-fg));
    --accent-light: color-mix(in srgb, var(--xwui-band-accent-light) 40%, var(--xwui-band-fg));
    --role-primary-fg: var(--xwui-band-bg);
    --role-info-fg: var(--xwui-band-bg);
}

/* Brand ink steps. The accent's own ink clears 4.5:1 on it by contract, but
   only just on many accents, and any tint toward the ground drops it below. So
   the secondary step IS the ink (hierarchy comes from size and weight there),
   and the tertiary step (non-text ink) keeps 84%, which clears 3:1 on all 49
   shipped accents. */
.xwui-box-container--band-brand > .xwui-box {
    --text-secondary: var(--xwui-band-fg);
    --text-tertiary: color-mix(in srgb, var(--xwui-band-fg) 84%, var(--xwui-band-bg));
}

/* Brand accent: the band IS the accent, so an accent fill or accent text would
   vanish into it. The accent flips to the band ink and a primary button
   becomes an ink fill carrying the accent as its text. */
.xwui-box-container--band-brand > .xwui-box {
    --accent-primary: var(--xwui-band-fg);
    --accent-hover: color-mix(in srgb, var(--xwui-band-fg) 88%, var(--xwui-band-bg));
    --accent-light: color-mix(in srgb, var(--xwui-band-fg) 76%, var(--xwui-band-bg));
    --role-primary-fg: var(--xwui-band-bg);
    --role-info-fg: var(--xwui-band-bg);
}