/* ============================================================================
   SmartWeb CRM 2.2 — Design tokens. Flat "paper / surface / ink" palette from the prototypes
   (database/smartweb-*.html): opaque surfaces, hairline borders, Onest, 14/10/7 radii.
   The old glass variable names are kept (now opaque) so every component follows without edits.
   Light is the default; dark overrides via prefers-color-scheme and [data-theme].
   ============================================================================ */
:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-md: 0.875rem;   /* 14 */
  --fs-lg: 1rem;       /* 16 */
  --fs-xl: 1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 2rem;      /* 32 */
  --lh: 1.45;
  --track-tight: -0.01em;

  /* Paper + surfaces */
  --canvas: #EEF1F6;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --orb-1: transparent; --orb-2: transparent; --orb-3: transparent; --orb-4: transparent;

  /* "Glass" names → opaque surfaces */
  --glass: #FFFFFF;
  --glass-strong: #FFFFFF;
  --glass-soft: #F7F9FC;
  --glass-border: #E1E6EF;
  --glass-edge: transparent;
  --glass-highlight: 0 0 0 0 transparent;
  --blur: 0px;
  --saturate: 100%;

  /* Ink */
  --text: #1A2233;
  --text-2: #4A5570;
  --text-3: #8590A8;
  --text-inverse: #ffffff;

  /* Brand + semantic */
  --accent: #2F6BFF;
  --accent-2: #1947C7;
  --accent-ink: #ffffff;
  --success: #2BA56A;
  --warning: #E8A317;
  --danger: #E5484D;
  --info: #2F8FD8;
  --purple: #8B5CF6;
  --pink: #E5487A;
  --teal: #1F9AA8;
  --indigo: #5B6CF0;

  /* Soft backgrounds (badges, icon bubbles) */
  --accent-tint: #E6EEFF;
  --success-tint: #E3F5EC;
  --warning-tint: #FFF4DC;
  --danger-tint: #FDECEC;
  --info-tint: #E4F1FB;
  --purple-tint: #F1EBFE;
  --neutral-tint: #EDF0F5;

  /* Lines & fills */
  --line: #E1E6EF;
  --line-2: #E9EDF4;
  --fill: #EDF0F5;
  --fill-2: #D0D7E3;
  --hover: #F3F5F9;

  /* Radii */
  --r-xs: 6px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(22,32,54,.05);
  --shadow-sm: 0 1px 2px rgba(22,32,54,.06), 0 2px 6px rgba(22,32,54,.05);
  --shadow-md: 0 2px 6px rgba(22,32,54,.07), 0 8px 20px rgba(22,32,54,.08);
  --shadow-lg: 0 8px 24px rgba(22,32,54,.16);
  --shadow-accent: 0 1px 2px rgba(47,107,255,.25);

  /* Layout */
  --gap: 16px;
  --pad: 20px;
  --rail: 68px;
  --rail-open: 248px;
  --topbar: 57px;
  --content-max: 1600px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 240ms;

  /* Z */
  --z-rail: 40; --z-topbar: 30; --z-menu: 60; --z-modal: 100; --z-toast: 120;
}

/* ---------- Dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0F1522;
    --surface: #172033;
    --surface-2: #1B2539;
    --glass: #172033;
    --glass-strong: #172033;
    --glass-soft: #1B2539;
    --glass-border: #26324A;
    --text: #E6EBF5;
    --text-2: #AEB8CE;
    --text-3: #7883A0;
    --accent: #5B8BFF;
    --accent-2: #9DBAFF;
    --success: #3DBE82;
    --warning: #F0B43A;
    --danger: #F0656A;
    --info: #5AB0EE;
    --purple: #A586FA;
    --pink: #F0709A;
    --teal: #4BC0CC;
    --accent-tint: #1D2C52;
    --success-tint: #16322A;
    --warning-tint: #3A2E14;
    --danger-tint: #3A1D22;
    --info-tint: #17304A;
    --purple-tint: #2A2145;
    --neutral-tint: #222C40;
    --line: #26324A;
    --line-2: #202B41;
    --fill: #222C40;
    --fill-2: #33415E;
    --hover: #1E293E;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 14px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.5);
    --shadow-accent: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0F1522;
  --surface: #172033;
  --surface-2: #1B2539;
  --glass: #172033;
  --glass-strong: #172033;
  --glass-soft: #1B2539;
  --glass-border: #26324A;
  --text: #E6EBF5;
  --text-2: #AEB8CE;
  --text-3: #7883A0;
  --accent: #5B8BFF;
  --accent-2: #9DBAFF;
  --success: #3DBE82;
  --warning: #F0B43A;
  --danger: #F0656A;
  --info: #5AB0EE;
  --purple: #A586FA;
  --pink: #F0709A;
  --teal: #4BC0CC;
  --accent-tint: #1D2C52;
  --success-tint: #16322A;
  --warning-tint: #3A2E14;
  --danger-tint: #3A1D22;
  --info-tint: #17304A;
  --purple-tint: #2A2145;
  --neutral-tint: #222C40;
  --line: #26324A;
  --line-2: #202B41;
  --fill: #222C40;
  --fill-2: #33415E;
  --hover: #1E293E;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.5);
  --shadow-accent: 0 1px 2px rgba(0,0,0,.3);
}