/* ============================================================
   BUTTON
   ------------------------------------------------------------
       <button class="ice-btn" data-variant="primary" data-size="md">
         <i data-icon="star"></i> Continuer
       </button>

   Seven variants, four sizes, three shapes. Measured from the
   button sheet, Figma 53:6437.

     primary     the deep ink radial — elevation `dark`
     secondary   the lightest glass  — elevation 3
     tertiary    a blue wash         — elevation secondary-0
     success     glass + a mint duotone glow
     warning     glass + a peach duotone glow
     lowlight    primary drained of its ink, for a muted CTA
     ghost       text only — "Retour"

   NOTHING in this file is a loose value. Colour is four tokens
   per variant, declared in base/_surface.css, so all seven invert
   with the surface. Geometry is written straight onto the
   properties from Judi's Figma variables — --height-*, --space-*,
   --radius-*, --icon-*, --type-*. There is no bundle and no alias
   between the variable and the declaration: one size block per row
   of the sheet, Figma 67:2825.

   Icon position is markup, not CSS: put the <i> before the label
   for a leading icon, after it for a trailing one.
   ============================================================ */

.ice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Default = md. Every size below writes the same properties;
     no bundle, no alias — Judi's variables, on the property. */
  block-size: var(--height-l);
  padding-inline: var(--space-20);
  gap: var(--space-12);
  border-radius: var(--radius-12);
  border: var(--_bd-w) solid transparent;

  font-size: var(--type-h6-size);
  font-weight: var(--weight-semibold);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
  white-space: nowrap;

  cursor: pointer;
  position: relative;
  /* No overflow clip: the fill is a background-image, already cut to
     the border box. Clipping only ever ate the corners of the label
     on the styles that have no box. */
  transition: transform var(--dur-fast) var(--ease-out),
              opacity   var(--dur-fast) var(--ease-out),
              color     var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);

  /* Width comes from the elevation like everything else, because a
     transparent border is NOT the same as no border: the 1px ring
     stays unshadowed and reads as a pale hairline. The levels drawn
     without a stroke carry --elev-*-border-w: 0. */
  --_bd-w: var(--border-w);


  /* Icon opacity. The ink styles draw theirs at full strength; the
     four glass ones dim it — see below. */
  --_icon-o:       1;
  --_icon-o-alone: 1;
}

.ice-btn > .ice-icon { inline-size: var(--icon-m); block-size: var(--icon-m); stroke-width: var(--lucide-stroke); flex-shrink: 0; }

/* --- Icon opacity -------------------------------------------
   Four styles handle it identically, and NOT with one value: an
   icon standing next to a label is dimmer than an icon carrying
   the button on its own. Figma 67:2181, on all five sizes.

     with a label   60 %
     alone          80 %                                        */
.ice-btn[data-variant="secondary"],
.ice-btn[data-variant="tertiary"],
.ice-btn[data-variant="success"],
.ice-btn[data-variant="warning"] {
  --_icon-o:       .6;
  --_icon-o-alone: .8;
}

.ice-btn > .ice-icon { opacity: var(--_icon-o); }
.ice-btn[data-icon-only]     > .ice-icon,
.ice-btn[data-shape="circle"] > .ice-icon { opacity: var(--_icon-o-alone); }

.ice-btn:active   { transform: translateY(1px); }
/* Disabled — the button is there but is not offering itself. No
   hover, no pointer, no click: pointer-events stops all three at
   once, so no variant has to remember to opt out. */
.ice-btn:disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
  transform: none;
  filter: none;
}

/* --- Sizes — the rows of the button sheet, Figma 67:2825 --- */
.ice-btn[data-size="xs"] {
  block-size: var(--height-s);
  padding-inline: var(--space-12);
  gap: var(--space-8);
  border-radius: var(--radius-6);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
}
.ice-btn[data-size="xs"] > .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); stroke-width: var(--lucide-stroke); }
.ice-btn[data-size="sm"] {
  block-size: var(--height-m);
  padding-inline: var(--space-16);
  gap: var(--space-10);
  border-radius: var(--radius-9);
  font-size: var(--type-h7-size);
  line-height: var(--type-h7-leading);
  letter-spacing: var(--type-h7-track);
}
.ice-btn[data-size="sm"] > .ice-icon { inline-size: var(--icon-s); block-size: var(--icon-s); stroke-width: var(--lucide-stroke); }
.ice-btn[data-size="md"] {
  block-size: var(--height-l);
  padding-inline: var(--space-20);
  gap: var(--space-12);
  border-radius: var(--radius-12);
  font-size: var(--type-h6-size);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
}
.ice-btn[data-size="md"] > .ice-icon { inline-size: var(--icon-m); block-size: var(--icon-m); stroke-width: var(--lucide-stroke); }
.ice-btn[data-size="lg"] {
  block-size: var(--height-xl);
  padding-inline: var(--space-24);
  gap: var(--space-16);
  border-radius: var(--radius-16);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-leading);
  letter-spacing: var(--type-h5-track);
}
.ice-btn[data-size="lg"] > .ice-icon { inline-size: var(--icon-l); block-size: var(--icon-l); stroke-width: var(--lucide-stroke); }
.ice-btn[data-size="xl"] {
  block-size: var(--height-2xl);
  padding-inline: var(--space-32);
  gap: var(--space-20);
  border-radius: var(--radius-20);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-h4-track);
}
.ice-btn[data-size="xl"] > .ice-icon { inline-size: var(--icon-l); block-size: var(--icon-l); stroke-width: var(--lucide-stroke); }

