/*
 * ArshPress page looks. A look is a class on the page wrapper (arsh-look arsh-look-<name>) that overrides the page-level
 * tokens: colors, radius scale, shadows, display weight. Part 1 = the eight looks (the only place with color literals,
 * and only inside custom-property declarations; each look is WCAG-AA verified by tools/contrast-looks.js).
 * Part 2 = the modern layer shared by all looks: it styles the arsh/* blocks through variables only, RTL-first (logical
 * properties). Loaded after tokens.css. Names must match Builder/Looks.php (a unit test compares them).
 */

/* ---- 1. looks ---- */
.arsh-look-indigo {
  --arsh-surface: #ffffff; --arsh-surface-2: #f5f6fb; --arsh-ink: #14162b; --arsh-muted: #575b78;
  --arsh-primary: #3f37c9; --arsh-primary-hover: #322ba8; --arsh-on-primary: #ffffff;
  --arsh-accent: #f2c14e; --arsh-accent-text: #8a5a00; --arsh-border: #8a8ea8; --arsh-line: #e1e3f0;
  --arsh-focus-ring: rgba(63, 55, 201, 0.28);
  --arsh-radius-sm: 8px; --arsh-radius-md: 12px; --arsh-radius-lg: 20px; --arsh-radius-xl: 36px; --arsh-btn-radius: 999px;
  --arsh-shadow-1: 0 1px 2px rgba(20, 22, 43, 0.06), 0 1px 3px rgba(20, 22, 43, 0.08);
  --arsh-shadow-2: 0 10px 30px -12px rgba(63, 55, 201, 0.28), 0 2px 6px rgba(20, 22, 43, 0.06);
  --arsh-shadow-3: 0 24px 56px -20px rgba(63, 55, 201, 0.38);
  --arsh-display-weight: 800; --arsh-glass-mix: 78%; --arsh-glass-blur: 14px;
}
.arsh-look-night {
  --arsh-surface: #0f1020; --arsh-surface-2: #171932; --arsh-ink: #ecedf9; --arsh-muted: #a9acc8;
  --arsh-primary: #a8a5ff; --arsh-primary-hover: #c3c1ff; --arsh-on-primary: #0f1020;
  --arsh-accent: #f2c14e; --arsh-accent-text: #f2c14e; --arsh-border: #6d7194; --arsh-line: #2a2d4d;
  --arsh-focus-ring: rgba(168, 165, 255, 0.45);
  --arsh-radius-sm: 8px; --arsh-radius-md: 14px; --arsh-radius-lg: 22px; --arsh-radius-xl: 40px; --arsh-btn-radius: 999px;
  --arsh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --arsh-shadow-2: 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  --arsh-shadow-3: 0 28px 60px -20px rgba(0, 0, 0, 0.8);
  --arsh-display-weight: 800; --arsh-glass-mix: 62%; --arsh-glass-blur: 16px;
}
.arsh-look-paper {
  --arsh-surface: #f6f1e7; --arsh-surface-2: #ece4d3; --arsh-ink: #17142b; --arsh-muted: #514c68;
  --arsh-primary: #b43a0b; --arsh-primary-hover: #8f2d08; --arsh-on-primary: #ffffff;
  --arsh-accent: #f2c14e; --arsh-accent-text: #6f4700; --arsh-border: #7a725f; --arsh-line: #d8cfba;
  --arsh-focus-ring: rgba(180, 58, 11, 0.3);
  --arsh-radius-sm: 6px; --arsh-radius-md: 10px; --arsh-radius-lg: 18px; --arsh-radius-xl: 32px; --arsh-btn-radius: 999px;
  --arsh-shadow-1: 0 1px 2px rgba(23, 20, 43, 0.08);
  --arsh-shadow-2: 0 10px 24px -14px rgba(23, 20, 43, 0.35);
  --arsh-shadow-3: 0 22px 48px -22px rgba(23, 20, 43, 0.45);
  --arsh-display-weight: 900; --arsh-glass-mix: 80%; --arsh-glass-blur: 8px;
}
.arsh-look-coral {
  --arsh-surface: #fffaf8; --arsh-surface-2: #fdeeea; --arsh-ink: #2a1215; --arsh-muted: #6b4a4e;
  --arsh-primary: #b91c3a; --arsh-primary-hover: #961530; --arsh-on-primary: #ffffff;
  --arsh-accent: #ff9f80; --arsh-accent-text: #8f3b00; --arsh-border: #a07378; --arsh-line: #f3d5d0;
  --arsh-focus-ring: rgba(185, 28, 58, 0.3);
  --arsh-radius-sm: 12px; --arsh-radius-md: 18px; --arsh-radius-lg: 28px; --arsh-radius-xl: 48px; --arsh-btn-radius: 999px;
  --arsh-shadow-1: 0 1px 2px rgba(42, 18, 21, 0.08);
  --arsh-shadow-2: 0 14px 30px -14px rgba(185, 28, 58, 0.35);
  --arsh-shadow-3: 0 28px 54px -20px rgba(185, 28, 58, 0.42);
  --arsh-display-weight: 800; --arsh-glass-mix: 80%; --arsh-glass-blur: 12px;
}
.arsh-look-forest {
  --arsh-surface: #f6faf6; --arsh-surface-2: #e6f0e8; --arsh-ink: #10231a; --arsh-muted: #43594c;
  --arsh-primary: #1d6b46; --arsh-primary-hover: #14502f; --arsh-on-primary: #ffffff;
  --arsh-accent: #d9b44a; --arsh-accent-text: #6b5200; --arsh-border: #688574; --arsh-line: #cfe0d3;
  --arsh-focus-ring: rgba(29, 107, 70, 0.3);
  --arsh-radius-sm: 4px; --arsh-radius-md: 8px; --arsh-radius-lg: 12px; --arsh-radius-xl: 20px; --arsh-btn-radius: 10px;
  --arsh-shadow-1: 0 1px 2px rgba(16, 35, 26, 0.08);
  --arsh-shadow-2: 0 6px 18px -10px rgba(16, 35, 26, 0.4);
  --arsh-shadow-3: 0 18px 40px -18px rgba(16, 35, 26, 0.5);
  --arsh-display-weight: 700; --arsh-glass-mix: 86%; --arsh-glass-blur: 6px;
}
.arsh-look-mono {
  --arsh-surface: #ffffff; --arsh-surface-2: #f0f0f0; --arsh-ink: #0a0a0a; --arsh-muted: #4d4d4d;
  --arsh-primary: #0a0a0a; --arsh-primary-hover: #333333; --arsh-on-primary: #ffffff;
  --arsh-accent: #ffd400; --arsh-accent-text: #5c4a00; --arsh-border: #6b6b6b; --arsh-line: #d4d4d4;
  --arsh-focus-ring: rgba(10, 10, 10, 0.3);
  --arsh-radius-sm: 0px; --arsh-radius-md: 2px; --arsh-radius-lg: 4px; --arsh-radius-xl: 0px; --arsh-btn-radius: 0px;
  --arsh-shadow-1: 2px 2px 0 #0a0a0a;
  --arsh-shadow-2: 5px 5px 0 #0a0a0a;
  --arsh-shadow-3: 8px 8px 0 #0a0a0a;
  --arsh-display-weight: 900; --arsh-glass-mix: 100%; --arsh-glass-blur: 0px;
}
.arsh-look-glass {
  --arsh-surface: #0b0d24; --arsh-surface-2: #151a3d; --arsh-ink: #f1f3ff; --arsh-muted: #b4bae0;
  --arsh-primary: #8fb4ff; --arsh-primary-hover: #b5cdff; --arsh-on-primary: #0b0d24;
  --arsh-accent: #ff9bd0; --arsh-accent-text: #ff9bd0; --arsh-border: #7480b8; --arsh-line: rgba(255, 255, 255, 0.16);
  --arsh-focus-ring: rgba(143, 180, 255, 0.5);
  --arsh-radius-sm: 12px; --arsh-radius-md: 18px; --arsh-radius-lg: 28px; --arsh-radius-xl: 48px; --arsh-btn-radius: 999px;
  --arsh-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  --arsh-shadow-2: 0 16px 40px -16px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
  --arsh-shadow-3: 0 30px 70px -24px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.16) inset;
  --arsh-display-weight: 800; --arsh-glass-mix: 38%; --arsh-glass-blur: 22px;
}
.arsh-look-gold {
  --arsh-surface: #fffbf0; --arsh-surface-2: #f7ecd0; --arsh-ink: #2b2100; --arsh-muted: #5f5128;
  --arsh-primary: #7a5200; --arsh-primary-hover: #5c3d00; --arsh-on-primary: #ffffff;
  --arsh-accent: #f2c14e; --arsh-accent-text: #7a5200; --arsh-border: #8c7a4a; --arsh-line: #e8d8a8;
  --arsh-focus-ring: rgba(122, 82, 0, 0.3);
  --arsh-radius-sm: 8px; --arsh-radius-md: 14px; --arsh-radius-lg: 22px; --arsh-radius-xl: 40px; --arsh-btn-radius: 999px;
  --arsh-shadow-1: 0 1px 2px rgba(43, 33, 0, 0.1);
  --arsh-shadow-2: 0 12px 28px -14px rgba(122, 82, 0, 0.45);
  --arsh-shadow-3: 0 26px 56px -22px rgba(122, 82, 0, 0.55);
  --arsh-display-weight: 700; --arsh-glass-mix: 82%; --arsh-glass-blur: 10px;
}

