/* the soft look - soft, rounded and quiet, on light surfaces.

   Opt-in and additive, exactly like looks/glassmorphism.css: link this file AFTER wezimplify.css (or
   styles.css) and set data-look="soft" on any container. Everything below is scoped to that
   attribute and re-declares existing design tokens, plus a few narrowly scoped rules for the
   things a token cannot reach (the soft filled fields, the checkbox corners, the focus halo).
   It introduces no new tokens.

   The shape language is taken from shadcn/ui's Luma style: pill buttons and fields, 26px cards,
   fields filled with a soft tint instead of outlined, very faint borders, generous rounding and
   a barely-there shadow. The brand stays: Faustina and Sometype Mono (Luma's Inter is not
   carried over), WeZimplify Blue as the ink, sky and white as the surfaces, lime as the one accent.

   Light and dark like every look: each colour is light-dark(<light>, <dark>), and the colour scheme picks
   (tokens/colors.css). Dark is the same flat navy as the original look's, with soft's shapes and its faint borders.

   Custom properties resolve where they are declared, so every token that is derived from the
   palette in tokens/colors.css is re-declared here explicitly rather than inherited from :root. */

[data-look="soft"]{
/* Surfaces: a very pale blue page, white cards, a soft blue tint for fills. Luma's neutral grey
   (page 97%, fields 92% at half opacity) becomes the brand's blue-tinted equivalent. */
--surface-page:light-dark(#F5F8FC,#0A1C31);
--surface-card:light-dark(#FFFFFF,#11253D);
--surface-subtle:light-dark(#EFF4FA,#152B45);
--surface-sky:light-dark(#E3EDF8,#173250);

/* Borders: hairlines you have to look for (Luma: 5% ink ring). Emphasis stays the ink, softened. */
--border-hairline:light-dark(rgba(23,40,63,.16),rgba(211,228,255,.18));
--border-subtle:light-dark(rgba(23,40,63,.08),rgba(211,228,255,.09));
--border-strong:light-dark(rgba(23,40,63,.42),rgba(211,228,255,.42));
--border-inverse:rgba(255,255,255,.28);
--border-accent:var(--wz-lime-500);

/* Interaction: a slightly deeper lime so the focus ring reads on white; on navy the base lime reads. */
--focus-ring:light-dark(var(--wz-lime-500),var(--wz-lime-400));
--overlay-scrim:light-dark(rgba(10,21,36,.42),rgba(2,8,16,.62));

/* Status, softened so the outlined alerts and field errors read as calm, not alarming; lifted on navy */
--status-success:light-dark(#4E9F73,#6CC891);
--status-warning:light-dark(#D19A38,#E8B65A);
--status-danger:light-dark(#BA4C44,#F2857C);
--status-info:light-dark(#6C94BF,#8DBDEB);

/* Rounding: pills for controls, 26px for cards (Luma's radius), 18px for images. */
--radius-control:999px;
--radius-card:26px;
--radius-image:18px;

/* Elevation: a faint ink ring plus a soft, low shadow (Luma cards: ring 5% + shadow-md). On navy the ring is a
   faint light edge and the shadow is black, since depth there comes from the lighter card. */
--shadow-sm:0 1px 2px light-dark(rgba(23,40,63,.06),rgba(0,0,0,.3));
--shadow-md:0 0 0 1px light-dark(rgba(23,40,63,.05),rgba(211,228,255,.06)),0 6px 16px -6px light-dark(rgba(23,40,63,.12),rgba(0,0,0,.45));
--shadow-lg:0 0 0 1px light-dark(rgba(23,40,63,.05),rgba(211,228,255,.06)),0 20px 44px -16px light-dark(rgba(23,40,63,.2),rgba(0,0,0,.55));
--shadow-inset-hairline:inset 0 0 0 1px light-dark(rgba(23,40,63,.06),rgba(211,228,255,.08));
--shadow-card:var(--shadow-md);

color:var(--text-body);
}

/* Fields are filled, not outlined: a soft tint with a border you barely see (Luma: muted at 50%).
   Fields set their background inline, hence !important. Focus and invalid keep their own
   border colour, which the components set inline as well. */
[data-look="soft"] :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea){
background:var(--surface-subtle) !important;
}

/* In an InputGroup the group is the field: it takes the fill, and the bare control inside stays clear. */
[data-look="soft"] [data-input-group]{background:var(--surface-subtle) !important}
[data-look="soft"] [data-input-group] :is(input,select,textarea){background:transparent !important}

/* A multi-line field cannot be a pill; it takes a softer, smaller curve (Luma: 18px). */
[data-look="soft"] textarea{border-radius:20px !important}

/* The checkbox box is a square by default; here it is a soft rounded square. */
[data-look="soft"] input[type=checkbox] + span[aria-hidden]{border-radius:6px}
[data-look="soft"] input[type=checkbox] + span[aria-hidden]:not([data-invalid]){border-color:var(--border-strong) !important}

/* A soft halo on keyboard focus, on top of the lime outline every component already has
   (Luma: a 3px ring in the ring colour at half opacity). */
[data-look="soft"] :is(a,button,input,select,textarea,[tabindex]):focus-visible{
box-shadow:0 0 0 4px light-dark(rgba(168,201,63,.28),rgba(209,242,105,.22)) !important;
}

/* InputGroup draws its own focus ring; the bare control inside it must not add a second one. */
[data-look="soft"] [data-input-group] input:focus-visible,
[data-look="soft"] [data-input-group] textarea:focus-visible{box-shadow:none !important}

/* The lime corner marker (PricingCard, ServiceCard) is a tab in a square corner; a rounded corner clips it
   into a wedge, so here it is a short lime bar on the left edge, just below the curve. Inline styles, hence !important. */
[data-look="soft"] [data-corner-marker]{top:var(--radius-card) !important;width:4px !important;height:26px !important;border-radius:0 2px 2px 0}

/* In a joined group (a ButtonGroup of Toggles, a ToggleGroup) the pressed item fills a square cell inside the pill
   outline; here the fill is an inset pill, like a segmented control, and the outline stays whole.
   The no-build Toggle styles itself inline, hence !important. */
[data-look="soft"] :is([role="group"],[data-scope="toggle-group"][data-part="root"]) > [data-variant][data-state="on"]{position:relative;isolation:isolate;background:transparent !important}
[data-look="soft"] :is([role="group"],[data-scope="toggle-group"][data-part="root"]) > [data-variant="outline"][data-state="on"]{border-color:var(--border-subtle) !important}
[data-look="soft"] :is([role="group"],[data-scope="toggle-group"][data-part="root"]) > [data-variant="default"][data-state="on"]{border-color:transparent !important}
[data-look="soft"] :is([role="group"],[data-scope="toggle-group"][data-part="root"]) > [data-variant][data-state="on"]::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:var(--radius-control);background:var(--wz-blue-800)}