/* --- Shapes -------------------------------------------------
   Default is the rounded rectangle above. `pill` rounds it fully;
   `circle` does the same and squares the box, so it is only
   meaningful with data-icon-only.                               */
.ice-btn[data-shape="pill"],
.ice-btn[data-shape="pill"],
.ice-btn[data-shape="circle"] { border-radius: var(--radius-full); }

.ice-btn[data-icon-only],
.ice-btn[data-shape="circle"] {
  aspect-ratio: 1;      /* square, whatever the size sets as height */
  padding-inline: 0;
  gap: 0;
}

/* --- The four styles ----------------------------------------
   Each one IS an elevation — same fill, same stroke pair, same
   shadow and blur. Nothing is redeclared here. Figma 66:691.      */
.ice-btn[data-variant="primary"] {
  --_img: var(--elev-dark-high-image);   --_bd:  var(--elev-dark-high-border);
  --_bd-lit: var(--elev-dark-high-border-lit);
  --_bd-w: var(--elev-dark-high-border-w);
  --_sh:  var(--elev-dark-high-shadow);  --_blur: var(--elev-dark-high-blur);
  --_fg:  var(--elev-dark-high-fg);
}
.ice-btn[data-variant="secondary"] {
  --_img: var(--elev-primary-3-image);   --_bd:  var(--elev-primary-3-border);
  --_bd-lit: var(--elev-primary-3-border-lit);
  --_bd-w: var(--elev-primary-3-border-w);
  --_sh:  var(--elev-primary-3-shadow);  --_blur: var(--elev-primary-3-blur);
  --_fg:  var(--fg-high);
}
/* Three styles carry a shadow that follows the SIZE rather than the
   elevation: they sit closer to the page when small. Same ladder for
   all three — Figma 66:691 and 76:11061.

     xs           shadow XS
     sm md lg     shadow S
     xl           shadow M                                          */
.ice-btn[data-variant="secondary"][data-size="xs"],
.ice-btn[data-variant="success"][data-size="xs"],
.ice-btn[data-variant="warning"][data-size="xs"] { --_sh: var(--shadow-xs); --_blur: var(--shadow-xs-blur); }

.ice-btn[data-variant="secondary"][data-size="sm"],
.ice-btn[data-variant="secondary"][data-size="md"],
.ice-btn[data-variant="secondary"][data-size="lg"],
.ice-btn[data-variant="success"][data-size="sm"],
.ice-btn[data-variant="success"][data-size="md"],
.ice-btn[data-variant="success"][data-size="lg"],
.ice-btn[data-variant="warning"][data-size="sm"],
.ice-btn[data-variant="warning"][data-size="md"],
.ice-btn[data-variant="warning"][data-size="lg"] { --_sh: var(--shadow-s);  --_blur: var(--shadow-s-blur); }

.ice-btn[data-variant="secondary"][data-size="xl"],
.ice-btn[data-variant="success"][data-size="xl"],
.ice-btn[data-variant="warning"][data-size="xl"] { --_sh: var(--shadow-m);  --_blur: var(--shadow-m-blur); }

/* The one style that keeps its ring reserved rather than taking the
   elevation's 0: it is the only one drawn without a stroke that gains
   one on hover, and with box-sizing: border-box a width going 0 → 1
   pushes the label a pixel inward. The colour is still the
   elevation's `transparent`, and secondary-0 has no inset shadow to
   be held off the edge, so nothing shows at rest. */
