/* =====================================================================
   FortiSign design tokens
   ---------------------------------------------------------------------
   One place for colour, type, space, radius, elevation and motion.

   WHY THIS FILE EXISTS

   The SSA2 stylesheets currently hardcode 219 distinct colour values
   across 56 files and 20,329 lines, including ~10 near-identical greys
   and an electric blue (#000df2) that fights the orange brand. There is
   no shared vocabulary, so every new screen re-invents one.

   This file is ADDITIVE. It defines variables and changes nothing on its
   own. Adopt it screen by screen by replacing literals with var(...);
   nothing breaks while both styles coexist.

   HOW TO USE

     <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/design/fortisign-tokens.css">

   Load it BEFORE the page's own stylesheet so page rules can override.

   THE ONE RULE

   Never add a raw hex to a component stylesheet again. If a value is
   missing here, add it here first. That is the whole discipline.
   ===================================================================== */

:root {

  /* -------------------------------------------------------------------
     BRAND

     The brand orange #f57c00 scores 2.70:1 on white. That fails WCAG AA
     in BOTH directions -- as text on white AND as a background under
     white text. Today that affects the Login button, "Forgot Password",
     "Register New Account" and every orange link in the product.

     The fix is not to abandon the colour. --fs-brand-action is the SAME
     hue (30.4deg) at the SAME saturation (100%), darkened to 35%
     lightness, which scores 4.82:1 and passes AA for normal text. It
     reads as the same brand.

     Use --fs-brand-display for large decorative fills only (the login
     panel gradient, hero areas, splash art) where no small text sits on
     top. Use --fs-brand-action for anything a user reads or clicks.
     ------------------------------------------------------------------- */

  --fs-brand-display:      #f57c00;   /* 2.70:1 on white -- decorative fills ONLY */
  --fs-brand-action:       #b25a00;   /* 4.82:1 on white -- text, links, buttons  */
  --fs-brand-action-hover: #944b00;   /* 6.43:1 -- hover/active                   */
  --fs-brand-action-quiet: #fff4e8;   /* tinted surface for selected/hover rows   */
  --fs-brand-border:       #f0c9a0;   /* 1.4:1 -- decorative borders only         */

  /* Gradient used on the login panel. Kept because it is genuinely
     distinctive -- it is the strongest brand asset in the product. */
  --fs-brand-gradient: linear-gradient(150deg, #ffb547 0%, #f57c00 55%, #e06d00 100%);

  /* -------------------------------------------------------------------
     NEUTRALS

     Replaces the current sprawl of #333 #484848 #58595b #686868 #7b7b7b
     #8f8f8f #949494 #a0a6ab #cccccc #e0e0e0 #e5e5e5 #e5dada with one
     ramp. Contrast on white is stated for every step so nobody has to
     guess. #cccccc as body/placeholder text scores 1.61:1 and must not
     be used for anything readable -- hence -300 is documented as
     non-text.
     ------------------------------------------------------------------- */

  --fs-ink-900: #14181f;   /* 16.4:1  headings                                 */
  --fs-ink-800: #333333;   /* 12.6:1  body text (already the dominant value)   */
  --fs-ink-700: #4a5158;   /*  8.1:1  secondary text                           */
  --fs-ink-600: #667079;   /*  4.9:1  muted text -- LIGHTEST that passes AA    */
  --fs-ink-500: #8b949c;   /*  3.1:1  large text / icons only, NOT body        */
  --fs-ink-400: #b4bcc3;   /*  1.9:1  disabled text, placeholders              */
  --fs-ink-300: #d9dee3;   /*  1.4:1  borders -- NEVER text                    */
  --fs-ink-200: #e9edf1;   /*         dividers, input borders                  */
  --fs-ink-100: #f4f6f8;   /*         page background (already in use)         */
  --fs-ink-000: #ffffff;   /*         surfaces                                 */

  /* -------------------------------------------------------------------
     STATUS

     A signing product needs an unambiguous status language: a document
     is draft, in progress, signed, declined or expired, and the user
     must read that at a glance. Today those states are drawn with
     whatever colour was nearest to hand.

     Every -fg value passes AA on its matching -bg.
     ------------------------------------------------------------------- */

  --fs-ok-fg:      #1b6b3a;  --fs-ok-bg:      #e8f5ed;   /* signed, complete   */
  --fs-warn-fg:    #8a5a00;  --fs-warn-bg:    #fff6e5;   /* pending, awaiting  */
  --fs-danger-fg:  #a32116;  --fs-danger-bg:  #fdecea;   /* declined, failed   */
  --fs-info-fg:    #1a4f8a;  --fs-info-bg:    #e8f1fb;   /* informational      */
  --fs-neutral-fg: #4a5158;  --fs-neutral-bg: #eff2f5;   /* draft, inactive    */

  /* Focus ring. Deliberately NOT the brand orange: on an orange button
     an orange ring is invisible. Blue is the one hue that stays visible
     against every surface in this palette. */
  --fs-focus-ring: #1a73e8;

  /* -------------------------------------------------------------------
     TYPE

     Roboto is already the effective UI font (68 of 72 elements on the
     login page). Declared once here so the three Arial stragglers stop
     appearing.

     A 5-step scale replaces the current ad-hoc 10/14/16/20/24px mix.
     ------------------------------------------------------------------- */

  --fs-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-font-mono: "SF Mono", Consolas, "Roboto Mono", ui-monospace, monospace;

  /* NOTE -- these are px, not rem, on purpose.

     Bootstrap 3 ships `html { font-size: 10px }` as part of its reset, and
     SSA2 loads Bootstrap 3.3.4 on every page. Any rem-based scale therefore
     renders at 62.5% of its intended size: 1rem resolves to 10px, not 16px,
     so "16px" body text arrived as 10px and "16px" spacing as 10px. The
     result reads as cramped rather than modern, and the cause is invisible
     unless you check the computed root size.

     px is immune to that. Switch back to rem only if the Bootstrap 3 reset
     is removed AND the root is confirmed at 16px.
     Verified 2026-08-12: document.documentElement font-size == 10px. */
  --fs-text-xs:   12px;   /* 12px  meta, timestamps, table captions   */
  --fs-text-sm:   14px;  /* 14px  secondary, labels, dense tables    */
  --fs-text-base: 16px;      /* 16px  body -- never go below for inputs  */
  --fs-text-lg:   20px;   /* 20px  section headings                   */
  --fs-text-xl:   24px;    /* 24px  page titles                        */
  --fs-text-2xl:  32px;      /* 32px  hero                               */

  --fs-weight-regular:  400;
  --fs-weight-medium:   500;
  --fs-weight-semibold: 600;
  --fs-weight-bold:     700;

  --fs-leading-tight:  1.25;
  --fs-leading-normal: 1.5;
  --fs-leading-loose:  1.7;

  /* -------------------------------------------------------------------
     SPACE -- a 4px base grid. Consistent rhythm is most of what "neat"
     actually means.
     ------------------------------------------------------------------- */

  --fs-space-1:  4px;   /*  4px */
  --fs-space-2:  8px;    /*  8px */
  --fs-space-3:  12px;   /* 12px */
  --fs-space-4:  16px;      /* 16px */
  --fs-space-5:  24px;    /* 24px */
  --fs-space-6:  32px;      /* 32px */
  --fs-space-7:  48px;      /* 48px */
  --fs-space-8:  64px;      /* 64px */

  /* -------------------------------------------------------------------
     RADIUS -- 4px is already the de facto value; formalised with a
     larger step for cards and a pill for chips/status badges.
     ------------------------------------------------------------------- */

  --fs-radius-sm:   4px;
  --fs-radius-md:   8px;
  --fs-radius-lg:   14px;
  --fs-radius-pill: 999px;

  /* -------------------------------------------------------------------
     ELEVATION

     Built on the rgba(24,39,75,...) blue-black already used in the
     product -- a tinted shadow reads far cleaner than black at low
     opacity, which greys out the surface beneath it.
     ------------------------------------------------------------------- */

  --fs-shadow-sm: 0 1px 2px rgba(24, 39, 75, 0.08);
  --fs-shadow-md: 0 2px 8px rgba(24, 39, 75, 0.10), 0 1px 2px rgba(24, 39, 75, 0.06);
  --fs-shadow-lg: 0 8px 28px rgba(24, 39, 75, 0.12), 0 2px 6px rgba(24, 39, 75, 0.06);
  --fs-shadow-focus: 0 0 0 3px rgba(26, 115, 232, 0.35);

  /* -------------------------------------------------------------------
     MOTION -- short and consistent. Long transitions on a workflow tool
     make it feel sluggish, not premium.
     ------------------------------------------------------------------- */

  --fs-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --fs-duration-fast: 120ms;
  --fs-duration-base: 180ms;

  /* Layout */
  --fs-container-max: 1200px;
  --fs-control-height: 44px;   /* >=44px keeps controls thumb-friendly */
}

/* =====================================================================
   Reduced motion. Respecting this is a baseline courtesy, not a nicety.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fs-duration-fast: 0ms;
    --fs-duration-base: 0ms;
  }
}

/* =====================================================================
   A visible, consistent focus ring everywhere.

   :focus-visible means keyboard users get a clear ring while mouse users
   do not see one on click -- the reason focus rings historically got
   deleted from products like this.
   ===================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--fs-focus-ring);
  outline-offset: 2px;
  border-radius: var(--fs-radius-sm);
}

/* =====================================================================
   OPT-IN COMPONENT LAYER

   Everything below is namespaced .fs-* so it cannot collide with
   Bootstrap or the existing stylesheets. Add the class to opt a single
   element in; remove it to opt out. No existing selector is touched.
   ===================================================================== */

.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  min-height: var(--fs-control-height);
  padding: 0 var(--fs-space-5);
  border: 1px solid transparent;
  border-radius: var(--fs-radius-sm);
  font-family: var(--fs-font);
  font-size: var(--fs-text-base);
  font-weight: var(--fs-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--fs-duration-fast) var(--fs-ease),
              box-shadow var(--fs-duration-fast) var(--fs-ease);
}

