/*
 * evinode Design Tokens
 * Single source of truth for colors, radii, transitions.
 * Import this file before any page-specific stylesheet.
 */

:root {
  /* ── Backgrounds ────────────────────────────────────────────────────────── */
  --color-bg:                   #f9f5ff;   /* base background                  */
  --color-surface-low:          #f3eeff;   /* section trays                    */
  --color-surface:              #ffffff;   /* cards                            */
  --color-surface-raised:       #e8e3ff;   /* surface_container_high           */
  --color-surface-highest:      #ddd9ff;   /* surface_container_highest        */

  /* ── Primary & Secondary ─────────────────────────────────────────────────── */
  --color-primary:              #4647d3;
  --color-primary-hover:        #3435b8;
  --color-secondary:            #b00d6a;

  /* ── Gradients ───────────────────────────────────────────────────────────── */
  --gradient-primary:      linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-card-accent:  radial-gradient(ellipse at 100% 100%, rgba(70,71,211,0.12) 0%, transparent 65%);

  /* ── Elevation ───────────────────────────────────────────────────────────── */
  --shadow-card:  0 0 3rem rgba(43,41,89,0.05);   /* soft ambient card shadow */

  /* ── Text ────────────────────────────────────────────────────────────────── */
  --color-on-surface:           #2b2959;   /* primary text                     */
  --color-on-surface-variant:   #595689;   /* secondary text                   */
  --color-on-surface-muted:     #696690;   /* hints, placeholders — AA 5.38:1  */
  --color-on-surface-faint:     #aba7e0;   /* outline_variant / disabled       */
  --color-on-primary:           #ffffff;   /* text on gradient buttons         */

  /* ── Borders ─────────────────────────────────────────────────────────────── */
  --color-border:               rgba(171,167,224,0.15);   /* ghost border      */
  --color-border-subtle:        rgba(171,167,224,0.30);   /* slightly visible  */

  /* ── Overlay ──────────────────────────────────────────────────────────────── */
  --color-overlay:              rgba(43,41,89,0.40);      /* modal backdrop    */

  /* ── Semantic ────────────────────────────────────────────────────────────── */
  --color-success:          #32d74b;
  --color-danger:           #c0392b;
  --color-danger-bg:        rgba(192,57,43,0.10);
  --color-danger-border:    rgba(192,57,43,0.25);
  --color-warning:          #ff9f0a;

  /* ── Border Radii — Bento Aesthetic ─────────────────────────────────────── */
  --radius-sm:    0.5rem;   /* 8px  — nested items        */
  --radius-md:    1.5rem;   /* 24px — cards               */
  --radius-lg:    2rem;     /* 32px — large cards         */
  --radius-xl:    3rem;     /* 48px — outer containers    */
  --radius-full:  9999px;   /* pills — buttons            */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Transitions ─────────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.20s ease;

}