/* ==========================================================================
   variables.css — Design tokens (THE configuration file)
   --------------------------------------------------------------------------
   Change colors, fonts, spacing and radii here once and the whole site
   updates. These mirror the original Plasma template's dark theme.
   ========================================================================== */

:root {
  /* ---- Brand / accent colors ------------------------------------------- */
  --brand-purple:  #725fe8;   /* primary gradient start  */
  --brand-violet:  #5a58c2;   /* secondary / pill border */
  --brand-magenta: #ce47eb;   /* gradient middle         */
  --brand-coral:   #f57a74;   /* gradient end            */
  --brand-blue:    #006aaf;   /* chart accent            */
  --brand-logo:    #9a5cd0;   /* logo mark fill          */

  /* The signature text/background gradient used across the site */
  --brand-gradient: linear-gradient(to right, #725fe8 0%, #ce47eb 50%, #f57a74 100%);

  /* ---- Surfaces & text ------------------------------------------------- */
  --color-bg:          #010003;   /* page background (near-black)         */
  --color-surface:     #08080b;   /* cards / panels                      */
  --color-surface-2:   #0e0e12;   /* elevated cards / inputs             */
  --color-surface-3:   #16161b;   /* hover / nested panels               */

  --color-text:        #fefffe;   /* primary text (near-white)           */
  --color-text-muted:  #a3a9ac;   /* secondary / paragraph text          */
  --color-text-dim:    #6b7177;   /* tertiary / captions, axis labels    */

  --color-border:        rgba(255, 255, 255, 0.08);  /* hairline borders  */
  --color-border-strong: #1c1f24;                    /* solid borders     */
  --color-border-dark:   #090c0e;                    /* header / divider  */

  /* Subtle translucent fill used on glass pills & chips */
  --color-glass: rgba(230, 243, 254, 0.078);

  /* ---- Status colors --------------------------------------------------- */
  --color-positive: #43d37f;      /* +% deltas (green)                   */
  --color-negative: #dc424a;      /* -% deltas / failed (red)            */

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  /* Fluid-ish type scale (px values matched to the original) */
  --fs-display: 72px;   /* hero / big statements      */
  --fs-h2:      48px;   /* section statements         */
  --fs-h3:      32px;   /* sub-section headings        */
  --fs-lead:    20px;   /* hero & section lead text   */
  --fs-body:    16px;   /* default body               */
  --fs-sm:      14px;   /* nav, small text            */
  --fs-xs:      12px;   /* badges, captions           */

  --tracking-tight: -1.8px;   /* large display headings */
  --tracking-snug:  -0.04px;  /* body / nav             */

  /* ---- Layout ---------------------------------------------------------- */
  --container-max: 1456px;   /* max content width      */
  --container-pad: 24px;     /* horizontal gutter      */
  --header-h:      69px;     /* top bar height         */

  /* ---- Radii ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-btn: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.25s;
}