/* ==========================================================================
   NGBackup — Design Tokens  (the single source of truth for the NG family)
   Premium dark, Adwaita-inspired. Teal + burnt-orange accents.
   Reused by: marketing site, Discourse theme, docs theme, React product UI.
   ========================================================================== */

:root {
  /* ---- Surfaces: charcoal/slate, floating-card depth ---- */
  --bg:            #0E1116;   /* page background — very dark charcoal      */
  --bg-2:          #0B0E12;   /* deeper wells / footer                     */
  --surface:       #161B22;   /* card                                      */
  --surface-2:     #1E2630;   /* elevated card / hover                     */
  --surface-3:     #252F3B;   /* inputs / active rows                      */
  --border:        #2A323D;   /* subtle hairline                          */
  --border-strong: #3A4654;

  /* ---- Text: neutrals carry the AAA contrast load ---- */
  --text:          #E8ECF2;   /* primary  (~13:1 on --bg → AAA)            */
  --text-muted:    #A4B0BE;   /* secondary (~7:1 → AAA)                    */
  --text-faint:    #6B7785;   /* tertiary / captions                      */

  /* ---- Accents ---- */
  --teal:          #2DD4BF;   /* OK / Run / active — bright for dark bg    */
  --teal-2:        #5EEAD4;
  --teal-fill:     #0D9488;   /* primary button fill                      */
  --teal-deep:     #0B6E66;
  --orange:        #E8763A;   /* Restore / secondary — refined burnt orange*/
  --orange-2:      #F59E6B;
  --orange-fill:   #C2541E;
  --error:         #FF6B6B;   /* crisp, clear red                         */
  --warn:          #F5A623;
  --info:          #58A6FF;

  /* ---- Gradients ---- */
  --grad-teal:    linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
  --grad-orange:  linear-gradient(135deg, #F59E6B 0%, #C2541E 100%);
  --grad-hero:    radial-gradient(1200px 600px at 75% -10%, rgba(45,212,191,.18), transparent 60%),
                  radial-gradient(900px 500px at 10% 10%, rgba(232,118,58,.10), transparent 55%);
  --grad-text:    linear-gradient(120deg, #E8ECF2 0%, #5EEAD4 55%, #2DD4BF 100%);

  /* ---- Elevation (deep soft shadows = the Adwaita "float") ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.40);
  --shadow:     0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.55);
  --glow-teal:  0 0 0 1px rgba(45,212,191,.30), 0 8px 32px rgba(45,212,191,.18);

  /* ---- Radius: deeply rounded, no sharp corners ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- Typography ---- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Layout ---- */
  --maxw: 1180px;
  --gap: 24px;
  --nav-h: 68px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --t: .28s var(--ease);
}