/* Calm light palette: warm paper, graphite text, muted violet accents. */

:root {
  color-scheme: light;

  /* Canvas -------------------------------------------------------------- */
  --canvas: #f8f9fb;
  --canvas-deep: #eef0f4;
  --field-rose: 230 190 211;
  --field-lilac: 206 196 230;
  --field-sand: 240 225 203;

  /* Content surfaces (matte, never glass) -------------------------------- */
  --surface: #ffffff;
  --surface-muted: #f4f5f8;
  --surface-sunken: #e9ebf0;
  --hairline: rgba(35, 41, 54, 0.08);
  --hairline-strong: rgba(35, 41, 54, 0.16);

  /* Ink ------------------------------------------------------------------ */
  --ink: #242735;
  --ink-2: #575d6d;
  --ink-3: #6b7180;
  --ink-on-accent: #fffafd;

  /* Accent --------------------------------------------------------------- */
  --accent: #7363ac;
  --accent-strong: #65549b;
  --accent-ink: #60508f;
  --accent-soft: rgba(115, 99, 172, 0.10);
  --accent-tint: #f0edf8;

  /* Semantic ------------------------------------------------------------- */
  --warn: #a8602f;
  --warn-soft: rgba(168, 96, 47, 0.12);
  --live: #3f7d63;
  --live-soft: rgba(63, 125, 99, 0.14);

  /* Glass material -------------------------------------------------------
     The fill is deliberately thin: the backdrop has to survive it, otherwise
     the island reads as a white card with a blur behind it. */
  --glass-fill: linear-gradient(
    152deg,
    rgba(255, 253, 254, 0.34) 0%,
    rgba(253, 245, 250, 0.16) 46%,
    rgba(243, 232, 242, 0.26) 100%
  );
  --glass-fill-clear: linear-gradient(
    152deg,
    rgba(255, 253, 254, 0.16) 0%,
    rgba(253, 245, 250, 0.04) 48%,
    rgba(243, 232, 242, 0.11) 100%
  );
  --glass-fill-regular: linear-gradient(
    152deg,
    rgba(255, 253, 254, 0.46) 0%,
    rgba(253, 245, 250, 0.27) 46%,
    rgba(244, 233, 243, 0.38) 100%
  );
  --glass-blur: 22px;
  --glass-saturate: 132%;
  --glass-brightness: 100%;
  --glass-glow: rgba(255, 246, 252, 0.95);

  /* Shadows: tinted with the canvas hue, never neutral black.
     A floating island gets one tight contact shadow and one wide, very soft
     ambient one - a single mid shadow is what reads as "card". */
  --shadow-row: 0 1px 2px rgba(35, 41, 54, 0.03);
  --shadow-card: 0 2px 8px -4px rgba(35, 41, 54, 0.09);
  --shadow-island: 0 4px 24px -8px rgba(35, 41, 54, 0.12);
  --shadow-float: 0 12px 40px -12px rgba(35, 41, 54, 0.18);

  /* Nested contours: outer radius = inner radius + visible inset.
     Insets include the 1px surface border. Pills are for badges/toggles. */
  --surface-border: 1px;
  --dock-inset: 8px;
  --control-inset: 4px;
  --r-island: 24px;
  --r-card: 20px;
  --r-row: 12px;
  --r-control: 12px;
  --r-control-group: calc(var(--r-control) + var(--control-inset));
  --r-dock-item: calc(var(--r-island) - var(--dock-inset));
  --r-pill: 999px;

  /* Spacing -------------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;

  /* Motion --------------------------------------------------------------- */
  --dur-press: 110ms;
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-lens: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lens: cubic-bezier(0.32, 0.78, 0.12, 1);

  /* Layout --------------------------------------------------------------- */
  --dock-w: 208px;
  --dock-w-compact: 88px;
  --content-max: 720px;
  --content-max-wide: 780px;
  --stage-max: var(--content-max);
  /* Where the floating island starts. The decorative layer reads the same
     value, so the two are always composed against each other. */
  --dock-left: max(12px, var(--safe-l));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tg-top: 0px;
  --tg-bottom: 0px;

  /* Layer scale: never an arbitrary z-index anywhere else ---------------- */
  --z-canvas: 0;
  --z-content: 1;
  --z-edge: 5;
  --z-header: 30;
  --z-nav: 40;
  --z-popover: 60;
  --z-sheet: 70;
  --z-skip: 80;
}

@media (min-width: 768px) {
  :root {
    --stage-max: calc(var(--content-max) + var(--dock-w-compact) + 64px);
    --dock-left: max(20px, calc((100vw - var(--stage-max)) / 2 + 4px));
  }
}

@media (min-width: 1024px) {
  :root {
    --stage-max: calc(var(--content-max-wide) + var(--dock-w) + 88px);
    --dock-left: max(24px, calc((100vw - var(--stage-max)) / 2 + 8px));
  }
}

/* Accessibility modes. Each has a manual data-attribute twin so the cabinet
   can be verified without changing OS settings. */
/* `--a11y-fill` / `--a11y-blur` are unset by default. Every glass surface
   prefers them over its own variant, so a mode always wins the cascade. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-saturate: 100%;
    --glass-brightness: 100%;
    --a11y-blur: 0px;
    --a11y-fill: linear-gradient(152deg, #fffbfd 0%, #f9f1f6 100%);
  }
}

:root[data-transparency="reduced"] {
  --glass-saturate: 100%;
  --glass-brightness: 100%;
  --a11y-blur: 0px;
  --a11y-fill: linear-gradient(152deg, #fffbfd 0%, #f9f1f6 100%);
}

@media (prefers-contrast: more) {
  :root {
    --ink-2: #4c3c4c;
    --ink-3: #5a4a58;
    --hairline: rgba(44, 31, 43, 0.24);
    --hairline-strong: rgba(44, 31, 43, 0.38);
    --a11y-blur: 8px;
    --a11y-fill: linear-gradient(152deg, #fffdfe 0%, #fdf7fa 100%);
  }
}

:root[data-contrast="more"] {
  --ink-2: #4c3c4c;
  --ink-3: #5a4a58;
  --hairline: rgba(44, 31, 43, 0.24);
  --hairline-strong: rgba(44, 31, 43, 0.38);
  --a11y-blur: 8px;
  --a11y-fill: linear-gradient(152deg, #fffdfe 0%, #fdf7fa 100%);
}