/* Public surfaces use the Cercla product palette and control geometry. */
:root {
  --c-brand: #0014e3;
  --c-ink: #070922;
  --c-muted: #65688b;
  --c-tint: #e9ebfb;
  --c-white: #ffffff;

  --brand-primary: var(--c-brand);
  --brand-accent: var(--c-brand);
  --brand-soft: color-mix(in srgb, var(--c-brand) 24%, var(--c-white));
  --brand-dark: var(--c-ink);
  --brand-background: color-mix(in srgb, var(--c-tint) 30%, var(--c-white));

  --surface-primary: var(--brand-background);
  --surface-card: var(--c-white);
  --surface-soft: color-mix(in srgb, var(--c-brand) 3%, var(--c-white));
  --border-light: color-mix(in srgb, var(--c-tint) 65%, var(--c-white));
  --border-strong: color-mix(in srgb, var(--c-muted) 25%, var(--c-white));
  --text-primary: var(--brand-dark);
  --text-secondary: color-mix(in srgb, var(--c-ink) 65%, var(--c-white));
  --text-muted: var(--c-muted);
  --text-on-brand: var(--c-white);
  --accent-soft: color-mix(
    in srgb,
    var(--brand-primary) 7%,
    var(--surface-card)
  );
  --glass-edge: color-mix(in srgb, var(--brand-primary) 10%, transparent);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --control-radius: var(--radius-full);
  --control-h: 44px;
  --control-pad-x: 20px;
  --control-font: 15px;
  --container: 1180px;
}