/* ============================================================
   LJV Liquid Glass — Colors & Type
   iOS 26-inspired frosted glass system
   Single source of truth: ./design-docs/design-language.md
   ============================================================ */

:root {
  /* ---- Canonical background gradient ------------------------ */
  --bg-gradient: linear-gradient(
    155deg,
    #8fa8c0 0%,
    #9dbcce 28%,
    #b4cad8 55%,
    #96aec4 80%,
    #8aa2be 100%
  );
  --bg-stop-1: #8fa8c0;
  --bg-stop-2: #9dbcce;
  --bg-stop-3: #b4cad8;
  --bg-stop-4: #96aec4;
  --bg-stop-5: #8aa2be;

  /* ---- Glass roles (no fixed hex — they read against bg) --- */
  --glass-tint:      rgba(255, 255, 255, 0.09);   /* mid of 0.07–0.11 */
  --glass-tint-fat:  rgba(255, 255, 255, 0.11);   /* cards, modals    */
  --glass-tint-thin: rgba(255, 255, 255, 0.07);   /* nav, pills       */
  --glass-surface:   rgba(255, 255, 255, 0.08);   /* lightest weight  */
  --glass-border:         rgba(255, 255, 255, 0.20);
  --glass-border-fat:     rgba(255, 255, 255, 0.22);
  --glass-border-thin:    rgba(255, 255, 255, 0.18);
  --glass-highlight:      rgba(255, 255, 255, 0.37);
  --glass-highlight-low:  rgba(255, 255, 255, 0.11);
  --glass-active-bg:      rgba(255, 255, 255, 0.82);
  --glass-active-border:  rgba(255, 255, 255, 0.55);
  --glass-active-highlight: rgba(255, 255, 255, 0.90);

  /* Hover tint steps (add / subtract from base tint) */
  --glass-hover-add:  0.05;
  --glass-subtle-sub: 0.03;

  /* ---- Text roles ------------------------------------------- */
  --text-primary:   #ffffff;                      /* on frosted glass */
  --text-active:    #000000;                      /* on GlassActive   */
  --text-secondary: rgba(255, 255, 255, 0.70);    /* subtext, caption */
  --text-muted:     rgba(255, 255, 255, 0.50);    /* labels, kickers  */
  --text-faint:     rgba(255, 255, 255, 0.38);    /* placeholders     */

  /* ---- Scrim / overlay -------------------------------------- */
  --scrim:       rgba(0, 0, 0, 0.35);
  --scrim-light: rgba(0, 0, 0, 0.30);
  --scrim-deep:  rgba(0, 0, 0, 0.40);

  /* ---- Inset shadow recipes --------------------------------- */
  --glass-shadow-std:
    inset 0 1px 0 rgba(255, 255, 255, 0.37),
    inset 0 -1px 0 rgba(255, 255, 255, 0.11),
    0 1px 3px rgba(0, 0, 0, 0.08);

  --glass-shadow-active:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    0 1px 4px rgba(0, 0, 0, 0.10);

  --glass-shadow-lift:
    0 4px 24px rgba(0, 0, 0, 0.18);               /* heaviest allowed */

  --glass-inset-fat:
    inset 16px 16px 9px -18px white,
    inset -12px -12px 6px -14px #b3b3b3,
    inset 2px 2px 1px -2px #b3b3b3,
    inset 0px 0px 22px 0px rgba(242, 242, 242, 0.5);

  --glass-inset-thin:
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.5),
    inset 2px 2px 1px -2px #b3b3b3,
    inset -2px -2px 1px -2px #b3b3b3,
    inset 0px 0px 22px 0px rgba(242, 242, 242, 0.5);

  /* ---- Blur amounts ----------------------------------------- */
  --blur-panel:   24px;   /* standard panels, modals          */
  --blur-surface: 16px;   /* GlassSurface — light             */
  --blur-input:   8px;    /* form inputs                      */
  --blur-scrim:   6px;    /* overlay scrim (4–8px range)      */

  /* ---- Radii ------------------------------------------------ */
  --radius-modal:  28px;
  --radius-card:   20px;  /* 16–24 range, mid                 */
  --radius-card-lg:24px;
  --radius-card-sm:16px;
  --radius-input:  14px;
  --radius-pill:   100px;

  /* ---- Spacing ---------------------------------------------- */
  --pad-page-desktop: 20px 24px 100px;
  --pad-page-mobile:  12px 16px 80px;
  --pad-modal:        36px;
  --pad-modal-mobile: 20px;
  --pad-cta:          18px 36px;
  --pad-btn:          16px 24px;
  --pad-pill:         10px 16px;
  --gap-pill:         10px;  /* 8–12 range                    */
  --gap-field:        18px;  /* 16–20 range                   */
  --content-max:      1040px;

  /* ---- Motion (spring-forward, never linear) --------------- */
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tap:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-quick:  0.12s;
  --dur-std:    0.35s;
  --dur-gentle: 0.55s;

  /* ---- Typography — system stack ---------------------------- */
  --font-system: -apple-system, 'SF Pro Display', 'SF Pro Text',
                 BlinkMacSystemFont, 'Helvetica Neue', 'Inter',
                 Arial, sans-serif;

  /* Semantic type tokens */
  --display-size:    clamp(52px, 9vw, 96px);
  --display-weight:  700;
  --display-lh:      1.02;
  --display-track:   -0.03em;

  --h1-size: 34px; --h1-weight: 700; --h1-lh: 1.12; --h1-track: -0.02em;
  --h2-size: 28px; --h2-weight: 700; --h2-lh: 1.15; --h2-track: -0.02em;
  --h3-size: 22px; --h3-weight: 700; --h3-lh: 1.2;  --h3-track: -0.015em;

  --question-size: 20px; --question-weight: 600; --question-lh: 1.35;

  --body-size:  16px; --body-weight:  400; --body-lh:  1.5;
  --body-lg-size: 18px;
  --body-sm-size: 15px;

  --label-size: 14px; --label-weight: 600; --label-lh: 1.3;
  --button-size: 16px; --button-weight: 600;

  --kicker-size: 12px; --kicker-weight: 600;
  --kicker-track: 0.12em; --kicker-transform: uppercase;
}

