/* ============================================================
   Rosary OS Design System — tokens (ported from the DC kit)
   Monochrome deep-neutral palette + a single Mercury Blue accent.
   Fonts: Manrope substitutes the brand's Arcadia typefaces.
   ============================================================ */

:root {
  /* — Families — */
  --font-arcadiadisplay: 'Manrope', 'arcadiaDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-arcadia:        'Manrope', 'arcadia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-arcadiadisplay);
  --font-body:    var(--font-arcadia);

  /* — Weights (light is the signature; never exceed 530) — */
  --font-weight-w360:    360;
  --font-weight-regular: 400;
  --font-weight-w420:    420;
  --font-weight-w480:    480;
  --font-weight-w530:    530;

  /* OpenType: stylistic set 01 is on across the brand */
  --font-features: 'ss01' on;

  /* — Brand accent (reserve strictly for primary CTAs) — */
  --color-mercury-blue: #5266eb;
  --color-ghost-blue:   #cdddff;

  /* — Neutrals (background → foreground) — */
  --color-deep-space:     #171721;
  --color-midnight-slate: #1e1e2a;
  --color-graphite:       #272735;
  --color-lead:           #70707d;
  --color-silver:         #c3c3cc;
  --color-starlight:      #ededf3;
  --color-pure-white:     #ffffff;

  /* — Surfaces (elevation by color, never shadow) — */
  --surface-abyss:       var(--color-deep-space);
  --surface-base:        var(--color-midnight-slate);
  --surface-interactive: var(--color-graphite);

  /* — Semantic aliases — */
  --bg-page:        var(--color-midnight-slate);
  --bg-page-deep:   var(--color-deep-space);
  --bg-interactive: var(--color-graphite);

  --text-primary:   var(--color-starlight);
  --text-secondary: var(--color-silver);
  --text-on-accent: var(--color-pure-white);

  --border-subtle:  var(--color-lead);
  --border-divider: color-mix(in srgb, var(--color-lead) 45%, transparent);

  --accent:         var(--color-mercury-blue);
  --accent-hover:   color-mix(in srgb, var(--color-mercury-blue) 88%, #ffffff);
  --accent-soft:    color-mix(in srgb, var(--color-ghost-blue) 20%, transparent);

  /* — Radius / layout — */
  --radius-cards:      0px;
  --radius-containers: 4px;
  --radius-pill:       999px;
  --page-max-width:    1200px;

  /* — Hero gradients (dark) — */
  --hero-bg: radial-gradient(120% 90% at 50% 8%, #2b2f4d 0%, rgba(43,47,77,0) 55%), radial-gradient(140% 70% at 50% 100%, #14141d 0%, rgba(20,20,29,0) 60%), linear-gradient(180deg, #20243a 0%, #1b1c2a 42%, #1e1e2a 100%);
  --hero-glow: radial-gradient(60% 100% at 50% 100%, rgba(82,102,235,0.16) 0%, rgba(82,102,235,0) 70%);
}