/* ---- 2. modern layer (every look) ---- */
.arsh-look {
  background: var(--arsh-surface);
  color: var(--arsh-ink);
  font-family: var(--arsh-font);
  line-height: var(--arsh-leading);
  overflow-x: clip;
}
.arsh-look-glass {
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--arsh-primary) 28%, transparent), transparent 70%),
    radial-gradient(50% 45% at 10% 40%, color-mix(in srgb, var(--arsh-accent) 22%, transparent), transparent 70%),
    var(--arsh-surface);
  background-attachment: fixed;
}
.arsh-look :focus-visible { outline: 3px solid var(--arsh-primary); outline-offset: 3px; }

/* rhythm: sections breathe more on large screens */
.arsh-look .arsh-section--space-lg { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.arsh-look .arsh-section--space-xl { padding-block: clamp(3.5rem, 8vw, 7rem); }
.arsh-look .arsh-section { gap: var(--arsh-space-5); }
.arsh-look .arsh-container { display: flex; flex-direction: column; gap: var(--arsh-space-5); }

/* display typography */
.arsh-look h1.arsh-heading,
.arsh-look .arsh-hero__title {
  font-size: clamp(2.25rem, 1.1rem + 5vw, 4.75rem);
  font-weight: var(--arsh-display-weight);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.arsh-look h2.arsh-heading,
.arsh-look .arsh-cta__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem);
  font-weight: var(--arsh-display-weight);
  line-height: 1.25;
  text-wrap: balance;
}
.arsh-look h3.arsh-heading { font-size: var(--arsh-text-xl); font-weight: 700; }
.arsh-look .arsh-hero__text,
.arsh-look .arsh-cta__text { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); color: inherit; }
.arsh-look .arsh-section--bg-surface .arsh-hero__text,
.arsh-look .arsh-hero--bg-surface .arsh-hero__text,
.arsh-look .arsh-hero--bg-surface-2 .arsh-hero__text { color: var(--arsh-muted); }
.arsh-look .arsh-text { color: var(--arsh-muted); }
.arsh-look .arsh-section--bg-primary .arsh-text,
.arsh-look .arsh-cta--bg-primary .arsh-text { color: inherit; }
.arsh-look .arsh-text--center { margin-inline: auto; max-inline-size: var(--arsh-measure); }