/* ---- Base ---------------------------------------------------- */
html, body {
  font-family: var(--font-system);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.ljv-bg {
  background: var(--bg-gradient) fixed;
  min-height: 100vh;
}

/* ---- Semantic type classes ---------------------------------- */
.display, h1.display {
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  margin: 0;
}

.h1, h1 { font-size: var(--h1-size); font-weight: var(--h1-weight);
          line-height: var(--h1-lh); letter-spacing: var(--h1-track); margin: 0; }
.h2, h2 { font-size: var(--h2-size); font-weight: var(--h2-weight);
          line-height: var(--h2-lh); letter-spacing: var(--h2-track); margin: 0; }
.h3, h3 { font-size: var(--h3-size); font-weight: var(--h3-weight);
          line-height: var(--h3-lh); letter-spacing: var(--h3-track); margin: 0; }

.question { font-size: var(--question-size); font-weight: var(--question-weight);
            line-height: var(--question-lh); }

p, .body { font-size: var(--body-size); font-weight: var(--body-weight);
           line-height: var(--body-lh); margin: 0; }
.body-lg { font-size: var(--body-lg-size); line-height: 1.5; }
.body-sm { font-size: var(--body-sm-size); line-height: 1.5; }

.label { font-size: var(--label-size); font-weight: var(--label-weight);
         line-height: var(--label-lh); }

.kicker {
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-track);
  text-transform: var(--kicker-transform);
  color: var(--text-muted);
}

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-faint     { color: var(--text-faint); }
.on-active      { color: var(--text-active); }

/* ---- Glass primitives --------------------------------------- */
.glass-panel {
  border-radius: var(--radius-card);
  overflow: hidden;
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
  background: var(--glass-tint-fat);
  border: 1px solid var(--glass-border-fat);
  box-shadow: var(--glass-shadow-std);
  color: var(--text-primary);
}
.glass-panel.thin {
  background: var(--glass-tint-thin);
  border-color: var(--glass-border-thin);
}
.glass-active {
  border-radius: var(--radius-card);
  overflow: hidden;
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
  background: var(--glass-active-bg);
  border: 1px solid var(--glass-active-border);
  box-shadow: var(--glass-shadow-active);
  color: var(--text-active);
}
.glass-surface {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--glass-surface);
  backdrop-filter: blur(var(--blur-surface));
  -webkit-backdrop-filter: blur(var(--blur-surface));
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

/* ---- Form primitives ---------------------------------------- */
.ljv-input, input.ljv, textarea.ljv, select.ljv {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-input);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  backdrop-filter: blur(var(--blur-input));
  -webkit-backdrop-filter: blur(var(--blur-input));
  transition: border-color var(--dur-std) var(--ease-out),
              background var(--dur-std) var(--ease-out);
}
.ljv-input:focus, input.ljv:focus, textarea.ljv:focus, select.ljv:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
}
.ljv-input::placeholder { color: var(--text-faint); }
::selection { background: rgba(255, 255, 255, 0.28); }

/* ---- Motion keyframes --------------------------------------- */
@keyframes glass-appear {
  from { opacity: 0; transform: scale(0.96) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glass-press {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(0.95); }
}