/* =========================================================================
   ZEISMO CRM — Design tokens
   Single source of truth. Components consume these; no component defines a
   colour, a radius, a duration or a spacing value of its own.

   Light and dark are built from the SAME semantic names. A component asks for
   --zs-surface, never for a hex value, so it is correct in both modes without
   knowing which one is active.
   ========================================================================= */

/* ── Typefaces ─────────────────────────────────────────────────────────── */

@font-face{font-family:'Calistoga';font-style:normal;font-weight:400;font-display:swap;
  src:url('../plugins/zeismo-fonts/Calistoga-400.woff2') format('woff2');}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../plugins/zeismo-fonts/JetBrainsMono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../plugins/zeismo-fonts/JetBrainsMono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../plugins/zeismo-fonts/JetBrainsMono-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../plugins/zeismo-fonts/JetBrainsMono-700.woff2') format('woff2');}

/* Inter is already bundled with the application (assets/plugins/inter). */

:root{
  /* ── Palette: six named values, each with one job ───────────────────────
     Chosen for a CRM that someone stares at for eight hours. The canvas is a
     cool off-white rather than pure white because #FFF at full-screen size is
     a glare source; cards sit ON it in true white so the eye reads depth
     without a shadow. One accent, used only for what is clickable or current.
     Deliberately NOT: cream + terracotta, near-black + acid green, or
     hairline-newspaper. Those read as fashion; this has to read as furniture.
  */
  --zs-ink:        #141A23;   /* near-black, faint blue cast, never pure #000 */
  --zs-slate:      #5A6675;   /* secondary text and quiet labels             */
  --zs-line:       #E3E7EE;   /* every border and divider in the product     */
  --zs-canvas:     #F7F8FA;   /* the page behind everything                  */
  --zs-raised:     #FFFFFF;   /* cards, tables, menus: the things ON it      */
  --zs-accent:     #0B5CFF;   /* ZEISMO blue, deepened to clear AA on white  */

  /* Semantic roles. Components use ONLY these. */
  --zs-surface:            var(--zs-canvas);
  --zs-surface-raised:     var(--zs-raised);
  --zs-surface-sunken:     #EFF2F6;
  --zs-surface-hover:      #F2F5F9;
  --zs-surface-selected:   #E9F0FF;
  --zs-border:             var(--zs-line);
  --zs-border-strong:      #CDD4E0;
  --zs-text-primary:       var(--zs-ink);
  --zs-text-secondary:     var(--zs-slate);
  --zs-text-tertiary:       #67717F;   /* AA on raised (4.83): was #8A94A4 at 3.06 */
  --zs-text-on-accent:     #FFFFFF;
  --zs-accent-hover:       #0A50E0;
  --zs-accent-soft:        #E9F0FF;   /* tinted chip background              */
  --zs-accent-ring:        rgba(11,92,255,.32);

  /* State. Each has a text-safe tone and a soft background tone.
     Greens and reds are desaturated deliberately: a CRM shows dozens of
     status pills per screen and saturated ones turn a table into a fruit bowl. */
  --zs-success:      #0E7C5A;  --zs-success-soft: #E4F4EE;
  --zs-warning:      #8A5300;  --zs-warning-soft: #FBF0DC;   /* was #A96700 at 4.02 */
  --zs-danger:       #C3352B;  --zs-danger-soft:  #FBE9E7;
  --zs-info:         #0B5CFF;  --zs-info-soft:    #E9F0FF;
  --zs-neutral:      #5A6675;  --zs-neutral-soft: #EFF2F6;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --zs-font-display: 'Calistoga', Georgia, 'Times New Roman', serif;
  --zs-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zs-font-data:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* size / weight / line-height / tracking, explicit at every step */
  --zs-display-size: 30px; --zs-display-lh: 1.18; --zs-display-ls: -0.015em; --zs-display-w: 400;
  --zs-h1-size:      22px; --zs-h1-lh:      1.28; --zs-h1-ls:      -0.011em; --zs-h1-w:      600;
  --zs-h2-size:      17px; --zs-h2-lh:      1.34; --zs-h2-ls:      -0.008em; --zs-h2-w:      600;
  --zs-h3-size:      14px; --zs-h3-lh:      1.40; --zs-h3-ls:      -0.004em; --zs-h3-w:      600;
  --zs-body-size:    13.5px; --zs-body-lh:  1.55; --zs-body-ls:     0;       --zs-body-w:    400;
  --zs-caption-size: 11.5px; --zs-caption-lh:1.45; --zs-caption-ls: .01em;   --zs-caption-w: 500;
  --zs-label-size:   10.5px; --zs-label-lh: 1.30; --zs-label-ls:    .07em;   --zs-label-w:   600;
  --zs-data-size:    13px;   --zs-data-lh:  1.45; --zs-data-ls:    -0.01em;  --zs-data-w:    500;

  /* ── Spacing: 4px base, one scale ────────────────────────────────────── */
  --zs-s1: 4px;  --zs-s2: 8px;  --zs-s3: 12px; --zs-s4: 16px;
  --zs-s5: 20px; --zs-s6: 24px; --zs-s8: 32px; --zs-s10: 40px; --zs-s12: 48px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --zs-r-sm: 5px; --zs-r-md: 8px; --zs-r-lg: 11px; --zs-r-xl: 14px; --zs-r-pill: 999px;

  /* ── Elevation: layered and subtle. No single heavy drop shadow. ─────── */
  --zs-e0: none;
  /* Self-critique: e1 previously carried a 0 0 0 1px ring AS WELL AS the
     border every card already draws, so each card was outlined twice and read
     slightly muddy. The ring is gone; the border does that job alone. */
  --zs-e1: 0 1px 2px rgba(16,24,40,.05);
  --zs-e2: 0 2px 4px -1px rgba(16,24,40,.06), 0 4px 12px -2px rgba(16,24,40,.07);
  --zs-e3: 0 8px 20px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.06);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --zs-t-fast: 150ms; --zs-t-base: 200ms; --zs-t-slow: 250ms;
  --zs-ease: cubic-bezier(.32,.72,.35,1);

  /* ── Table geometry, referenced by the row-density toggle ────────────── */
  --zs-row-pad-y: 11px;
  --zs-row-pad-x: 14px;

  color-scheme: light;
}