/* heroes: layered gradients, curved bottom edge, arch image */
.arsh-look .arsh-hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 8vw, 7rem); gap: clamp(2rem, 5vw, 5rem); }
.arsh-look .arsh-hero--center {
  background:
    radial-gradient(60% 80% at 20% 0%, color-mix(in srgb, var(--arsh-primary) 24%, transparent), transparent 70%),
    radial-gradient(50% 70% at 85% 10%, color-mix(in srgb, var(--arsh-accent) 34%, transparent), transparent 70%),
    linear-gradient(180deg, var(--arsh-surface-2), var(--arsh-surface));
  border-end-start-radius: clamp(2rem, 8vw, 6rem);
  border-end-end-radius: clamp(2rem, 8vw, 6rem);
}
.arsh-look .arsh-hero--split {
  background:
    radial-gradient(55% 70% at 100% 0%, color-mix(in srgb, var(--arsh-primary) 16%, transparent), transparent 70%),
    var(--arsh-surface-2);
  padding-inline: clamp(1rem, 5vw, 5rem);
}
.arsh-look .arsh-hero__img { filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--arsh-primary) 28%, transparent)); border-radius: 0; }
.arsh-look .arsh-hero__title { max-inline-size: 18ch; }
.arsh-look .arsh-hero--center .arsh-hero__title { max-inline-size: 20ch; }

