/* ============================================================
   nPrint Technology — design tokens
   Copied from the design system handoff (nprint-design-system.html).
   Do not edit a value here to solve a layout problem; if a state needs
   a color the palette lacks, that is a brand decision, not a CSS one.
   ============================================================ */

/* Rubik, self-hosted so the page makes no third-party font request and
   the Content-Security-Policy can stay locked to 'self'. */
@font-face { font-family:"Rubik"; font-style:normal; font-weight:300; font-display:swap; src:url("/fonts/rubik-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family:"Rubik"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Rubik"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/rubik-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Rubik"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/rubik-latin-700-normal.woff2") format("woff2"); }

:root {
  /* --- Process colors — logo inks. Status dots and hairlines only, never surfaces. --- */
  --np-process-cyan:        #00AEEF;
  --np-process-magenta:     #EC008C;
  --np-process-yellow:      #FFD100;
  --np-ink-black:           #231F20;

  /* --- Brand action --- */
  --np-deep-cyan:           #0795BE;
  --np-deep-cyan-hover:     #35B4DA;
  --np-deep-cyan-active:    #056F8E;

  /* --- Neutrals --- */
  --np-charcoal:            #57585B;
  --np-charcoal-light:      #6E6F72;
  --np-charcoal-dark:       #3D3E40;
  --np-gray-400:            #9E9FA2;
  --np-gray-300:            #C9CACB;
  --np-gray-250:            #D2D3D4;
  --np-gray-200:            #E8E8E8;
  --np-gray-100:            #F5F5F5;
  --np-white:               #FFFFFF;

  /* --- Semantic surfaces & text --- */
  --np-bg-page:             var(--np-gray-100);
  --np-bg-surface:          var(--np-white);
  --np-bg-dark:             var(--np-charcoal);
  --np-text-primary:        var(--np-ink-black);
  --np-text-secondary:      var(--np-charcoal);
  --np-text-muted:          var(--np-gray-400);
  --np-text-on-dark:        var(--np-white);
  --np-text-on-dark-muted:  var(--np-gray-250);
  --np-border:              var(--np-gray-200);
  --np-border-input:        var(--np-gray-300);
  --np-border-focus:        var(--np-deep-cyan);

  /* --- Status. The system defines no red and no green: error and
         destructive reuse process magenta, positive state is cyan. --- */
  --np-status-ok:           var(--np-process-cyan);
  --np-status-warning:      var(--np-process-yellow);
  --np-status-error:        var(--np-process-magenta);
  --np-status-neutral:      var(--np-gray-400);
  --np-tint-info:           #E6F7FD;
  --np-tint-warning:        #FFF8E0;
  --np-tint-error:          #FDE6F2;

  /* --- Typography — one family, four weights --- */
  --np-font-sans:           "Rubik", "Helvetica Neue", Arial, sans-serif;
  --np-weight-light:        300;
  --np-weight-regular:      400;
  --np-weight-semibold:     600;
  --np-weight-bold:         700;

  --np-h1-size:    34px; --np-h1-weight: 600; --np-h1-leading: 1.15; --np-h1-tracking: -0.015em;
  --np-h2-size:    24px; --np-h2-weight: 600; --np-h2-leading: 1.25;
  --np-body-size:  17px; --np-body-leading: 1.6;
  --np-small-size: 15px; --np-small-leading: 1.55;
  --np-caption-size: 14px; --np-caption-leading: 1.5;
  --np-label-size: 12px; --np-label-weight: 700; --np-label-tracking: 0.2em;

  /* --- Spacing — base unit 8px --- */
  --np-space-1: 4px;  --np-space-2: 8px;   --np-space-3: 12px;  --np-space-4: 16px;
  --np-space-6: 24px; --np-space-8: 32px;  --np-space-12: 48px; --np-space-16: 64px; --np-space-24: 96px;

  /* --- Radius: 4px on everything; pill on status tags only --- */
  --np-radius:              4px;
  --np-radius-pill:         999px;

  /* --- Borders --- */
  --np-border-width:        1px;
  --np-border-width-focus:  2px;

  /* --- Elevation: three levels. No gradients, textures, or inner shadows. --- */
  --np-shadow-1:            0 2px 8px rgba(0,0,0,0.08);
  --np-shadow-1-hover:      0 4px 16px rgba(0,0,0,0.12);
  --np-shadow-2:            0 8px 24px rgba(0,0,0,0.14);

  /* --- Motion --- */
  --np-transition:          200ms ease-in-out;

  /* --- Layout --- */
  --np-content-max:         1024px;
  /* Extension to the system: the handoff sets 1024px and flags that no column grid
     is defined for data-dense screens. Admin tables need more room, so those pages
     use this wider max. Marketing and customer-facing pages stay at 1024px. */
  --np-content-max-wide:    1280px;
  --np-page-padding:        64px;
  --np-page-padding-md:     32px;
  --np-page-padding-sm:     16px;
}