/* ── Dark mode ───────────────────────────────────────────────────────────
   Same semantic names, re-pointed. Surfaces lift as they come forward, which
   is how depth reads on dark; the accent is lightened because #0B5CFF on a
   dark ground fails contrast. Nothing else in the product changes.
   Applied by an explicit attribute so the choice can be persisted, and by
   prefers-color-scheme only when the user has expressed no preference.       */

:root[data-zs-theme="dark"]{
  --zs-surface:            #12161C;
  --zs-surface-raised:     #1A1F27;
  --zs-surface-sunken:     #0D1116;
  --zs-surface-hover:      #212832;
  --zs-surface-selected:   #17264A;
  --zs-border:             #2A313B;
  --zs-border-strong:      #3A424E;
  --zs-text-primary:       #E8ECF2;
  --zs-text-secondary:     #9AA6B5;
  --zs-text-tertiary:      #8A96A6;   /* AA on raised: was #6E7A8A at 3.79 */
  /* White on a light-blue accent is only 3.16 in dark mode, and this token is
     the text on every primary button. Dark ink on the accent clears AA
     comfortably and is the standard dark-theme treatment. */
  --zs-text-on-accent:     #0B1220;
  --zs-accent:             #5B8CFF;
  --zs-accent-hover:       #7BA3FF;
  --zs-accent-soft:        #17264A;
  --zs-accent-ring:        rgba(91,140,255,.40);

  --zs-success:  #4ECFA0;  --zs-success-soft: #13322A;
  --zs-warning:  #E5A93F;  --zs-warning-soft: #35290F;
  --zs-danger:   #FF7A70;  --zs-danger-soft:  #3A1A17;
  --zs-info:     #5B8CFF;  --zs-info-soft:    #17264A;
  --zs-neutral:  #9AA6B5;  --zs-neutral-soft: #212832;

  --zs-e1: 0 1px 2px rgba(0,0,0,.36);
  --zs-e2: 0 2px 4px -1px rgba(0,0,0,.40), 0 4px 12px -2px rgba(0,0,0,.42);
  --zs-e3: 0 8px 20px -6px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.40);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-zs-theme="light"]):not([data-zs-theme="dark"]){
    --zs-surface:#12161C; --zs-surface-raised:#1A1F27; --zs-surface-sunken:#0D1116;
    --zs-surface-hover:#212832; --zs-surface-selected:#17264A;
    --zs-border:#2A313B; --zs-border-strong:#3A424E;
    --zs-text-primary:#E8ECF2; --zs-text-secondary:#9AA6B5; --zs-text-tertiary:#8A96A6;
    --zs-text-on-accent:#0B1220;
    --zs-accent:#5B8CFF; --zs-accent-hover:#7BA3FF; --zs-accent-soft:#17264A;
    --zs-accent-ring:rgba(91,140,255,.40);
    --zs-success:#4ECFA0; --zs-success-soft:#13322A;
    --zs-warning:#E5A93F; --zs-warning-soft:#35290F;
    --zs-danger:#FF7A70;  --zs-danger-soft:#3A1A17;
    --zs-info:#5B8CFF;    --zs-info-soft:#17264A;
    --zs-neutral:#9AA6B5; --zs-neutral-soft:#212832;
    --zs-e1:0 1px 2px rgba(0,0,0,.36);
    --zs-e2:0 2px 4px -1px rgba(0,0,0,.40),0 4px 12px -2px rgba(0,0,0,.42);
    --zs-e3:0 8px 20px -6px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.40);
    color-scheme: dark;
  }
}

/* Compact row density, toggled on the table wrapper. Geometry only. */
:root[data-zs-density="compact"]{ --zs-row-pad-y: 6px; --zs-row-pad-x: 12px; }

/* Motion is a preference, not a decoration. Honour the system setting. */
@media (prefers-reduced-motion: reduce){
  :root{ --zs-t-fast:1ms; --zs-t-base:1ms; --zs-t-slow:1ms; }
}