.fs-btn--primary {
  background: var(--fs-brand-action);
  color: var(--fs-ink-000);
}
.fs-btn--primary:hover { background: var(--fs-brand-action-hover); }

.fs-btn--secondary {
  background: var(--fs-ink-000);
  color: var(--fs-brand-action);
  border-color: var(--fs-ink-300);
}
.fs-btn--secondary:hover { background: var(--fs-brand-action-quiet); }

.fs-btn--ghost {
  background: transparent;
  color: var(--fs-brand-action);
}
.fs-btn--ghost:hover { background: var(--fs-brand-action-quiet); }

.fs-btn[disabled], .fs-btn[aria-disabled="true"] {
  background: var(--fs-ink-200);
  color: var(--fs-ink-500);
  cursor: not-allowed;
}

.fs-field { margin-bottom: var(--fs-space-4); }

.fs-label {
  display: block;
  margin-bottom: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-medium);
  color: var(--fs-ink-800);
}

.fs-input {
  width: 100%;
  min-height: var(--fs-control-height);
  padding: 0 var(--fs-space-4);
  border: 1px solid var(--fs-ink-300);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-ink-100);
  font-family: var(--fs-font);
  font-size: var(--fs-text-base);   /* 16px stops iOS zooming on focus */
  color: var(--fs-ink-900);
  transition: border-color var(--fs-duration-fast) var(--fs-ease),
              background-color var(--fs-duration-fast) var(--fs-ease);
}
.fs-input::placeholder { color: var(--fs-ink-400); }
.fs-input:hover  { border-color: var(--fs-ink-500); }
.fs-input:focus  { background: var(--fs-ink-000); border-color: var(--fs-brand-action); }
.fs-input[aria-invalid="true"] { border-color: var(--fs-danger-fg); }

