/* Portal Seguros — design tokens.
 *
 * IBM Plex Mono is declared here as the monospace font. No local file is
 * shipped; the declaration falls through to the system monospace stack if
 * the font is not available, which is acceptable for a CRM used on a known
 * machine. If a woff2 is later added to /assets/fonts/ a matching @font-face
 * can replace the fallback list here. */

:root {
  /* --- colour palette --- */
  --sp-bg-dark:    #0a1628;   /* sidebar */
  --sp-gold:       #c9962c;   /* primary accent */
  --sp-text-1:     #14294d;   /* primary text */
  --sp-text-2:     #5c6a80;   /* secondary text */
  --sp-text-3:     #8494ab;   /* muted / tertiary */
  --sp-border:     #e3e6ec;   /* dividers */
  --sp-bg-page:    #f4f7fb;   /* page background */
  --sp-bg-card:    #ffffff;   /* card surface */

  /* status colours */
  --sp-green:      #1f7a4d;
  --sp-green-bg:   #e8f3ec;
  --sp-amber:      #8a6417;
  --sp-amber-bg:   #fbeed9;
  --sp-red:        #b53a2f;
  --sp-red-bg:     #fbeae8;
  --sp-blue-tint:  #eef1f6;

  /* sidebar surface tones */
  --sp-sidebar-border:  rgba(255, 255, 255, 0.08);
  --sp-sidebar-text:    rgba(255, 255, 255, 0.90);
  --sp-sidebar-muted:   rgba(255, 255, 255, 0.45);
  --sp-sidebar-active:  rgba(255, 255, 255, 0.07);

  /* --- typography --- */
  --sp-font-ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'Menlo', 'Consolas', monospace;

  /* type scale */
  --sp-fs-11: 11px;
  --sp-fs-12: 12px;
  --sp-fs-13: 13px;
  --sp-fs-14: 14px;
  --sp-fs-16: 16px;
  --sp-fs-20: 20px;
  --sp-fs-24: 24px;
  --sp-fs-32: 32px;

  /* line-height */
  --sp-lh-tight:  1.1;
  --sp-lh-snug:   1.3;
  --sp-lh-normal: 1.5;

  /* letter-spacing */
  --sp-ls-wide:    0.03em;
  --sp-ls-wider:   0.07em;
  --sp-ls-widest:  0.12em;

  /* --- spacing — 4 px base grid --- */
  --sp-s-1:  4px;
  --sp-s-2:  8px;
  --sp-s-3:  12px;
  --sp-s-4:  16px;
  --sp-s-5:  24px;
  --sp-s-6:  32px;
  --sp-s-7:  48px;
  --sp-s-8:  64px;

  /* --- shape --- */
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 16px;

  /* --- elevation --- */
  --sp-shadow-sm:  0 1px 3px rgba(20, 41, 77, 0.08);
  --sp-shadow-md:  0 4px 16px rgba(20, 41, 77, 0.10);
  --sp-shadow-lg:  0 8px 32px rgba(20, 41, 77, 0.14);

  /* --- motion --- */
  --sp-dur-fast:   100ms;
  --sp-dur-base:   160ms;
  --sp-ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);

  /* --- sidebar dimensions --- */
  --sp-sidebar-w: 220px;
}