/* ═══════════════════════════════════════════════════════════════════════════ @devopsnext/starterkit-card-component — the entire visual definition of . Import once, anywhere: import "@devopsnext/starterkit-card-component/styles.css"; TOKEN SOURCING — remote sheet primary, this file backup: https://cdn.thinktalentws48.click/starterkit/colors_and_type.css That sheet is NOT imported here. A CSS `@import` is all-or-nothing, and it also ships `* { box-sizing }`, `body { background/color/font }`, a Google Fonts request and a pile of component classes — none of which a card library may impose on a host, and all of which would need a CSP allowance from every consumer. Hosts already on the design system load it themselves; standalone consumers need nothing. So the tokens are vendored instead, as inline fallbacks on `.ic-card`: --ic-t-glass-bg: var(--glass-bg, rgba(255, 255, 255, 0.035)); A CSS fallback applies only to an absent custom property, so the host's --glass-bg wins wherever it is defined and the vendored copy renders the card where it is not. Priority falls out of the mechanism — no load-order rule to get wrong, and no `@layer`. Two consequences worth stating, because both were live alternatives: 1. This file declares NOTHING on :root. A layered `:root` block would also lose to the host correctly, but layered or not it still hands --border, --surface and --radius-card to every other component on the page. Aliasing on .ic-card keeps the blast radius at this component. 2. Component rules are deliberately UNLAYERED. They must beat unlayered global resets (Bootstrap, Tailwind preflight) — and an unlayered attribute-plus-class selector does, on specificity. The alias block below is generated: `pnpm sync:tokens` rebuilds it from the design system's DEFAULT brand preset, `pnpm sync:tokens:check` fails when the vendored copy drifts. That preset is read from the sibling starterkit-theme checkout rather than the URL above, because the published copy of the URL predates the 2.0.0 semantic-role tokens this file consumes — scripts/ sync-tokens.mjs's own header carries the full reasoning. ═══════════════════════════════════════════════════════════════════════════ */ /* @tokens:start — generated by scripts/sync-tokens.mjs, do not edit */ /* Source: ../starterkit-theme/presets/think.css — regenerate with `pnpm sync:tokens`. Each alias is `var(, )`: the host's sheet wins whenever it defines the token, these values render the card when it does not. Scoped to .ic-card — this file declares nothing on :root. */ .ic-card { --ic-t-surface: var(--surface, #10121c); --ic-t-surface-elevated: var(--surface-elevated, #161925); --ic-t-fg1: var(--fg1, #f0f2ff); --ic-t-primary: var(--primary, #37a3fe); --ic-t-primary-on-solid: var(--primary-on-solid, #ffffff); --ic-t-primary-bg: var(--primary-bg, rgba(55, 163, 254, 0.14)); --ic-t-primary-channel: var(--primary-channel, 55 163 254); --ic-t-secondary: var(--secondary, #64748b); --ic-t-secondary-on-solid: var(--secondary-on-solid, #ffffff); --ic-t-secondary-bg: var(--secondary-bg, rgba(100, 116, 139, 0.14)); --ic-t-secondary-channel: var(--secondary-channel, 100 116 139); --ic-t-accent: var(--accent, #b3d335); --ic-t-accent-on-solid: var(--accent-on-solid, #0b0f19); --ic-t-accent-bg: var(--accent-bg, rgba(179, 211, 53, 0.14)); --ic-t-accent-channel: var(--accent-channel, 179 211 53); --ic-t-success: var(--success, #4caf50); --ic-t-success-on-solid: var(--success-on-solid, #0b0f19); --ic-t-success-bg: var(--success-bg, rgba(76, 175, 80, 0.14)); --ic-t-success-channel: var(--success-channel, 76 175 80); --ic-t-warning: var(--warning, #f59e0b); --ic-t-warning-on-solid: var(--warning-on-solid, #0b0f19); --ic-t-warning-bg: var(--warning-bg, rgba(245, 158, 11, 0.14)); --ic-t-warning-channel: var(--warning-channel, 245 158 11); --ic-t-danger: var(--danger, #f43f5e); --ic-t-danger-on-solid: var(--danger-on-solid, #0b0f19); --ic-t-danger-bg: var(--danger-bg, rgba(244, 63, 94, 0.14)); --ic-t-danger-channel: var(--danger-channel, 244 63 94); --ic-t-info: var(--info, #236cd3); --ic-t-info-on-solid: var(--info-on-solid, #ffffff); --ic-t-info-bg: var(--info-bg, rgba(35, 108, 211, 0.14)); --ic-t-info-channel: var(--info-channel, 35 108 211); --ic-t-accent-green: var(--accent-green, #b3d335); --ic-t-accent-green-on-solid: var(--accent-green-on-solid, #0b0f19); --ic-t-accent-green-bg: var(--accent-green-bg, rgba(179, 211, 53, 0.14)); --ic-t-accent-green-channel: var(--accent-green-channel, 179 211 53); --ic-t-accent-pink: var(--accent-pink, #ee4480); --ic-t-accent-pink-on-solid: var(--accent-pink-on-solid, #0b0f19); --ic-t-accent-pink-bg: var(--accent-pink-bg, rgba(238, 68, 128, 0.14)); --ic-t-accent-pink-channel: var(--accent-pink-channel, 238 68 128); --ic-t-border: var(--border, rgba(255, 255, 255, 0.08)); --ic-t-glass-border: var(--glass-border, rgba(255, 255, 255, 0.09)); --ic-t-glass-bg: var(--glass-bg, rgba(255, 255, 255, 0.035)); --ic-t-radius-card: var(--radius-card, 20px); --ic-t-shadow-card: var(--shadow-card, 0 0 0 1px rgba(255, 255, 255, 0.03), 0 4px 24px rgba(0, 0, 0, 0.30)); --ic-t-shadow-elevated: var(--shadow-elevated, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 14px 44px rgba(0, 0, 0, 0.48)); --ic-t-gradient-primary: var(--gradient-primary, linear-gradient(135deg, var(--primary-solid, #007acd), var(--primary-solid-hover, #0171bf))); --ic-t-gradient-secondary: var(--gradient-secondary, linear-gradient(135deg, var(--secondary-solid, #64748b), var(--secondary-solid-hover, #5d6c82))); --ic-t-gradient-accent: var(--gradient-accent, linear-gradient(135deg, var(--accent-solid, #b3d335), var(--accent-solid-hover, #a6c333))); --ic-t-gradient-success: var(--gradient-success, linear-gradient(135deg, var(--success-solid, #4caf50), var(--success-solid-hover, #47a24c))); --ic-t-gradient-warning: var(--gradient-warning, linear-gradient(135deg, var(--warning-solid, #f59e0b), var(--warning-solid-hover, #e2930c))); --ic-t-gradient-danger: var(--gradient-danger, linear-gradient(135deg, var(--danger-solid, #f43f5e), var(--danger-solid-hover, #e13b58))); --ic-t-gradient-info: var(--gradient-info, linear-gradient(135deg, var(--info-solid, #0058d4), var(--info-solid-hover, #0152c5))); --ic-t-gradient-accent-green: var(--gradient-accent-green, linear-gradient(135deg, var(--accent-green-solid, #b3d335), var(--accent-green-solid-hover, #a6c333))); --ic-t-gradient-accent-pink: var(--gradient-accent-pink, linear-gradient(135deg, var(--accent-pink-solid, #ee4480), var(--accent-pink-solid-hover, #dc4078))); --ic-t-ease-entrance: var(--ease-entrance, cubic-bezier(0.16, 1, 0.3, 1)); --ic-t-fg1-channel: var(--fg1-channel, 240 242 255); } /* Light scheme. Surfaces invert and brand hues darken, so the channels flip with them: a gradient drawn in the dark-surface mint glows far too hot on white. */ [data-mui-color-scheme="light"] .ic-card, [data-theme="light"] .ic-card { --ic-t-surface: var(--surface, #ffffff); --ic-t-surface-elevated: var(--surface-elevated, #f0f1f7); --ic-t-fg1: var(--fg1, #1a1d2e); --ic-t-primary: var(--primary, #2775b4); --ic-t-primary-bg: var(--primary-bg, rgba(39, 117, 180, 0.10)); --ic-t-primary-channel: var(--primary-channel, 39 117 180); --ic-t-secondary: var(--secondary, #3e4959); --ic-t-secondary-bg: var(--secondary-bg, rgba(62, 73, 89, 0.10)); --ic-t-secondary-channel: var(--secondary-channel, 62 73 89); --ic-t-accent: var(--accent, #6c7d2c); --ic-t-accent-bg: var(--accent-bg, rgba(108, 125, 44, 0.10)); --ic-t-accent-channel: var(--accent-channel, 108 125 44); --ic-t-success: var(--success, #397a36); --ic-t-success-bg: var(--success-bg, rgba(57, 122, 54, 0.10)); --ic-t-success-channel: var(--success-channel, 57 122 54); --ic-t-warning: var(--warning, #b57620); --ic-t-warning-bg: var(--warning-bg, rgba(181, 118, 32, 0.10)); --ic-t-warning-channel: var(--warning-channel, 181 118 32); --ic-t-danger: var(--danger, #a92b43); --ic-t-danger-bg: var(--danger-bg, rgba(169, 43, 67, 0.10)); --ic-t-danger-channel: var(--danger-channel, 169 43 67); --ic-t-info: var(--info, #00357d); --ic-t-info-bg: var(--info-bg, rgba(0, 53, 125, 0.10)); --ic-t-info-channel: var(--info-channel, 0 53 125); --ic-t-accent-green: var(--accent-green, #6c7d2c); --ic-t-accent-green-bg: var(--accent-green-bg, rgba(108, 125, 44, 0.10)); --ic-t-accent-green-channel: var(--accent-green-channel, 108 125 44); --ic-t-accent-pink: var(--accent-pink, #a52f5a); --ic-t-accent-pink-bg: var(--accent-pink-bg, rgba(165, 47, 90, 0.10)); --ic-t-accent-pink-channel: var(--accent-pink-channel, 165 47 90); --ic-t-border: var(--border, rgba(0, 0, 0, 0.14)); --ic-t-glass-border: var(--glass-border, rgba(0, 0, 0, 0.14)); --ic-t-glass-bg: var(--glass-bg, rgba(255, 255, 255, 0.72)); --ic-t-shadow-card: var(--shadow-card, 0 1px 2px rgba(15, 23, 42, 0.10), 0 6px 20px rgba(15, 23, 42, 0.10)); --ic-t-shadow-elevated: var(--shadow-elevated, 0 2px 6px rgba(15, 23, 42, 0.12), 0 16px 40px rgba(15, 23, 42, 0.18)); --ic-t-fg1-channel: var(--fg1-channel, 26 29 46); } /* Same defaults for a host that ships no scheme attribute at all. Without a guard, a host running dark mode on a light-preference machine would pick these up — so the rule is scoped to a card with no declared scheme ANYWHERE above it, not merely to a bare :root. MUI puts its attribute on , but a scheme attribute is legal on any wrapper, and a per-subtree scheme is the normal way to render a dark panel inside a light page. Checking :root alone let every one of those cases fall through to the light tokens. */ @media (prefers-color-scheme: light) { :root:not([data-mui-color-scheme]):not([data-theme]) .ic-card:not([data-mui-color-scheme] *):not([data-theme] *) { --ic-t-surface: var(--surface, #ffffff); --ic-t-surface-elevated: var(--surface-elevated, #f0f1f7); --ic-t-fg1: var(--fg1, #1a1d2e); --ic-t-primary: var(--primary, #2775b4); --ic-t-primary-bg: var(--primary-bg, rgba(39, 117, 180, 0.10)); --ic-t-primary-channel: var(--primary-channel, 39 117 180); --ic-t-secondary: var(--secondary, #3e4959); --ic-t-secondary-bg: var(--secondary-bg, rgba(62, 73, 89, 0.10)); --ic-t-secondary-channel: var(--secondary-channel, 62 73 89); --ic-t-accent: var(--accent, #6c7d2c); --ic-t-accent-bg: var(--accent-bg, rgba(108, 125, 44, 0.10)); --ic-t-accent-channel: var(--accent-channel, 108 125 44); --ic-t-success: var(--success, #397a36); --ic-t-success-bg: var(--success-bg, rgba(57, 122, 54, 0.10)); --ic-t-success-channel: var(--success-channel, 57 122 54); --ic-t-warning: var(--warning, #b57620); --ic-t-warning-bg: var(--warning-bg, rgba(181, 118, 32, 0.10)); --ic-t-warning-channel: var(--warning-channel, 181 118 32); --ic-t-danger: var(--danger, #a92b43); --ic-t-danger-bg: var(--danger-bg, rgba(169, 43, 67, 0.10)); --ic-t-danger-channel: var(--danger-channel, 169 43 67); --ic-t-info: var(--info, #00357d); --ic-t-info-bg: var(--info-bg, rgba(0, 53, 125, 0.10)); --ic-t-info-channel: var(--info-channel, 0 53 125); --ic-t-accent-green: var(--accent-green, #6c7d2c); --ic-t-accent-green-bg: var(--accent-green-bg, rgba(108, 125, 44, 0.10)); --ic-t-accent-green-channel: var(--accent-green-channel, 108 125 44); --ic-t-accent-pink: var(--accent-pink, #a52f5a); --ic-t-accent-pink-bg: var(--accent-pink-bg, rgba(165, 47, 90, 0.10)); --ic-t-accent-pink-channel: var(--accent-pink-channel, 165 47 90); --ic-t-border: var(--border, rgba(0, 0, 0, 0.14)); --ic-t-glass-border: var(--glass-border, rgba(0, 0, 0, 0.14)); --ic-t-glass-bg: var(--glass-bg, rgba(255, 255, 255, 0.72)); --ic-t-shadow-card: var(--shadow-card, 0 1px 2px rgba(15, 23, 42, 0.10), 0 6px 20px rgba(15, 23, 42, 0.10)); --ic-t-shadow-elevated: var(--shadow-elevated, 0 2px 6px rgba(15, 23, 42, 0.12), 0 16px 40px rgba(15, 23, 42, 0.18)); --ic-t-fg1-channel: var(--fg1-channel, 26 29 46); } } /* @tokens:end */ /* Glow and depth intensities. These are NOT tokens — the sheet now ships a glow constant per family (uniformly, one per role, unlike the old per-hue set this used to be inconsistent about), but consuming it directly would still put the card back in the business of knowing which family it is, and `neutral` — a card state, not a family — has no such constant to reach for at all. The card derives every glow from its own tone channel instead, which is what makes tone="danger" (and neutral's hover glow) cost zero new CSS. Only the alpha is scheme-dependent: the same 0.35 that reads as a halo on the void surface reads as a smear on white. Declared under private `--ic-*` names on .ic-card. Consumers override them per instance or per subtree; nothing here touches :root. */ /* Three depths, not one. The cast under a lifted card is graded by how far off the page that fill sits — surface is the shallowest, elevated the deepest, and collapsing them to a single value flattens the ordering the fills exist to express. The light values are the dark ones scaled to a scheme where a black cast reads as dirt rather than depth. */ .ic-card { --ic-glow-a: 0.35; --ic-glow-a-far: 0.12; --ic-glow-a-hover: 0.45; --ic-depth-soft: rgba(0, 0, 0, 0.25); --ic-depth: rgba(0, 0, 0, 0.3); --ic-depth-deep: rgba(0, 0, 0, 0.32); } [data-mui-color-scheme="light"] .ic-card, [data-theme="light"] .ic-card { --ic-glow-a: 0.2; --ic-glow-a-far: 0.06; --ic-glow-a-hover: 0.28; --ic-depth-soft: rgba(15, 23, 42, 0.12); --ic-depth: rgba(15, 23, 42, 0.14); --ic-depth-deep: rgba(15, 23, 42, 0.15); } /* Same ancestry guard as the token block above — see the note there. */ @media (prefers-color-scheme: light) { :root:not([data-mui-color-scheme]):not([data-theme]) .ic-card:not([data-mui-color-scheme] *):not([data-theme] *) { --ic-glow-a: 0.2; --ic-glow-a-far: 0.06; --ic-glow-a-hover: 0.28; --ic-depth-soft: rgba(15, 23, 42, 0.12); --ic-depth: rgba(15, 23, 42, 0.14); --ic-depth-deep: rgba(15, 23, 42, 0.15); } } /* ── Base ─────────────────────────────────────────────────────────────────── */ .ic-card { /* Overridden per tone. Neutral values so a missing data-tone still renders. */ --ic-ch: var(--ic-t-fg1-channel); --ic-grad: none; /* The channel used for INTERACTION (hover wash, focus ring) as opposed to identity. It follows the tone by default; only `neutral` splits the two, because a grey hover on a grey card communicates nothing. */ --ic-hover-ch: var(--ic-ch); /* Label colour on a gradient fill. Overridden per tone with the family's MEASURED ---on-solid — legible on both the resting and hovered fill — never a hardcoded white. This default only survives for a tone that sets no ink of its own, which in practice is only `neutral`, and `neutral` never reaches a gradient fill without hitting the surface-degrade rule below. */ --ic-ink: #fff; /* The `outline` fill's resting border. Overridden per tone with the family's own -- — the design system already measures that token to ~3:1 on --surface, so it is used directly rather than an alpha guess. Neutral has no family token, so it keeps the old alpha-from-channel formula. */ --ic-mark: rgb(var(--ic-ch) / 0.45); /* Tinted background for the hover wash on glass/outline. Overridden per tone with the family's own ---bg — a real tinted-background token now, rather than the hand-rolled `rgb(var(--ic-hover-ch) / 0.05)` this used to be. Follows --ic-hover-ch's family, not --ic-ch's: a hover wash is interaction feedback, same as the border and glow it accompanies. */ --ic-hover-bg: transparent; position: relative; /* Clips the accent strip to the corner radius. Also means a card cannot host an overflowing popover — use a portal for those, as with any clipped box. */ overflow: hidden; display: block; box-sizing: border-box; border-radius: var(--ic-t-radius-card); /* Always 1px, even when a fill draws no visible edge: a border that appears on hover must not reflow the card. */ border: 1px solid transparent; color: var(--ic-t-fg1); /* Anchor cards must not inherit the host's link colour or underline. */ text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 0.25s var(--ic-t-ease-entrance), box-shadow 0.25s var(--ic-t-ease-entrance), border-color 0.25s var(--ic-t-ease-entrance), background 0.25s var(--ic-t-ease-entrance); } .ic-card[data-full-height] { height: 100%; } /* Transparent, not `border: none` — dropping the border would shrink the box by 2px and shift everything inside it. */ .ic-card[data-no-border] { border-color: transparent; } /* ── Axis: tone ───────────────────────────────────────────────────────────── */ /* A tone publishes channels, a gradient, an ink and a border mark, and styles nothing itself. Adding a tone is one rule here and it composes with every fill for free — which is the whole reason `danger` and `outline` exist at all: the old variant list had no row for them, and the split made them free. Renamed from hue words (mint/violet/amber/blue) to the semantic roles `@devopsnext/starterkit-theme` now ships (primary/secondary/accent/success/ warning/danger) — every mint-, cobalt-, electric-, amber- and rose-prefixed custom property is gone from the token ABI, no same-named replacement. `accent` and `success` are new tones; nothing in the old hue list mapped onto them. */ .ic-card[data-tone="primary"] { --ic-ch: var(--ic-t-primary-channel); --ic-grad: var(--ic-t-gradient-primary); --ic-ink: var(--ic-t-primary-on-solid); --ic-mark: var(--ic-t-primary); --ic-hover-bg: var(--ic-t-primary-bg); } .ic-card[data-tone="secondary"] { --ic-ch: var(--ic-t-secondary-channel); --ic-grad: var(--ic-t-gradient-secondary); --ic-ink: var(--ic-t-secondary-on-solid); --ic-mark: var(--ic-t-secondary); --ic-hover-bg: var(--ic-t-secondary-bg); } .ic-card[data-tone="accent"] { --ic-ch: var(--ic-t-accent-channel); --ic-grad: var(--ic-t-gradient-accent); --ic-ink: var(--ic-t-accent-on-solid); --ic-mark: var(--ic-t-accent); --ic-hover-bg: var(--ic-t-accent-bg); } .ic-card[data-tone="success"] { --ic-ch: var(--ic-t-success-channel); --ic-grad: var(--ic-t-gradient-success); --ic-ink: var(--ic-t-success-on-solid); --ic-mark: var(--ic-t-success); --ic-hover-bg: var(--ic-t-success-bg); } .ic-card[data-tone="warning"] { --ic-ch: var(--ic-t-warning-channel); --ic-grad: var(--ic-t-gradient-warning); --ic-ink: var(--ic-t-warning-on-solid); --ic-mark: var(--ic-t-warning); --ic-hover-bg: var(--ic-t-warning-bg); } .ic-card[data-tone="danger"] { --ic-ch: var(--ic-t-danger-channel); --ic-grad: var(--ic-t-gradient-danger); --ic-ink: var(--ic-t-danger-on-solid); --ic-mark: var(--ic-t-danger); --ic-hover-bg: var(--ic-t-danger-bg); } .ic-card[data-tone="info"] { --ic-ch: var(--ic-t-info-channel); --ic-grad: var(--ic-t-gradient-info); --ic-ink: var(--ic-t-info-on-solid); --ic-mark: var(--ic-t-info); --ic-hover-bg: var(--ic-t-info-bg); } .ic-card[data-tone="accent-green"] { --ic-ch: var(--ic-t-accent-green-channel); --ic-grad: var(--ic-t-gradient-accent-green); --ic-ink: var(--ic-t-accent-green-on-solid); --ic-mark: var(--ic-t-accent-green); --ic-hover-bg: var(--ic-t-accent-green-bg); } .ic-card[data-tone="accent-pink"] { --ic-ch: var(--ic-t-accent-pink-channel); --ic-grad: var(--ic-t-gradient-accent-pink); --ic-ink: var(--ic-t-accent-pink-on-solid); --ic-mark: var(--ic-t-accent-pink); --ic-hover-bg: var(--ic-t-accent-pink-bg); } /* Identity stays neutral — an outline or a focus ring in fg1 is what "no colour chosen" should look like. Interaction borrows primary, which is what the pre-extraction card hovered glass and surface with (cobalt, pre-rename). */ .ic-card[data-tone="neutral"] { --ic-ch: var(--ic-t-fg1-channel); --ic-grad: none; --ic-hover-ch: var(--ic-t-primary-channel); --ic-hover-bg: var(--ic-t-primary-bg); } /* …except elevated, which hovered violet (now secondary). Not an inconsistency to tidy away: elevated is the modal/popover level, and the hue is what separates "this surface is on top of the page" from "this surface is part of it". A toned elevated card still hovers in its own tone — only the no-tone-chosen default differs from the other neutral fills. */ .ic-card[data-tone="neutral"][data-fill="elevated"] { --ic-hover-ch: var(--ic-t-secondary-channel); --ic-hover-bg: var(--ic-t-secondary-bg); } /* ── Axis: pad ────────────────────────────────────────────────────────────── */ /* `none` exists for media cards: an image that must bleed to the corners cannot do it from inside padding. */ .ic-card[data-pad="none"] { padding: 0; } .ic-card[data-pad="sm"] { padding: 16px; } .ic-card[data-pad="md"] { padding: 24px; } .ic-card[data-pad="lg"] { padding: 32px 28px; } /* ── Axis: fill ───────────────────────────────────────────────────────────── */ /* Each fill consumes --ic-ch / --ic-grad and knows nothing about which tone supplied them. Hover rules are gated on [data-interactive], which the component renders only for a card that actually responds to a pointer. */ .ic-card[data-fill="glass"] { background: var(--ic-t-glass-bg); border-color: var(--ic-t-glass-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ic-t-shadow-card); } .ic-card[data-fill="surface"] { background: var(--ic-t-surface); border-color: var(--ic-t-border); box-shadow: var(--ic-t-shadow-card); } /* The hairline is drawn from the foreground channel rather than a fixed white alpha: white-on-white is invisible, and the sheet flips --fg1-channel to a near-black in light mode, so one declaration covers both schemes. */ .ic-card[data-fill="elevated"] { background: var(--ic-t-surface-elevated); border-color: rgb(var(--ic-t-fg1-channel) / 0.1); box-shadow: var(--ic-t-shadow-elevated); } .ic-card[data-fill="gradient"] { background: var(--ic-grad); border-color: rgb(var(--ic-ch) / 0.5); /* `--ic-ink` is the tone's `---on-solid` — the design system's own MEASURED ink, legible on both the resting and hovered fill, never a hardcoded white. `--ic-on-grad` stays as the documented escape hatch: a consumer who wants something other than the measured ink (e.g. body copy needs a different contrast strategy than a heading) can still override it directly. */ color: var(--ic-on-grad, var(--ic-ink)); box-shadow: 0 0 20px rgb(var(--ic-ch) / var(--ic-glow-a)), 0 0 60px rgb(var(--ic-ch) / var(--ic-glow-a-far)); } /* `neutral` publishes no gradient. Rendering `background: none` would hand back an invisible card with white text on the page background — so the one unreachable point in the tone × fill grid degrades to `surface` instead of disappearing. */ .ic-card[data-fill="gradient"][data-tone="neutral"] { background: var(--ic-t-surface); border-color: var(--ic-t-border); color: var(--ic-t-fg1); box-shadow: var(--ic-t-shadow-card); } .ic-card[data-fill="outline"] { background: transparent; /* `--ic-mark` is the tone's own -- — already measured to ~3:1 on --surface, used directly rather than an alpha guess computed here. */ border-color: var(--ic-mark); box-shadow: none; } /* ── Interaction ──────────────────────────────────────────────────────────── */ /* :hover AND :focus-visible on every rule — a keyboard user reaching a card must see the same state change a mouse user gets. */ .ic-card[data-interactive] { cursor: pointer; } .ic-card[data-interactive]:hover, .ic-card[data-interactive]:focus-visible { transform: translateY(-3px); } .ic-card[data-fill="glass"][data-interactive]:hover, .ic-card[data-fill="glass"][data-interactive]:focus-visible { border-color: rgb(var(--ic-hover-ch) / 0.35); /* --ic-hover-bg is the interaction family's own ---bg — a real tinted- background token, not a hand-rolled alpha wash off the channel. */ background: var(--ic-hover-bg); box-shadow: 0 0 40px rgb(var(--ic-hover-ch) / 0.15), 0 10px 32px var(--ic-depth); } .ic-card[data-fill="surface"][data-interactive]:hover, .ic-card[data-fill="surface"][data-interactive]:focus-visible { border-color: rgb(var(--ic-hover-ch) / 0.3); box-shadow: 0 0 30px rgb(var(--ic-hover-ch) / 0.12), 0 10px 28px var(--ic-depth-soft); } .ic-card[data-fill="elevated"][data-interactive]:hover, .ic-card[data-fill="elevated"][data-interactive]:focus-visible { border-color: rgb(var(--ic-hover-ch) / 0.35); box-shadow: 0 0 30px rgb(var(--ic-hover-ch) / 0.15), 0 14px 40px var(--ic-depth-deep); } /* A gradient card is already its own hue, so hover deepens the halo it has rather than washing a second colour over it. */ .ic-card[data-fill="gradient"][data-interactive]:hover, .ic-card[data-fill="gradient"][data-interactive]:focus-visible { box-shadow: 0 0 34px rgb(var(--ic-ch) / var(--ic-glow-a-hover)), 0 12px 34px var(--ic-depth); } .ic-card[data-fill="outline"][data-interactive]:hover, .ic-card[data-fill="outline"][data-interactive]:focus-visible { border-color: rgb(var(--ic-ch) / 0.7); background: var(--ic-hover-bg); } /* ── Accent strip ─────────────────────────────────────────────────────────── */ /* A pseudo-element, not a border-top: a hover rule that changes border-color would otherwise wipe the accent, which is exactly what happened in the pre-extraction card before it moved to ::before. */ .ic-card[data-accent]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ic-accent, rgb(var(--ic-ch))); z-index: 1; } /* ── Focus ────────────────────────────────────────────────────────────────── */ /* :focus-visible, not :focus — a mouse click on a clickable card must not leave a ring, and a keyboard user must always get one. A toned gradient rings in its own measured ink (`--ic-ink`) because a same-hue ring on a same-hue gradient is invisible; the 2px offset puts it on the page background either way. */ .ic-card:focus-visible { outline: 2px solid var(--ic-card-focus-ring, rgb(var(--ic-hover-ch))); outline-offset: 2px; } .ic-card[data-fill="gradient"]:not([data-tone="neutral"]):focus-visible { outline-color: var(--ic-card-focus-ring, var(--ic-ink)); } /* ── Disabled ─────────────────────────────────────────────────────────────── */ /* A card is never a