.ice-btn[data-variant="tertiary"] {
  --_img: var(--elev-secondary-0-image); --_bd:  var(--elev-secondary-0-border);
  --_bd-lit: var(--elev-secondary-0-border-lit);
  --_bd-w: var(--border-w);
  --_sh:  var(--elev-secondary-0-shadow); --_blur: var(--elev-secondary-0-blur);
  --_fg:  var(--fg-high);
}
.ice-btn[data-variant="dark-low"] {
  --_img: var(--elev-dark-low-image);    --_bd:  var(--elev-dark-low-border);
  --_bd-lit: var(--elev-dark-low-border-lit);
  --_bd-w: var(--elev-dark-low-border-w);
  --_sh:  var(--elev-dark-low-shadow);   --_blur: var(--elev-dark-low-blur);
  --_fg:  var(--elev-dark-low-fg);
}
.ice-btn[data-variant="success"] {
  --_img: var(--elev-success-image);     --_bd:  var(--elev-success-border);
  --_bd-lit: var(--elev-success-border-lit);
  --_bd-w: var(--elev-success-border-w);
  --_sh:  var(--elev-success-shadow);    --_blur: var(--elev-success-blur);
  --_fg:  var(--fg-high);
  --_glows: var(--elev-success-glows);
}
.ice-btn[data-variant="warning"] {
  --_img: var(--elev-warning-image);     --_bd:  var(--elev-warning-border);
  --_bd-lit: var(--elev-warning-border-lit);
  --_bd-w: var(--elev-warning-border-w);
  --_sh:  var(--elev-warning-shadow);    --_blur: var(--elev-warning-blur);
  --_fg:  var(--fg-high);
  --_glows: var(--elev-warning-glows);
}

.ice-btn[data-variant="primary"],
.ice-btn[data-variant="secondary"],
.ice-btn[data-variant="tertiary"],
.ice-btn[data-variant="dark-low"],
.ice-btn[data-variant="success"],
.ice-btn[data-variant="warning"] {
  color: var(--_fg);
  border-color: var(--_bd-lit) var(--_bd-lit) var(--_bd) var(--_bd);
  background-image: var(--_img);
  box-shadow: var(--_sh);
  backdrop-filter: blur(var(--_blur));
  -webkit-backdrop-filter: blur(var(--_blur));
}

/* The two tinted styles carry their duotone glow over the glass. */
.ice-btn[data-variant="success"],
.ice-btn[data-variant="warning"] {
  background-image: var(--_glows), var(--_img);
}
/* Over ink, the label needs its own shadow to hold. */
.ice-btn[data-variant="primary"],
.ice-btn[data-variant="dark-low"] { text-shadow: 0 1px 3px rgb(32 46 59 / .30); }

/* --- Hover — two looks, one shadow --------------------------
   Figma 76:11640. Every box style lands on the Highlight shadow
   and its 7.5px blur; only the fill splits in two.

     ink    primary · dark-low     → the cyan radial, white label
     glass  secondary · tertiary   → elevation 4's fill, and the
            success · warning        label AND icon turn link blue
                                     at full opacity

   The glow of success/warning does not survive the hover: the fill
   is repainted here, at a higher specificity than the glow rule.  */
.ice-btn[data-variant="primary"]:hover:not(:disabled),
.ice-btn[data-variant="dark-low"]:hover:not(:disabled) {
  --_img:    var(--elev-highlight-ink-image);
  --_bd:     var(--elev-highlight-ink-border);
  --_bd-lit: var(--elev-highlight-ink-border-lit);
  --_bd-w:   var(--elev-highlight-ink-border-w);
  --_sh:     var(--elev-highlight-ink-shadow);
  --_blur:   var(--elev-highlight-ink-blur);
  --_fg:     var(--elev-highlight-ink-fg);
  background-image: var(--_img);
}

.ice-btn[data-variant="secondary"]:hover:not(:disabled),
.ice-btn[data-variant="tertiary"]:hover:not(:disabled),
.ice-btn[data-variant="success"]:hover:not(:disabled),
.ice-btn[data-variant="warning"]:hover:not(:disabled) {
  --_img:    var(--elev-highlight-image);
  --_bd:     var(--elev-highlight-border);
  --_bd-lit: var(--elev-highlight-border-lit);
  --_bd-w:   var(--elev-highlight-border-w);
  --_sh:     var(--elev-highlight-shadow);
  --_blur:   var(--elev-highlight-blur);
  --_fg:     var(--fg-link);
  --_icon-o: 1;
  --_icon-o-alone: 1;
  background-image: var(--_img);
}

/* --- Ghost — "Retour" ---------------------------------------
   No box at all: it is a label that happens to be clickable, so it
   carries neither a border nor a radius — a radius on a box with no
   fill only ever clipped the first letter.                        */
.ice-btn[data-variant="ghost"] {
  color: var(--fg-medium);
  opacity: .8;
  padding-inline: 0;
  block-size: auto;
  gap: var(--space-8);
  border-radius: 0;
  --_bd-w: 0;
}
/* Same warm gold a link turns on hover. */
.ice-btn[data-variant="ghost"]:hover:not(:disabled) {
  color: var(--fg-link-hover);
  opacity: 1;
}