/* gradient bands */
.arsh-look .arsh-section--bg-primary,
.arsh-look .arsh-cta--bg-primary {
  background:
    radial-gradient(40% 90% at 90% 0%, color-mix(in srgb, var(--arsh-accent) 14%, transparent), transparent 70%),
    linear-gradient(135deg, var(--arsh-primary), var(--arsh-primary-hover));
}
.arsh-look .arsh-cta { border-radius: var(--arsh-radius-xl); padding-block: clamp(2.5rem, 6vw, 5rem); padding-inline: clamp(1.25rem, 5vw, 4rem); box-shadow: var(--arsh-shadow-3); }
.arsh-look .arsh-cta--bg-primary .arsh-button--outline { color: var(--arsh-on-primary); border-color: var(--arsh-on-primary); }
.arsh-look .arsh-cta--bg-primary .arsh-button--outline:hover { background: var(--arsh-overlay-light); }
.arsh-look .arsh-section--bg-primary .arsh-button--outline { color: var(--arsh-on-primary); border-color: var(--arsh-on-primary); }
.arsh-look .arsh-section--bg-primary .arsh-button--primary { background: var(--arsh-on-primary); border-color: var(--arsh-on-primary); color: var(--arsh-primary); }

/* cards: glass, lift */
.arsh-look .arsh-card { border-radius: var(--arsh-radius-lg); transition: transform 0.28s var(--arsh-ease), box-shadow 0.28s var(--arsh-ease); }
.arsh-look .arsh-card--raised {
  background: color-mix(in srgb, var(--arsh-surface) var(--arsh-glass-mix), transparent);
  -webkit-backdrop-filter: blur(var(--arsh-glass-blur));
  backdrop-filter: blur(var(--arsh-glass-blur));
  border: 1px solid var(--arsh-line);
  box-shadow: var(--arsh-shadow-2);
}
.arsh-look .arsh-card--outlined { border-color: var(--arsh-border); background: var(--arsh-surface); }
.arsh-look .arsh-card--plain { background: transparent; }
.arsh-look .arsh-card--raised:hover { transform: translateY(-4px); box-shadow: var(--arsh-shadow-3); }
.arsh-look .arsh-card .arsh-icon { padding: var(--arsh-space-3); border-radius: var(--arsh-radius-md); background: var(--arsh-surface-2); box-sizing: content-box; inline-size: var(--arsh-space-6); block-size: var(--arsh-space-6); align-self: flex-start; }
.arsh-look .arsh-card .arsh-image__img { border-radius: var(--arsh-radius-md); inline-size: 100%; block-size: auto; }

