/* Surfaces: textures, gradients, photo grading, page-spread shading. Per-theme like colors.css. */
:root{
  --mask-edges:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); /* @kind other */
  --grid-line:oklch(46% 0.2 305 / 0.035); /* @kind color */
  --grid-line-major:oklch(46% 0.2 305 / 0.065); /* @kind color */
  --dot-color:oklch(46% 0.2 305 / 0.16); /* @kind color */
  --glow-1:oklch(62% 0.2 305 / 0.16); /* @kind color */
  --glow-2:oklch(72% 0.14 40 / 0.1); /* @kind color */
  --photo-grade:oklch(38% 0.17 305); /* @kind color */
  --photo-grade-opacity:0.55; /* @kind other */
  --scrim:oklch(13% 0.04 305); /* @kind color */
  --gutter-shade:oklch(22% 0.06 305 / 0.07); /* @kind color */
  --paper-edge:oklch(22% 0.06 305 / 0.05); /* @kind color */
  --texture-graph:linear-gradient(var(--grid-line-major) 1px,transparent 1px) 0 0 / 120px 120px,linear-gradient(90deg,var(--grid-line-major) 1px,transparent 1px) 0 0 / 120px 120px,linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0 / 24px 24px; /* @kind other */
  --texture-dots:radial-gradient(var(--dot-color) 1px,transparent 1.4px) 0 0 / 18px 18px; /* @kind other */
  --gradient-glow:radial-gradient(55% 60% at 88% 0%,var(--glow-1),transparent 70%),radial-gradient(40% 50% at 0% 100%,var(--glow-2),transparent 70%); /* @kind other */
  --gradient-brand:radial-gradient(90% 80% at 100% 0%,oklch(46% 0.2 305 / 0.55),transparent 60%),radial-gradient(60% 60% at 0% 100%,oklch(49% 0.16 35 / 0.18),transparent 70%),linear-gradient(160deg,var(--plum-800),var(--plum-950)); /* @kind other */
  --gradient-paper:linear-gradient(180deg,var(--white),var(--mist-25)); /* @kind other */
  --gradient-scrim:linear-gradient(0deg,oklch(13% 0.04 305 / 0.88) 0%,oklch(13% 0.04 305 / 0.35) 45%,transparent 75%); /* @kind other */
  --gradient-sheen:linear-gradient(180deg,oklch(100% 0 0 / 0.16),oklch(100% 0 0 / 0) 60%); /* @kind other */
  --shadow-photo:0 1px 2px oklch(20% 0.05 305 / 0.08),0 12px 24px -8px oklch(20% 0.05 305 / 0.22),0 36px 72px -24px oklch(20% 0.05 305 / 0.3);
  --shadow-button:0 1px 1px oklch(20% 0.08 305 / 0.18),0 4px 12px -4px oklch(38% 0.17 305 / 0.45),inset 0 1px 0 oklch(100% 0 0 / 0.18);
  --shadow-panel:0 1px 0 var(--white) inset,0 1px 2px oklch(20% 0.05 305 / 0.05),0 16px 40px -20px oklch(20% 0.05 305 / 0.2);
}
@media (prefers-color-scheme: dark){
  :root{
    --grid-line:oklch(80% 0.1 305 / 0.035); /* @kind color */
    --grid-line-major:oklch(80% 0.1 305 / 0.06); /* @kind color */
    --dot-color:oklch(80% 0.1 305 / 0.14); /* @kind color */
    --glow-1:oklch(55% 0.2 305 / 0.22); /* @kind color */
    --glow-2:oklch(60% 0.14 40 / 0.08); /* @kind color */
    --photo-grade:oklch(30% 0.12 305); /* @kind color */
    --photo-grade-opacity:0.5; /* @kind other */
    --gutter-shade:oklch(0% 0 0 / 0.35); /* @kind color */
    --paper-edge:oklch(100% 0 0 / 0.04); /* @kind color */
    --gradient-paper:linear-gradient(180deg,oklch(20% 0.028 305),oklch(17% 0.024 305)); /* @kind other */
    --shadow-photo:0 1px 2px oklch(0% 0 0 / 0.5),0 24px 64px -16px oklch(0% 0 0 / 0.7);
    --shadow-button:0 1px 1px oklch(0% 0 0 / 0.4),0 6px 16px -6px oklch(60% 0.2 305 / 0.5),inset 0 1px 0 oklch(100% 0 0 / 0.25);
    --shadow-panel:0 0 0 1px oklch(100% 0 0 / 0.05),0 24px 48px -24px oklch(0% 0 0 / 0.7);
  }
}
@media (prefers-contrast: more){
  :root{
    --grid-line:transparent; /* @kind color */
    --grid-line-major:transparent; /* @kind color */
    --dot-color:transparent; /* @kind color */
    --glow-1:transparent; /* @kind color */
    --glow-2:transparent; /* @kind color */
    --photo-grade-opacity:0; /* @kind other */
    --gutter-shade:transparent; /* @kind color */
    --gradient-brand:linear-gradient(var(--black),var(--black)); /* @kind other */
    --gradient-sheen:none; /* @kind other */
    --shadow-photo:0 0 0 2px currentColor;
    --shadow-button:none;
    --shadow-panel:0 0 0 2px currentColor;
  }
}
[data-theme="light"]{
  --grid-line:oklch(46% 0.2 305 / 0.035); /* @kind color */
  --grid-line-major:oklch(46% 0.2 305 / 0.065); /* @kind color */
  --dot-color:oklch(46% 0.2 305 / 0.16); /* @kind color */
  --glow-1:oklch(62% 0.2 305 / 0.16); /* @kind color */
  --glow-2:oklch(72% 0.14 40 / 0.1); /* @kind color */
  --photo-grade:oklch(38% 0.17 305); /* @kind color */
  --photo-grade-opacity:0.55; /* @kind other */
  --gutter-shade:oklch(22% 0.06 305 / 0.07); /* @kind color */
  --paper-edge:oklch(22% 0.06 305 / 0.05); /* @kind color */
  --gradient-paper:linear-gradient(180deg,var(--white),var(--mist-25)); /* @kind other */
  --shadow-photo:0 1px 2px oklch(20% 0.05 305 / 0.08),0 12px 24px -8px oklch(20% 0.05 305 / 0.22),0 36px 72px -24px oklch(20% 0.05 305 / 0.3);
  --shadow-button:0 1px 1px oklch(20% 0.08 305 / 0.18),0 4px 12px -4px oklch(38% 0.17 305 / 0.45),inset 0 1px 0 oklch(100% 0 0 / 0.18);
  --shadow-panel:0 1px 0 var(--white) inset,0 1px 2px oklch(20% 0.05 305 / 0.05),0 16px 40px -20px oklch(20% 0.05 305 / 0.2);
}
[data-theme="dark"]{
  --grid-line:oklch(80% 0.1 305 / 0.035); /* @kind color */
  --grid-line-major:oklch(80% 0.1 305 / 0.06); /* @kind color */
  --dot-color:oklch(80% 0.1 305 / 0.14); /* @kind color */
  --glow-1:oklch(55% 0.2 305 / 0.22); /* @kind color */
  --glow-2:oklch(60% 0.14 40 / 0.08); /* @kind color */
  --photo-grade:oklch(30% 0.12 305); /* @kind color */
  --photo-grade-opacity:0.5; /* @kind other */
  --gutter-shade:oklch(0% 0 0 / 0.35); /* @kind color */
  --paper-edge:oklch(100% 0 0 / 0.04); /* @kind color */
  --gradient-paper:linear-gradient(180deg,oklch(20% 0.028 305),oklch(17% 0.024 305)); /* @kind other */
  --shadow-photo:0 1px 2px oklch(0% 0 0 / 0.5),0 24px 64px -16px oklch(0% 0 0 / 0.7);
  --shadow-button:0 1px 1px oklch(0% 0 0 / 0.4),0 6px 16px -6px oklch(60% 0.2 305 / 0.5),inset 0 1px 0 oklch(100% 0 0 / 0.25);
  --shadow-panel:0 0 0 1px oklch(100% 0 0 / 0.05),0 24px 48px -24px oklch(0% 0 0 / 0.7);
}
[data-theme="hc"]{
  --grid-line:transparent; /* @kind color */
  --grid-line-major:transparent; /* @kind color */
  --dot-color:transparent; /* @kind color */
  --glow-1:transparent; /* @kind color */
  --glow-2:transparent; /* @kind color */
  --photo-grade-opacity:0; /* @kind other */
  --gutter-shade:transparent; /* @kind color */
  --gradient-brand:linear-gradient(var(--black),var(--black)); /* @kind other */
  --gradient-paper:linear-gradient(var(--white),var(--white)); /* @kind other */
  --gradient-sheen:none; /* @kind other */
  --shadow-photo:0 0 0 2px var(--black);
  --shadow-button:none;
  --shadow-panel:0 0 0 2px var(--black);
}
[data-theme="hc-dark"]{
  --grid-line:transparent; /* @kind color */
  --grid-line-major:transparent; /* @kind color */
  --dot-color:transparent; /* @kind color */
  --glow-1:transparent; /* @kind color */
  --glow-2:transparent; /* @kind color */
  --photo-grade-opacity:0; /* @kind other */
  --gutter-shade:transparent; /* @kind color */
  --gradient-brand:linear-gradient(var(--black),var(--black)); /* @kind other */
  --gradient-paper:linear-gradient(var(--black),var(--black)); /* @kind other */
  --gradient-sheen:none; /* @kind other */
  --shadow-photo:0 0 0 2px var(--white);
  --shadow-button:none;
  --shadow-panel:0 0 0 2px var(--white);
}