/* Approved material values. Keep surface roles separate from page selectors. */
@property --light-x {syntax:'<percentage>';inherits:true;initial-value:22%;}
@property --light-y {syntax:'<percentage>';inherits:true;initial-value:0%;}
@property --reflection-angle {syntax:'<angle>';inherits:true;initial-value:118deg;}
:root {
  --material-paper: #fafaf7;
  --material-recess: #f1f0ec;
  --material-text: #293330;
  --material-secondary: #505b57;
  --material-edge: inset 0 1px 0 rgba(255,255,255,.92);
  --material-rest: var(--optical-contact);
  --material-light: var(--optical-glaze);
  --material-ease: cubic-bezier(.16,1,.3,1);

  --optical-glaze:
    linear-gradient(var(--reflection-angle),transparent 18%,rgba(255,255,255,.15) 27%,rgba(255,255,255,.94) 31%,rgba(255,255,255,.86) 36%,rgba(255,255,255,.08) 43%,transparent 48%),
    radial-gradient(ellipse at var(--light-x) var(--light-y),#fff 0%,rgba(250,250,248,.65) 30%,transparent 66%),
    linear-gradient(145deg,#f1f1ed 0%,#fdfcf9 40%,#dedfda 76%,#f2f2ee 100%);
  --optical-contact:inset 0 2px 1px rgba(255,255,255,.96),inset 0 -2px 2px rgba(43,45,43,.18),0 2px 3px rgba(27,31,30,.12),0 16px 30px -17px rgba(27,31,30,.38);
  --ocean-surface:var(--material-paper);--ocean-surface-raised:var(--material-paper);
  --ocean-surface-soft:var(--material-recess);--ocean-ink:var(--material-text);--ocean-ink-muted:var(--material-secondary);
  --ocean-shadow-card:var(--optical-contact);
  --material-hover:inset 0 1px #fff,inset 0 -1px rgba(43,45,43,.18),0 3px 5px rgba(27,31,30,.12),0 22px 36px -16px rgba(27,31,30,.38);
  --material-floating:inset 0 1px rgba(255,255,255,.92),0 8px 18px -8px rgba(27,31,30,.19),0 24px 56px -16px rgba(27,31,30,.24);
}

/* Legacy CMS keeps its approved static reflection; shared palette and shadow are identical. */
:root { --cms-material-glaze:linear-gradient(118deg,transparent 18%,rgba(255,255,255,.94) 31%,rgba(255,255,255,.86) 36%,transparent 48%),linear-gradient(145deg,#f1f1ed,#fdfcf9 40%,#dedfda 76%,#f2f2ee); }