/* ============================================================================
   RING — presentation site DESIGN TOKENS
   ----------------------------------------------------------------------------
   Single source of truth for the marketing site's design language. Values are
   lifted verbatim from the real product theme (merged_code/Ring/Resources/
   RingTheme.xaml) so the site looks like the product buyers will see in a demo.

   Do not hard-code colors/spacing in component CSS — reference these vars.
   ============================================================================ */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --surface:        #F8FAFC;   /* page background        (Ring.Color.Surface)    */
  --card:           #FFFFFF;   /* card surface           (Ring.Color.Card)       */
  --card-inset:     #F1F5F9;   /* wells / insets         (Ring.Color.CardInset)  */
  --surface-dark:   #1E1E1E;   /* dark chrome / footer   (Ring.Color.SurfaceDark)*/

  /* ---- Borders ---------------------------------------------------------- */
  --border:         #E2E8F0;   /* (Ring.Color.Border)       */
  --border-strong:  #CBD5E1;   /* (Ring.Color.BorderStrong) */

  /* ---- Brand accent (the product blue) --------------------------------- */
  --accent:         #2563EB;   /* (Ring.Color.Accent)      */
  --accent-deep:    #1E3A8A;   /* (Ring.Color.AccentDeep)  */
  --accent-soft:    #EFF6FF;   /* (Ring.Color.AccentSoft)  */

  /* ---- State ------------------------------------------------------------ */
  --success:        #1E7D34;   --success-soft: #E9F5EC;
  --warn:           #B45309;   --warn-soft:    #FEF6E7;
  --danger:         #C62828;   --danger-deep:  #8E0000;  --danger-soft: #FBE9E9;
  --info:           #0E7490;   --info-soft:    #E6F4F7;
  --idle:           #6B7280;   --idle-soft:    #F1F2F4;

  /* ---- Text tiers ------------------------------------------------------- */
  --text:                 #111827;   /* primary    */
  --text-muted:           #5B6472;   /* secondary  */
  --text-faint:           #94A3B8;   /* hints      */
  --text-on-accent:       #FFFFFF;
  --text-on-accent-muted: #CFE0FF;

  /* ---- Tank liquid (used in screen mockups) ---------------------------- */
  --liquid:         #3B82F6;
  --liquid-surface: #60A5FA;

  /* ---- Active batch-step highlight (used in batch mockups) -------------- */
  --active-step:      #F7E7A9;
  --active-step-edge: #D4AF37;
  --active-step-text: #1F1A0D;

  /* ---- The one permitted gradient (hero band) -------------------------- */
  --hero-gradient: linear-gradient(100deg, #1E3A8A 0%, #2563EB 100%);

  /* ---- Status badges (Shipped / In progress / Roadmap) ----------------- */
  --badge-shipped-bg:  var(--success-soft);  --badge-shipped-fg:  var(--success);
  --badge-progress-bg: var(--warn-soft);     --badge-progress-fg: var(--warn);
  --badge-roadmap-bg:  var(--info-soft);     --badge-roadmap-fg:  var(--info);

  /* ---- Value tiers (Hero / Core / Supporting / Under-the-hood) --------- */
  --tier-hero:        var(--accent);
  --tier-core:        var(--success);
  --tier-supporting:  var(--info);
  --tier-engine:      var(--idle);

  /* ---- Type scale ------------------------------------------------------- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", ui-monospace, "SFMono-Regular", monospace;

  --fs-display:  clamp(2.4rem, 4.5vw, 3.6rem);  /* marketing hero headline */
  --fs-h1:       clamp(1.9rem, 3vw, 2.5rem);
  --fs-h2:       clamp(1.4rem, 2.2vw, 1.8rem);
  --fs-h3:       1.15rem;
  --fs-kpi:      2.4rem;                          /* big glance numerals     */
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.78rem;
  --fs-overline: 0.7rem;

  /* ---- Spacing (Ring 4/8/12/16/24 rhythm) ------------------------------ */
  --space-xs: 4px;
  --space-s:  8px;
  --space-m:  12px;
  --space-l:  16px;
  --space-xl: 24px;
  --space-2xl: 40px;
  --space-3xl: 64px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-card:    8px;
  --radius-control: 6px;
  --radius-pill:    999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-card:       0 1px 10px rgba(17, 24, 39, 0.10);
  --shadow-card-hover: 0 3px 16px rgba(17, 24, 39, 0.18);
  --shadow-panel:      -8px 0 32px rgba(17, 24, 39, 0.18);

  /* ---- Layout ----------------------------------------------------------- */
  --maxw: 1200px;
  --maxw-prose: 760px;
  --nav-h: 64px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  220ms;
}

/* Respect users who prefer reduced motion (technical buyers on locked-down
   machines, accessibility). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}