/* ==============================================================
   Denobulus Design Tokens
   ==============================================================

   Stage 2 of the client-portal Tabler/Bootstrap 5 re-platform. This is the
   single source of truth for color/spacing/radius/shadow/typography/motion
   values across the Denobulus client portal, meant to be portable later to
   DirectAdmin Evolution and the marketing site (see BS4-COMPAT-DEBT.md and
   the dev workspace docs for the rest of the re-platform history).

   ARCHITECTURE: two kinds of tokens live here.
   1. Tokens that ALIAS an existing Tabler (--tblr-*) variable. These exist
      so Denobulus code (and future non-Blesta surfaces) has a stable,
      portable name to reference, without duplicating a parallel value that
      could drift from what components actually render with. Where a
      --dnb-* alias overrides the underlying --tblr-* variable directly
      (brand colors), every stock Tabler/Bootstrap component that already
      consumes that variable re-colors automatically - intentional, not a
      side effect.
   2. Tokens with no Tabler equivalent (spacing scale beyond what Tabler
      exposes, motion durations/easing, brand-specific hues). These are
      defined fresh.

   PROVISIONAL: every value under "Brand" below is a placeholder pending the
   final designer SVG/color package (dark navy / blue-cyan / silver-white
   identity, no green as brand - green is semantic-success only). Swap them
   in the single :root block below when the real values arrive; every
   component that consumes --tblr-primary/--tblr-link-color etc. will follow
   automatically. Everything else (surfaces, text, spacing, radius, shadow,
   typography, motion) is NOT provisional in the same sense - those are
   either direct Tabler aliases or values already live in production via
   dark-overrides.css/custom.css, kept as-is here to avoid an unrequested
   visual shift while the token layer is introduced.
   ============================================================== */

