/* AI services catalogue: unmixed primaries on white paper (light, default) or black stock (dark). */
:root {
  color-scheme: light;

  --ground: #FFFFFF;
  --tint: #F3F2EE;
  --raised: #FFFFFF;
  --ink: #101114;
  --muted: #52545C;
  --rule: rgba(16, 17, 20, 0.18);
  --rule-strong: #101114;

  --red: #CC1F1A;
  --blue: #1F4FD8;
  --yellow: #FFC800;
  --panel-ink: #101114;

  --action: #CC1F1A;
  --on-action: #FFFFFF;
  --action-hover: #101114;
  --on-action-hover: #FFFFFF;
  --accent: #1F4FD8;
  --detect: #FFC800;
  --on-detect: #101114;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 14px 30px -14px rgba(0, 0, 0, 0.35);

  --font-text: "Bricolage Grotesque", "Cairo", "Bricolage Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cairo", ui-monospace, "SF Mono", Menlo, monospace;
  --track: -0.03em;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  --step-display: clamp(2.1rem, 0.5rem + 4.5vw, 4.5rem);

  --measure: 66ch;
  --gutter: 20px;
  --content-max: 1200px;
  --section-gap: 96px;
  --bar-height: 64px;
  --seam: 6px;

  /* Detection box over assets/portrait.webp, as fractions of the photo. Adjust if the portrait changes. */
  --box-top: 12%;
  --box-left: 23%;
  --box-width: 58%;
  --box-height: 52%;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --ground: #0E0E10;
  --tint: #18181B;
  --raised: #1D1D21;
  --ink: #F4F3EF;
  --muted: #A9ABB4;
  --rule: rgba(255, 255, 255, 0.18);
  --rule-strong: #F4F3EF;

  --panel-ink: #26262B;

  --action: #CC1F1A;
  --action-hover: #FFC800;
  --on-action-hover: #101114;
  --accent: #FFC800;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 14px 30px -14px rgba(0, 0, 0, 0.9);
}

[lang="ar"] { --track: 0; }

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --section-gap: 140px;
  }
}