/* buttons */
.arsh-look .arsh-button { border-radius: var(--arsh-btn-radius); font-weight: 700; padding-inline: var(--arsh-space-6); transition: transform 0.2s var(--arsh-ease), box-shadow 0.2s var(--arsh-ease), background-color var(--arsh-duration) var(--arsh-ease), color var(--arsh-duration) var(--arsh-ease); }
.arsh-look .arsh-button--primary { box-shadow: var(--arsh-shadow-2); }
.arsh-look .arsh-button:hover { transform: translateY(-2px); }

/* quotes, lists, accordion, gallery, nav */
.arsh-look .arsh-quote--accent {
  position: relative;
  border-inline-start: 0;
  padding-block: var(--arsh-space-7) var(--arsh-space-5);
  padding-inline: var(--arsh-space-5);
  border-radius: var(--arsh-radius-lg);
  background: color-mix(in srgb, var(--arsh-surface) var(--arsh-glass-mix), transparent);
  -webkit-backdrop-filter: blur(var(--arsh-glass-blur));
  backdrop-filter: blur(var(--arsh-glass-blur));
  border: 1px solid var(--arsh-line);
  box-shadow: var(--arsh-shadow-2);
  transition: transform 0.28s var(--arsh-ease), box-shadow 0.28s var(--arsh-ease);
}
.arsh-look .arsh-quote--accent:hover { transform: translateY(-4px); box-shadow: var(--arsh-shadow-3); }
.arsh-look .arsh-quote--accent::before { content: "\201D"; position: absolute; inset-block-start: var(--arsh-space-3); inset-inline-start: var(--arsh-space-5); font-size: 4rem; line-height: 1; color: var(--arsh-accent-text); }
.arsh-look .arsh-list--plain { display: flex; flex-wrap: wrap; gap: var(--arsh-space-3); }
.arsh-look .arsh-list--plain .arsh-list__item { margin: 0; padding-block: var(--arsh-space-1); padding-inline: var(--arsh-space-4); border: 1px solid var(--arsh-line); border-radius: var(--arsh-radius-pill); background: var(--arsh-surface); white-space: nowrap; }
.arsh-look .arsh-list--check .arsh-list__item::before { color: var(--arsh-accent-text); }
.arsh-look .arsh-accordion--boxed { border-radius: var(--arsh-radius-md); transition: box-shadow 0.2s var(--arsh-ease); }
.arsh-look .arsh-accordion--boxed[open] { box-shadow: var(--arsh-shadow-2); }
.arsh-look .arsh-gallery__img { border-radius: var(--arsh-radius-lg); transition: transform 0.35s var(--arsh-ease); }
.arsh-look .arsh-gallery__item:hover .arsh-gallery__img { transform: scale(1.03); }
.arsh-look .arsh-nav__link { color: inherit; text-underline-offset: 0.35em; }
.arsh-look .arsh-nav--stack .arsh-nav__list { flex-direction: column; gap: var(--arsh-space-2); }
.arsh-look .arsh-divider { border-color: var(--arsh-line); }

@media (prefers-reduced-motion: reduce) {
  .arsh-look .arsh-card, .arsh-look .arsh-button, .arsh-look .arsh-gallery__img { transition: none; }
  .arsh-look .arsh-card--raised:hover, .arsh-look .arsh-quote--accent:hover, .arsh-look .arsh-button:hover, .arsh-look .arsh-gallery__item:hover .arsh-gallery__img { transform: none; }
}

/* edge-to-edge heroes and full-width art */
.arsh-look .arsh-section:has(> .arsh-hero) { padding-inline: 0; }
.arsh-look .arsh-section > .arsh-image,
.arsh-look .arsh-container > .arsh-image,
.arsh-look .arsh-column > .arsh-image { inline-size: 100%; }
.arsh-look .arsh-section > .arsh-image .arsh-image__img,
.arsh-look .arsh-container > .arsh-image .arsh-image__img { inline-size: 100%; border-radius: 0; }
.arsh-look .arsh-card h2.arsh-heading { font-size: var(--arsh-text-2xl); line-height: var(--arsh-leading-tight); }