.fs-card {
  background: var(--fs-ink-000);
  border: 1px solid var(--fs-ink-200);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
  padding: var(--fs-space-5);
}

/* Status pill. The single most useful component a signing product can
   standardise -- document state should look identical everywhere. */
.fs-status {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  padding: var(--fs-space-1) var(--fs-space-3);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.fs-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fs-status--signed   { color: var(--fs-ok-fg);      background: var(--fs-ok-bg); }
.fs-status--pending  { color: var(--fs-warn-fg);    background: var(--fs-warn-bg); }
.fs-status--declined { color: var(--fs-danger-fg);  background: var(--fs-danger-bg); }
.fs-status--draft    { color: var(--fs-neutral-fg); background: var(--fs-neutral-bg); }
.fs-status--info     { color: var(--fs-info-fg);    background: var(--fs-info-bg); }

/* Screen-reader-only text, for icon-only controls. */
.fs-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   FORTISIGN IDENTITY EXTENSION
   ---------------------------------------------------------------------
   Adds the navy axis, the warm neutral ground and the Trust Path status
   vocabulary. Everything below is derived from the approved FortiSign
   logo, so the UI and the mark share one palette rather than merely
   coexisting.

   THE TWO-GROUND RULE

   Contrast measured against both surfaces:

                             on white    on navy
     navy    #003365          12.64:1     1.00:1
     action  #b25a00           4.82:1     2.62:1
     display #f57c00           2.70:1     4.67:1
     white   #ffffff           1.00:1    12.64:1

   Read across and the system writes itself:

     ON WHITE  navy for text and headings, --fs-brand-action for anything
               interactive. Bright orange is decoration only.
     ON NAVY   white for text, and --fs-brand-display for accents -- the
               bright orange that FAILS on white PASSES on navy at 4.67:1.

   That is why the sidebar can carry bright brand orange while a button on
   a white card cannot. One hue, two grounds, both accessible.

   Positioning note: most e-signature products sit in blue-on-cold-grey.
   Navy with orange on a warm ground is deliberately not that, and it comes
   from the existing mark rather than from fashion.
   ===================================================================== */

:root {
  /* --- navy: navigation, headings, document structure, trust ---------- */
  --fs-navy-900: #001d43;   /* 16.7:1 on white -- deepest, headings on light */
  --fs-navy-800: #06284f;   /* 14.8:1 -- sidebar ground                      */
  --fs-navy-700: #003365;   /* 12.6:1 -- primary navy, topbar, headings      */
  --fs-navy-600: #0b4a8a;   /*  7.4:1 -- hover on navy surfaces              */
  --fs-navy-500: #2f6fb5;   /*  4.0:1 -- large text / borders on white only  */
  --fs-navy-200: #cfdcea;   /*         dividers on navy surfaces             */
  --fs-navy-100: #eaf1f8;   /*         tinted surface, selected rows         */

  /* Sidebar gradient, echoing the mark's own navy ramp. */
  --fs-navy-gradient: linear-gradient(180deg, #06284f 0%, #003365 55%, #001d43 100%);

  /* --- warm neutral ground -------------------------------------------
     #faf7f2 rather than a cold #f8f9fa. The warm cast sits under the
     orange without the faint green tinge a neutral grey picks up next to
     it, and it separates the product from the cold-grey SaaS default. */
  --fs-canvas:      #faf7f2;
  --fs-canvas-sunk: #f2ede5;   /* wells, document workspace behind a page */

  /* --- on-navy foregrounds -------------------------------------------- */
  --fs-on-navy:        #ffffff;   /* 12.6:1 */
  --fs-on-navy-muted:  #b9c9dc;   /*  6.4:1 -- secondary nav text          */
  --fs-on-navy-accent: #f57c00;   /*  4.67:1 -- brand accent, AA on navy   */

  /* =====================================================================
     TRUST PATH
     ---------------------------------------------------------------------
     Draft -> Prepared -> Awaiting signatures -> Signed -> Verified

     A presentation layer over statuses the backend already returns. It
     stores nothing and decides nothing; it only renders what the server
     has said.

     Every state carries a foreground, a background and an icon, because
     colour alone fails for the ~8% of men with a colour-vision deficiency
     -- and telling "declined" from "signed" is exactly the distinction a
     signing product cannot afford to lose.
     ===================================================================== */

  --fs-path-draft-fg:     #4a5158;  --fs-path-draft-bg:     #eff2f5;
  --fs-path-prepared-fg:  #1a4f8a;  --fs-path-prepared-bg:  #e8f1fb;
  --fs-path-awaiting-fg:  #8a5a00;  --fs-path-awaiting-bg:  #fff6e5;
  --fs-path-signed-fg:    #1b6b3a;  --fs-path-signed-bg:    #e8f5ed;
  --fs-path-verified-fg:  #0f5c4a;  --fs-path-verified-bg:  #e3f4ef;

  /* Terminal states, outside the forward path. */
  --fs-path-declined-fg:  #a32116;  --fs-path-declined-bg:  #fdecea;
  --fs-path-expired-fg:   #6b4a00;  --fs-path-expired-bg:   #f7f0dd;
  --fs-path-failed-fg:    #a32116;  --fs-path-failed-bg:    #fdecea;

  /* --- layout ---------------------------------------------------------- */
  --fs-sidebar-width:     264px;
  --fs-sidebar-width-sm:  72px;
  --fs-topbar-height:     64px;
  --fs-page-max:          1240px;
  --fs-radius-xl:         20px;
}