/* =========================================================================
   SAINTOX — Design Tokens
   Single source of truth for color, type, spacing and radius. These are
   also the values to port into a future Flutter design system, so keep
   names semantic (role-based), not literal ("accent", not "blue-400").
   ========================================================================= */

:root {
  /* ---- color: surfaces -------------------------------------------- */
  --color-bg: #0a0c0f;              /* near-black graphite, page background */
  --color-bg-raised: #0d1013;       /* very slightly lifted background band */
  --color-surface: #12161a;         /* card / panel surface */
  --color-surface-elevated: #171c21;/* nested / elevated surface (cockpit chrome) */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* ---- color: text --------------------------------------------------- */
  --color-text-primary: #f3f6f8;
  --color-text-secondary: #96a3ad;
  --color-text-tertiary: #7d8891; /* WCAG AA (>=4.5:1) against --color-bg even at small sizes */

  /* ---- color: accent + status ----------------------------------------- */
  --color-accent: #45c8f0;
  --color-accent-strong: #7ad9f7;
  --color-accent-dim: rgba(69, 200, 240, 0.14);
  --color-accent-border: rgba(69, 200, 240, 0.35);

  --color-success: #3ecf8e;
  --color-success-dim: rgba(62, 207, 142, 0.14);
  --color-warning: #e8ac4c;
  --color-warning-dim: rgba(232, 172, 76, 0.14);
  --color-danger: #ef6f6f;
  --color-danger-dim: rgba(239, 111, 111, 0.14);

  /* ---- typography ------------------------------------------------------ */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "SF Mono", "Menlo", "Consolas", "Roboto Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;      /* 12px — technical labels */
  --text-sm: 0.875rem;     /* 14px — secondary copy */
  --text-base: 1rem;       /* 16px — body */
  --text-md: 1.125rem;     /* 18px — lead copy */
  --text-lg: 1.5rem;       /* 24px — card headings */
  --text-xl: 2rem;         /* 32px — section headings */
  --text-2xl: 2.75rem;     /* 44px — hero, tablet */
  --text-3xl: 3.75rem;     /* 60px — hero, desktop */

  --leading-tight: 1.1;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ---- spacing scale (px-based rem) ------------------------------------ */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- radius system ---------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- elevation / glow -------------------------------------------------- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  --glow-accent: 0 0 0 1px var(--color-accent-border), 0 0 32px -8px rgba(69, 200, 240, 0.35);

  /* ---- layout ------------------------------------------------------------ */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;
}