/* Sea Glass v4 · tokens et matériau
   Glassmorphisme : wash + frost 16/1.75, teinte 0.28 (Alert), givre overlay 0.08.
   Drop = cast + glow ; data-glow renforce la lueur. */

@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 28%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 140deg; }

:root {
  --font-display: 'Poppins', 'Outfit', ui-rounded, system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Menlo, monospace;

  /* Sol et encre */
  --ground: #F6F5EE;
  --ground-2: #ECEBE3;
  --ink: #17262A;
  --ink-2: #3E4F52;
  --ink-3: #566568;
  --line: rgba(23, 38, 42, 0.12);
  --focus: #2F55C4;
  --drop: 24, 64, 58;
  --shade: 34, 92, 78;

  /* Verre - gelée */
  --ga: 0.42;
  --ga-scene: 0.08;
  --sparkle: 0.22;
  --spec: rgba(255, 255, 255, 0.5);
  --sheen: rgba(255, 255, 255, 0.22);
  --lit-a: 0.95;
  --ce: 70%;
  --cc: 55%;

  /* Creux : lumière inversée */
  --c-lo: rgba(34, 92, 78, 0.36);
  --c-hi: rgba(255, 255, 255, 0.95);
  --well-a: 0.5;
  --well-b: 0.85;
  --well: linear-gradient(180deg, rgb(255 255 255 / var(--well-a)), rgb(255 255 255 / var(--well-b)));
  --carved: inset 1.5px 2px 3px -1px var(--c-lo), inset -1px -1.5px 1px -1px var(--c-hi), 0 1px 0 var(--c-hi);

  --on-tint: #14463A;
  --teal: #4F9482;
  --teal-hi: #7BBFAC;

  /* Galets : valeur pleine et encre */
  --seafoam: #B9E3D6; --kelly: #4FA877; --citron: #D8DB9C; --aqua: #5CC4EC;
  --cornflower: #C3D3F0; --cobalt: #6B8CE3; --lavender: #E4DAE8; --ruby: #E07662;
  --amber: #F7C96B; --rootbeer: #B5866A; --clear: #F7F9F7; --mist: #CDD5D4;
  --seafoam-ink: #1D4D41; --kelly-ink: #0E2A1D; --citron-ink: #4A4E0F; --aqua-ink: #05455E;
  --cornflower-ink: #243C73; --cobalt-ink: #14295F; --lavender-ink: #4B3A59; --ruby-ink: #5E1E12;
  --amber-ink: #5A3D03; --rootbeer-ink: #4A2E1C; --clear-ink: #2B3735; --mist-ink: #36413F;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --theme-dur: 220ms;
  --theme-ease: var(--ease);
  --tex: 0;
  /* Ombre = plate vers le bas (pas de nuage) */
  --table-drop: 0 2px 3px rgb(0 0 0 / 0.12), 0 10px 18px -6px rgb(0 0 0 / 0.28);
  /* Lueur = teinte pure, subtile (pas de mix noir) */
  --tint-glow:
    0 0 18px rgb(var(--tint, 255 255 255) / 0.18),
    0 6px 16px -2px rgb(var(--tint, 255 255 255) / 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #14130F; --ground-2: #1C1B17;
    --ink: #E8F1EE; --ink-2: #B5C5C1; --ink-3: #93A5A1;
    --line: rgba(232, 241, 238, 0.14); --focus: #9DB8FF; --drop: 0, 0, 0; --shade: 0, 20, 16;
    --ga: 0.1; --ga-scene: 0.1; --sparkle: 0.16;
    --spec: rgba(255, 255, 255, 0.24); --sheen: rgba(255, 255, 255, 0.08);
    --lit-a: 0.6; --ce: 40%; --cc: 30%;
    --c-lo: rgba(0, 0, 0, 0.55); --c-hi: rgba(255, 255, 255, 0.14); --well-a: 0.05; --well-b: 0.1;
    --on-tint: #14463A; --teal: #7BBFAC; --teal-hi: #A8DCCB;
    --seafoam-ink: #1D4D41; --kelly-ink: #062014; --aqua-ink: #033040; --cobalt-ink: #061230;
    --amber-ink: #5A3D03; --ruby-ink: #5E1E12; --citron-ink: #4A4E0F; --lavender-ink: #4B3A59;
    --tex: 0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #14130F; --ground-2: #1C1B17;
  --ink: #E8F1EE; --ink-2: #B5C5C1; --ink-3: #93A5A1;
  --line: rgba(232, 241, 238, 0.14); --focus: #9DB8FF; --drop: 0, 0, 0; --shade: 0, 20, 16;
  --ga: 0.1; --ga-scene: 0.1; --sparkle: 0.16;
  --spec: rgba(255, 255, 255, 0.24); --sheen: rgba(255, 255, 255, 0.08);
  --lit-a: 0.6; --ce: 40%; --cc: 30%;
  --c-lo: rgba(0, 0, 0, 0.55); --c-hi: rgba(255, 255, 255, 0.14); --well-a: 0.05; --well-b: 0.1;
  --on-tint: #14463A; --teal: #7BBFAC; --teal-hi: #A8DCCB;
  --seafoam-ink: #1D4D41; --kelly-ink: #062014; --aqua-ink: #033040; --cobalt-ink: #061230;
  --amber-ink: #5A3D03; --ruby-ink: #5E1E12; --citron-ink: #4A4E0F; --lavender-ink: #4B3A59;
  --tex: 0;
}

/* ================= Le matériau (gelée) ================= */
.lg {
  --lg-r: var(--r-xl);
  --lg-blur: 24px;
  --tint: 255 255 255;
  --tint-a: 0.28;
  --glow: 79 168 119;
  --glass-a: var(--ga);
  --cs: color-mix(in srgb, rgb(var(--tint)) 40%, #fff);
  --sh-in: inset 0 1px 1px rgb(255 255 255 / 0.45), inset 0 -2px 4px rgb(0 0 0 / 0.05);
  --sh-cast: var(--table-drop);
  --sh-glow: var(--tint-glow);
  --sh-out: var(--sh-glow), var(--sh-cast);
  --press: transparent;
  position: relative;
  isolation: auto;
  border-radius: var(--lg-r);
  color: var(--ink);
  background:
    linear-gradient(var(--press), var(--press)),
    linear-gradient(135deg, rgb(255 255 255 / calc(var(--glass-a) + 0.12)), rgb(255 255 255 / var(--glass-a)) 55%, rgb(255 255 255 / calc(var(--glass-a) + 0.06)));
  box-shadow: var(--sh-in), var(--sh-out), inset 0 0 0 1px rgb(255 255 255 / 0.35);
  transition: transform 260ms var(--spring), box-shadow 260ms var(--ease), background 260ms var(--ease), --mx 140ms ease-out, --my 140ms ease-out, --ang 180ms ease-out;
}
.scene .lg { --glass-a: var(--ga-scene); }

/* 1 · frosted / glassmorphisme - toujours sur .scene ; opt-in hors scène */
.scene .lg,
.lg[data-frosted],
.lg.over[data-frosted],
.lg.over {
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(2.05);
  backdrop-filter: blur(var(--lg-blur)) saturate(2.05);
}
/* 2 · refractive — blur réduit pour laisser lire la déformation */
.sg-refract .scene .lg[data-refractive], .sg-refract .lg.over[data-refractive] {
  -webkit-backdrop-filter: blur(calc(var(--lg-blur) * 0.4)) url(#sg-refract) saturate(2.05);
  backdrop-filter: blur(calc(var(--lg-blur) * 0.4)) url(#sg-refract) saturate(2.05);
}

/* 4 · rim */
.lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(var(--ang), rgb(255 255 255 / var(--lit-a)), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 62%, color-mix(in srgb, var(--cs) 85%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.lg[data-rim]::before { opacity: 1; }

/* 5 · tint : gelée diagonale translucide + encre du galet */
.lg[data-tint] {
  --glow: var(--tint);
  background:
    linear-gradient(var(--press), var(--press)),
    linear-gradient(135deg,
      color-mix(in srgb, rgb(var(--tint)) 36%, transparent),
      rgb(var(--tint) / var(--tint-a)) 52%,
      color-mix(in srgb, rgb(var(--tint)) 48%, transparent));
}
.lg[data-tint="seafoam"] { color: var(--seafoam-ink); }
.lg[data-tint="kelly"] { color: var(--kelly-ink); }
.lg[data-tint="citron"] { color: var(--citron-ink); }
.lg[data-tint="aqua"] { color: var(--aqua-ink); }
.lg[data-tint="cornflower"] { color: var(--cornflower-ink); }
.lg[data-tint="cobalt"] { color: var(--cobalt-ink); }
.lg[data-tint="lavender"] { color: var(--lavender-ink); }
.lg[data-tint="ruby"] { color: var(--ruby-ink); }
.lg[data-tint="amber"] { color: var(--amber-ink); }
.lg[data-tint="rootbeer"] { color: var(--rootbeer-ink); }
.lg[data-tint="clear"] { color: var(--clear-ink); }
.lg[data-tint="mist"] { color: var(--mist-ink); }

/* 6 · glow boost : renforce un peu la lueur teinte, garde l’ombre cast */
.lg[data-glow] {
  --sh-glow:
    0 0 22px rgb(var(--glow) / 0.28),
    0 8px 20px -2px rgb(var(--glow) / 0.32);
}

/* Grain : bruit fin monochrome, overlay lisible (~14 %) */
.lg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: url(noise.svg) center / 128px 128px repeat;
  mix-blend-mode: overlay; opacity: var(--sparkle, 0.22);
}

/* 3 · alive */
.lg[data-alive]:hover { transform: scale(var(--hs, 1.05)); }
.lg[data-alive]:active { transform: scale(var(--as, 0.97)); }

/* Pressed / actif */
.lg:active, .lg[data-pressed], .lg[aria-pressed="true"] {
  --press: rgb(255 255 255 / 0.4);
  --sh-in: inset 0 2px 1px rgb(255 255 255 / 0.55), inset 0 -2px 4px rgb(0 0 0 / 0.05);
}

/* Creux - garde le grain (givre), sparkle un peu plus léger */
.lg.carved {
  --sh-in: inset 1.5px 2px 3px -1px var(--c-lo), inset -1px -1.5px 1px -1px var(--c-hi);
  --sh-cast: 0 1px 0 var(--c-hi);
  --sh-glow: none;
  --sh-out: var(--sh-cast);
  --sparkle: 0.16;
}
.lg.carved:not([data-tint]) {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.72));
}

.lg > :where(*) { position: relative; z-index: 4; }

/* Ombre table uniquement sur le parent - jamais sur un Glass imbriqué */
.lg .lg,
.sg-snack .btn,
.snack .btn {
  --sh-out: none;
}

@media (prefers-reduced-motion: reduce) { .lg { transition: none; } .lg[data-alive]:hover, .lg[data-alive]:active { transform: none; } }