:root {
  /* ---------- Brand (PROVISIONAL - replace on designer delivery) ---------- */
  --dnb-brand-navy: #0d1117;
  --dnb-brand-blue: #2f7fe0;
  --dnb-brand-blue-hover: #2569bd;
  --dnb-brand-cyan: #22b8d8;
  /* Cloud/sky blue already used everywhere else in the portal (icons,
     hero/order-form artwork, order-form CTA accent default) as a repeated
     literal #2195F3/#42a5f5, never as a token. Named here so the
     brand-blue .btn-primary override in custom.css can reuse it instead
     of a third repeated hex - see that file for why it's needed. */
  --dnb-cloud-blue: #2195F3;
  --dnb-cloud-blue-hover: #42a5f5;
  --dnb-cloud-blue-active: #1c86dc;
  /* Shared foreground for cloud-blue primary CTAs (Contact Support,
     Explore Services, Log In, and every other branded .btn-primary).
     One token so every state/surface that colors this text reuses it
     instead of repeating #ffffff or a near-white hex. Reuses the
     already-established near-white silver token rather than pure
     white, consistent with how light text is done elsewhere in dark
     surfaces (e.g. .card-blesta > .card-header). */
  --dnb-brand-silver-100: #f4f5f7;
  --dnb-btn-primary-fg: var(--dnb-brand-silver-100);
  --dnb-brand-silver-200: #e4e7eb;
  --dnb-brand-silver-300: #c6cbd3;
  --dnb-brand-silver-500: #9aa1ac;
  --dnb-brand-silver-700: #6b7280;
  --dnb-brand-silver-800: #3f4550;
  --dnb-brand-silver-900: #1e2228;

  /* ---------- UI action color ---------- */
  /* Overrides Tabler's stock --tblr-primary so every button/link/focus
     ring/active-nav-state that already consumes it picks up the brand
     blue automatically. Deliberately close in hue/lightness to Tabler's
     stock #066fd1 so this is a brand shift, not a jarring recolor. */
  --tblr-primary: var(--dnb-brand-blue);
  --tblr-primary-rgb: 47, 127, 224;
  --tblr-link-color: var(--dnb-brand-blue);
  --tblr-link-color-rgb: 47, 127, 224;
  --tblr-link-hover-color: var(--dnb-brand-blue-hover);

  --dnb-action: var(--dnb-brand-blue);
  --dnb-action-hover: var(--dnb-brand-blue-hover);
  --dnb-accent: var(--dnb-brand-cyan);

  /* ---------- Surfaces ---------- */
  /* Light-mode values alias Tabler's own light defaults (unchanged look).
     Dark-mode values match what's currently live via dark-overrides.css
     (#0d1117 body / #161b22 card / #111821 elevated) so introducing the
     token doesn't shift the shipped dark palette - see BS4-COMPAT-DEBT.md
     Stage 1 note on Tabler's native dark tokens now being active. */
  --dnb-bg: var(--tblr-body-bg);
  --dnb-bg-elevated: #ffffff;
  --dnb-card-bg: #ffffff;
  --dnb-border: var(--tblr-border-color);
  --dnb-border-muted: var(--tblr-border-color-translucent);

  /* ---------- Text ---------- */
  --dnb-text: var(--tblr-body-color);
  --dnb-text-secondary: var(--tblr-secondary-color);
  --dnb-text-muted: var(--tblr-tertiary-color);

  /* ---------- Semantic status colors ---------- */
  /* Aliased to Tabler's own palette - not brand colors, standard UI
     conventions. Green stays valid here as success only, per direction. */
  --dnb-success: var(--tblr-success);
  --dnb-warning: var(--tblr-warning);
  --dnb-danger: var(--tblr-danger);
  --dnb-info: var(--tblr-info);

  /* ---------- Shape ---------- */
  --dnb-radius-sm: var(--tblr-border-radius-sm);
  --dnb-radius: var(--tblr-border-radius);
  --dnb-radius-lg: var(--tblr-border-radius-lg);

  /* ---------- Spacing scale ---------- */
  /* Aliased to Tabler's own spacer scale (0.25rem steps) rather than
     inventing a parallel one. */
  --dnb-space-1: var(--tblr-spacer-1);
  --dnb-space-2: var(--tblr-spacer-2);
  --dnb-space-3: var(--tblr-spacer-3);
  --dnb-space-4: var(--tblr-spacer-4);
  --dnb-space-5: var(--tblr-spacer-5);
  --dnb-space-6: var(--tblr-spacer-6);

  /* ---------- Shadows ---------- */
  --dnb-shadow-subtle: var(--tblr-box-shadow-sm);
  --dnb-shadow-card: var(--tblr-box-shadow);
  --dnb-shadow-elevated: var(--tblr-box-shadow-lg);

  /* ---------- Typography ---------- */
  /* Inter is already bundled (webfonts/Inter-VariableFont.ttf) but not
     currently loaded via @font-face anywhere - falls back to Tabler's
     sans-serif stack until that's wired up. */
  --dnb-font-family: 'Inter', var(--tblr-font-sans-serif);
  --dnb-text-sm: 0.8125rem;
  --dnb-text-body: var(--tblr-body-font-size);
  --dnb-text-label: 0.8125rem;
  --dnb-heading: var(--tblr-font-size-h3);
  --dnb-page-title: var(--tblr-font-size-h1);

  /* ---------- Motion ---------- */
  /* No Tabler equivalent exists (component transitions are hardcoded
     per-rule in tabler.css) - defined fresh, applied incrementally. */
  --dnb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dnb-transition-fast: 120ms var(--dnb-ease);
  --dnb-transition: 180ms var(--dnb-ease);
  --dnb-transition-slow: 280ms var(--dnb-ease);
}

/* Dark-mode overrides. Kept minimal and additive: Tabler's own
   [data-bs-theme=dark] block (see tabler.css) already redefines the
   --tblr-* variables most of the above tokens alias to, so most --dnb-*
   tokens flip automatically. Only the values below need an explicit
   dark-mode redeclaration because they don't have a --tblr-* backing
   variable, or because the current shipped look intentionally differs
   from Tabler's own dark defaults. */
html[data-bs-theme="dark"] {
  --dnb-bg-elevated: #111821;
  --dnb-card-bg: #161b22;
}