/*
 * ARPOZ Selecta — Design system foundation
 * Shared foundation for the dark and light themes.
 * Deliberately scoped to the new ARPOZ interface; does not restyle legacy content globally.
 */

:root {
  color-scheme: light dark;

  /* Brand palette */
  --arpoz-blue: #289dcc;
  --arpoz-black: #000000;
  --arpoz-white: #ffffff;

  /* Shared layout tokens */
  --arpoz-page-gutter: clamp(12px, 2.2vw, 32px);
  --arpoz-grid-gap: clamp(10px, 1.25vw, 20px);
  --arpoz-content-max: none;
  --arpoz-image-ratio: 100 / 54;
  --arpoz-radius: 0px;
  --arpoz-transition: 160ms ease;
}

/* Palette par défaut : suit le système tant qu’aucun thème n’est appliqué par le script. */
:root[data-arpoz-theme="dark"],
:root:not([data-arpoz-theme]) {
  color-scheme: dark;
  --arpoz-bg: var(--arpoz-black);
  --arpoz-surface: #111111;
  --arpoz-surface-raised: #1a1a1a;
  --arpoz-text: var(--arpoz-white);
  --arpoz-text-muted: #b8b8b8;
  --arpoz-border: #333333;
  --arpoz-link: var(--arpoz-blue);
  --arpoz-link-hover: var(--arpoz-white);
  --arpoz-control-bg: #171717;
  --arpoz-control-text: var(--arpoz-white);
  --arpoz-focus: var(--arpoz-blue);
}

/* Sans préférence enregistrée, la première peinture suit aussi le thème du système. */
@media (prefers-color-scheme: light) {
  :root:not([data-arpoz-theme]) {
    color-scheme: light;
    --arpoz-bg: var(--arpoz-white);
    --arpoz-surface: #f5f5f5;
    --arpoz-surface-raised: #eeeeee;
    --arpoz-text: var(--arpoz-black);
    --arpoz-text-muted: #555555;
    --arpoz-border: #d5d5d5;
    --arpoz-link: var(--arpoz-blue);
    --arpoz-link-hover: var(--arpoz-black);
    --arpoz-control-bg: #f0f0f0;
    --arpoz-control-text: var(--arpoz-black);
    --arpoz-focus: var(--arpoz-blue);
  }
}

:root[data-arpoz-theme="light"] {
  color-scheme: light;
  --arpoz-bg: var(--arpoz-white);
  --arpoz-surface: #f5f5f5;
  --arpoz-surface-raised: #eeeeee;
  --arpoz-text: var(--arpoz-black);
  --arpoz-text-muted: #555555;
  --arpoz-border: #d5d5d5;
  --arpoz-link: var(--arpoz-blue);
  --arpoz-link-hover: var(--arpoz-black);
  --arpoz-control-bg: #f0f0f0;
  --arpoz-control-text: var(--arpoz-black);
  --arpoz-focus: var(--arpoz-blue);
}

/* Apply palette only to the new site shell, not indiscriminately to legacy templates. */
.arpoz-site,
.arpoz-home {
  color: var(--arpoz-text);
  background: var(--arpoz-bg);
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  transition: background-color var(--arpoz-transition), color var(--arpoz-transition);
}

.arpoz-site *,
.arpoz-home * {
  box-sizing: border-box;
}

.arpoz-site a,
.arpoz-home a {
  color: inherit;
  text-decoration: none;
  transition: color var(--arpoz-transition), background-color var(--arpoz-transition), border-color var(--arpoz-transition);
}

.arpoz-site a:hover,
.arpoz-home a:hover,
.arpoz-site a:focus-visible,
.arpoz-home a:focus-visible {
  color: var(--arpoz-link);
}

.arpoz-site :focus-visible,
.arpoz-home :focus-visible {
  outline: 2px solid var(--arpoz-focus);
  outline-offset: 3px;
}

/* Full-width responsive grid primitives */
.arpoz-page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--arpoz-grid-gap);
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: var(--arpoz-page-gutter);
}

.arpoz-grid-item {
  min-width: 0;
}

/* All editorial images use the project ratio: 100:54 (approximately 1.852:1). */
.arpoz-media {
  display: block;
  width: 100%;
  aspect-ratio: var(--arpoz-image-ratio);
  overflow: hidden;
  background: var(--arpoz-surface);
}

.arpoz-media img,
img.arpoz-ratio-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--arpoz-image-ratio);
  object-fit: cover;
  object-position: center;
}

/* Section titles: first letter in blue; all remaining letters use the active text color. */
.arpoz-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.02em;
  margin: 0 0 0.7em;
  color: var(--arpoz-text);
  font-size: clamp(1.15rem, 1.6vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.arpoz-section-title::first-letter {
  color: var(--arpoz-blue);
  font-size: 1.22em;
}

/* Link/button accent is blue on hover only; category/type labels are not recolored here. */
.arpoz-action,
.arpoz-theme-toggle {
  color: var(--arpoz-text);
  background: transparent;
  border: 1px solid var(--arpoz-border);
  border-radius: var(--arpoz-radius);
  cursor: pointer;
  min-height: 40px;
  padding: 0.55em 0.85em;
  font: inherit;
}

.arpoz-action:hover,
.arpoz-theme-toggle:hover {
  color: var(--arpoz-blue);
  border-color: var(--arpoz-blue);
}

.arpoz-type-label {
  color: var(--arpoz-text-muted);
}

/* Basic responsive behavior: grid content stacks on narrow screens. */
@media (max-width: 767px) {
  :root {
    --arpoz-page-gutter: 12px;
    --arpoz-grid-gap: 12px;
  }

  .arpoz-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .arpoz-grid-item {
    grid-column: 1 / -1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arpoz-site,
  .arpoz-home,
  .arpoz-site *,
  .arpoz-home * {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}