/* ============================================================
   Sayo Design Tokens
   All colors, typography, spacing, shadows, and radii
   extracted from the original .dc.html design files.
   ============================================================ */

:root {
  /* ── Primary ───────────────────────────────────────────── */
  --color-primary:        #3B4BDB;
  --color-primary-dark:   #2B35B8;
  --color-primary-darker: #1F2899;
  --color-primary-light:  #EEF0FF;
  --color-primary-bg:     #E4E7FF;

  /* ── Surfaces ──────────────────────────────────────────── */
  --color-bg:             #ffffff;
  --color-surface:        #F3F4FB;
  --color-surface-alt:    #ECEDF2;

  /* ── Borders ───────────────────────────────────────────── */
  --color-border:         #E7E8EE;
  --color-border-input:   #D9DBE5;

  /* ── Text ──────────────────────────────────────────────── */
  --color-text:           #14151A;
  --color-text-secondary: #5C6070;
  --color-text-body:      #3A3D4A;

  /* ── Semantic ──────────────────────────────────────────── */
  --color-success:        #1B8F5A;
  --color-success-bg:     #DDF3EA;
  --color-success-text:   #146347;
  --color-danger:         #A3261E;
  --color-danger-border:  #E9C5C2;
  --color-warning-bg:     #FDE8DC;
  --color-warning-text:   #8A3F18;

  /* ── Avatar tints (rotating palette) ───────────────────── */
  --avatar-0-bg: #E4E7FF;  --avatar-0-fg: #2B35B8;
  --avatar-1-bg: #DDF3EA;  --avatar-1-fg: #146347;
  --avatar-2-bg: #FDE8DC;  --avatar-2-fg: #8A3F18;
  --avatar-3-bg: #ECEDF2;  --avatar-3-fg: #3A3D4A;

  /* ── Typography ────────────────────────────────────────── */
  --font-family:          'DM Sans', system-ui, -apple-system, sans-serif;
  --font-size-xs:         13px;
  --font-size-sm:         14px;
  --font-size-base:       15px;
  --font-size-md:         16px;
  --font-size-lg:         18px;
  --font-size-xl:         20px;
  --font-size-2xl:        22px;
  --font-size-3xl:        26px;
  --font-size-4xl:        36px;
  --font-size-5xl:        44px;
  --font-size-6xl:        48px;

  /* ── Font weights ──────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   6px;
  --space-3:   8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 56px;
  --space-13: 64px;

  /* ── Border radius ─────────────────────────────────────── */
  --radius-sm:    10px;
  --radius-md:    12px;
  --radius-lg:    14px;
  --radius-xl:    24px;
  --radius-2xl:   28px;
  --radius-full:  999px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(20, 21, 26, 0.12);
  --shadow-card: 0 1px 2px rgba(20, 21, 26, 0.06),
                 0 12px 32px rgba(59, 75, 219, 0.10);

  /* ── Input/Button height ───────────────────────────────── */
  --input-height:    52px;
  --btn-height:      48px;
  --btn-height-sm:   40px;
  --btn-height-lg:   60px;

  /* ── Layout ────────────────────────────────────────────── */
  --header-height:   76px;
  --max-width:       1200px;
  --sidebar-width:   360px;
}