/* ─── Design tokens ──────────────────────────────────────────────────────────
   Colours are NEVER hardcoded: the base variables are printed from Customizer
   mods by wps_inline_styles() (includes/customizer/customizer.php); everything
   else below is a color-mix() derivation of them. The fallback values directly
   under :root match what functions.php seeds on activation.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --hover-duration: .35s;
  --duration: 1s;
  --timing: cubic-bezier(.6, .05, .3, 1);

  /* Base colours (Customizer) */
  --primary-color: #6c4cf1;
  --secondary-color: #ff8a3d;
  --mint-color: #3dd9b3;
  --text-color: #17151f;
  --text-muted: #545066;
  --bg-light: #f2f0f8;
  --bg-color: #fafaf7;
  --surface-color: #ffffff;
  --border-color: #e4e1ec;
  --positive-color: #138a6e;
  --negative-color: #c0262d;

  /* Pure neutral for contrast text on coloured surfaces */
  --white: #ffffff;

  /* Fonts (printed from the Customizer font mods) */
  --font-title: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Design-system roles → derived from the base variables */
  --violet: var(--primary-color);
  --tangerine: var(--secondary-color);
  --mint: var(--mint-color);
  --night: var(--text-color);
  --ink: var(--text-color);
  --canvas: var(--bg-color);
  --paper: var(--surface-color);
  --muted: var(--text-muted);
  --line: var(--border-color);
  --line-2: color-mix(in srgb, var(--border-color) 78%, var(--text-color));
  --fd: var(--font-title);
  --fb: var(--font-text);

  /* App chrome (dark UI): the text colour pulled toward the primary */
  --chrome: color-mix(in srgb, var(--text-color) 92%, var(--primary-color));
  --chrome-2: color-mix(in srgb, var(--chrome) 88%, var(--white));
  --chrome-3: color-mix(in srgb, var(--chrome) 76%, var(--white));
  --chrome-text: color-mix(in srgb, var(--white) 92%, var(--primary-color));
  --chrome-muted: color-mix(in srgb, var(--white) 66%, var(--chrome));

  /* Accent (the visitor's colour picker overrides these three inline) */
  --accent: var(--primary-color);
  --accent-ink: var(--primary-color);
  --on-accent: var(--white);
  --accent-2: var(--secondary-color);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--white));
  --sketch: color-mix(in srgb, var(--primary-color) 45%, var(--ocean));

  /* Illustration + tint derivations */
  --berry: color-mix(in srgb, var(--primary-color) 40%, red);
  --ocean: color-mix(in srgb, var(--primary-color) 55%, dodgerblue);
  --sun: color-mix(in srgb, var(--secondary-color) 45%, gold);
  --sun-light: color-mix(in srgb, var(--sun) 40%, var(--white));
  --violet-light: color-mix(in srgb, var(--primary-color) 40%, var(--white));
  --violet-soft: color-mix(in srgb, var(--primary-color) 14%, var(--white));
  --violet-wash: color-mix(in srgb, var(--primary-color) 5%, var(--white));
  --violet-ink: color-mix(in srgb, var(--primary-color) 72%, black);
  --tan-soft: color-mix(in srgb, var(--secondary-color) 22%, var(--white));
  --tan-ink: color-mix(in srgb, var(--secondary-color) 45%, black);
  --mint-soft: color-mix(in srgb, var(--mint-color) 26%, var(--white));
  --mint-pale: color-mix(in srgb, var(--mint-color) 12%, var(--white));
  --mint-line: color-mix(in srgb, var(--mint-color) 45%, var(--white));
  --mint-light: color-mix(in srgb, var(--mint-color) 50%, var(--white));
  --mint-ink: color-mix(in srgb, var(--mint-color) 38%, black);
  --gray-soft: color-mix(in srgb, var(--text-color) 8%, var(--white));
  --gray-ink: color-mix(in srgb, var(--text-color) 82%, var(--white));
  --pill-bg: color-mix(in srgb, var(--primary-color) 8%, var(--white));
  --photo-bg: color-mix(in srgb, var(--primary-color) 10%, var(--white));
  --checker: color-mix(in srgb, var(--text-color) 6%, var(--white));
  --switch-off: color-mix(in srgb, var(--text-color) 22%, var(--white));
  --negative-ink: color-mix(in srgb, var(--negative-color) 85%, black);

  /* Shape + rhythm */
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 22px;
  --shadow: 0 1px 0 color-mix(in srgb, var(--night) 5%, transparent), 0 14px 34px -16px color-mix(in srgb, var(--night) 28%, transparent);
  --shadow-lg: 0 2px 0 color-mix(in srgb, var(--night) 5%, transparent), 0 30px 60px -24px color-mix(in srgb, var(--night) 38%, transparent);
  --ease: cubic-bezier(.6, .05, .3, 1);
  --bar: 64px;
  --rail: 0px;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 40px);
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15C24 8 52 10 80 8.5S140 4 170 6.5c10 .8 20 1.6 27 3.8l-2.4 7.2c-26-2.2-54-1.4-84-.6S44 21.6 6 21.2C2 20 1 17 3 15z'/%3E%3C/svg%3E");
}

:root {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5l4.2 4L17 5.5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}