/**
 * Slate Dealer Portal — Ops-aligned Design Tokens
 * Path: assets/css/slate-design-tokens.css
 *
 * ─────────────────────────────────────────────────────────────────────
 * AUTHORITY NOTE (read before editing)
 * ─────────────────────────────────────────────────────────────────────
 * The Slate Ops shell and design language are the visual source of truth.
 *
 * RULES — non-negotiable:
 *   1. No inline hex colors anywhere in portal CSS. Use var(--slate-*).
 *   2. No Tailwind utilities. This portal uses hand-authored CSS.
 *   3. Use approved font-weight tokens. Display headlines use condensed 900.
 *   4. Spacing uses the --slate-space-* scale. No magic pixel values.
 *   5. If a token you need doesn't exist here, ADD IT HERE FIRST, then use it.
 *      Do not inline the value "just this once". That's how drift starts.
 *   6. Brand colors (Sage, Sand, Arches, Redwood) are canonical per
 *      Ryan's Excel brand standard. Do not re-derive them from mockups.
 *
 * ENQUEUE:
 *   Register this as a standalone handle and make slate-portal depend on it.
 *   In slate-portal.php, add BEFORE the slate-portal wp_enqueue_style call:
 *
 *     wp_enqueue_style(
 *         'slate-design-tokens',
 *         SLATE_PORTAL_URL . 'assets/css/slate-design-tokens.css',
 *         [],
 *         slate_portal_asset_ver( 'assets/css/slate-design-tokens.css' )
 *     );
 *
 *   Then change the slate-portal enqueue deps array from [] to:
 *     [ 'slate-design-tokens' ]
 *
 *   The quote-builder, quotes-list, and configurator handles already depend
 *   on slate-portal, so they inherit tokens through the cascade.
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════
   * BRAND COLORS — canonical hex per Slate Excel brand standard
   * Do not modify. These are the same values used in PPTX/XLSX/DOCX outputs.
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-sage:            #40464B;
  --slate-sage-ink:        #2B3034;
  --slate-sage-wash:       #F2F3F1;   /* Sage 5% — subtle surface tint */

  --slate-sand:            #E1D8CB;
  --slate-sand-deep:       #D4C9B7;   /* Sand hover */
  --slate-sand-wash:       #F5F1E9;   /* Sand 30% — page backgrounds, sidebar */

  --slate-arches:          #D68B19;
  --slate-arches-ink:      #B07212;   /* Arches hover */
  --slate-arches-wash:     #FDF2DF;   /* Arches tinted bg — warnings, attention pills */

  --slate-redwood:         #0F3A2A;
  --slate-redwood-ink:     #0B2C20;   /* Redwood hover for primary actions */
  --slate-redwood-wash:    #E4EEE9;   /* Redwood tinted bg — success pills */

  --slate-warning:         #B8791F;   /* Advisory bar only */
  --slate-warning-ink:     #8A5A0F;   /* Accessible warning text */

  --slate-flag:            #B22222;   /* Error/danger only. Canonical Excel flag color. Use sparingly. */
  --slate-flag-wash:       #F8E5E5;   /* Error tinted bg — destructive pills */

  /* ═══════════════════════════════════════════════════════════════════
   * NEUTRALS — warm gray scale, complements Sage/Sand
   * Primary dealer-facing text is black per Slate brand standards.
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-ink:             #2A2E2C;
  --slate-ink-muted:       #5A5E5C;   /* Secondary text. Labels, metadata. */
  --slate-ink-subtle:      #8A8880;   /* Tertiary text. Icons, hints, counts. */
  --slate-ink-placeholder: #B0AEA6;   /* Input placeholders, disabled text */

  --slate-divider:         #E6E2D4;   /* Default borders, row separators */
  --slate-divider-strong:  #D9D5C7;   /* Hover borders, active inputs */
  --slate-divider-soft:    #F0EDE3;   /* Subtle separators inside cards */

  --slate-surface:         #FFFFFF;   /* Card backgrounds, main canvas */
  --slate-surface-tint:    #FAFAF7;   /* Subtle surface tint — sidebar, metric cards */
  --slate-surface-page:    #F5F3ED;   /* Page background (behind shell frame) */

  /* ═══════════════════════════════════════════════════════════════════
   * TYPOGRAPHY
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-font-sans: "Roboto Flex", "Roboto", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --slate-font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Type scale — tight by design. If you think you need more sizes, you don't. */
  --slate-text-micro:    11px;
  --slate-text-xs:       12px;  /* Eyebrow labels, small pills, nav items */
  --slate-text-sm:       13px;  /* Dense table cells, secondary UI */
  --slate-text-base:     14px;  /* Body copy, buttons, inputs (DEFAULT) */
  --slate-text-md:       16px;  /* Emphasized body, card titles */
  --slate-text-lg:       18px;  /* H3, section headings */
  --slate-text-xl:       22px;  /* H2, page titles */
  --slate-text-2xl:      28px;  /* H1, display headings (rare — use sparingly) */
  --slate-text-3xl:      34px;  /* PDP hero title + installed-price display only */

  /* Weights — approved Slate UI weights. */
  --slate-weight-regular: 400;
  --slate-weight-medium:  500;
  --slate-weight-bold:    700;
  --slate-weight-black:   700;

  /* Line heights */
  --slate-leading-tight:   1.2;   /* Headings */
  --slate-leading-normal:  1.5;   /* Body */
  --slate-leading-relaxed: 1.65;  /* Long-form (rare) */

  /* Letter spacing — for uppercase labels */
  --slate-tracking-normal: 0;
  --slate-tracking-label:  0.08em;
  --slate-tracking-wide:   0.12em;
  --slate-display-stretch: 50%;      /* Roboto Flex width axis for condensed display type */

  /* ═══════════════════════════════════════════════════════════════════
   * SPACING — 4px base grid
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-space-2xs:  2px;
  --slate-space-xs:   4px;
  --slate-space-compact: 5px;
  --slate-space-sm:   8px;
  --slate-space-md:   12px;
  --slate-space-lg:   16px;
  --slate-space-xl:   24px;
  --slate-space-2xl:  32px;
  --slate-space-3xl:  48px;
  --slate-space-4xl:  64px;

  /* ═══════════════════════════════════════════════════════════════════
   * RADIUS
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-radius-none:  0;        /* Tables, structural — no rounding */
  --slate-radius-sm:    3px;      /* Pills, micro badges */
  --slate-radius-md:    5px;      /* Buttons, inputs, small cards */
  --slate-radius-lg:    8px;      /* Cards, containers */
  --slate-radius-xl:    12px;     /* Major shell surfaces */
  --slate-radius-2xl:   18px;     /* Ops-style elevated content cards (dashboard) */
  --slate-radius-full:  999px;    /* Avatar circles only */

  /* ═══════════════════════════════════════════════════════════════════
   * BORDERS
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-border-width:     1px;
  --slate-border-thick:     2px;   /* Active indicators only (e.g., selected row left-edge) */
  --slate-border:           var(--slate-border-width) solid var(--slate-divider);
  --slate-border-strong:    var(--slate-border-width) solid var(--slate-divider-strong);
  --slate-border-soft:      var(--slate-border-width) solid var(--slate-divider-soft);

  /* ═══════════════════════════════════════════════════════════════════
   * SHADOWS
   * Elevation is intentional and token-driven. --slate-shadow-card is the
   * Ops-aligned content-card elevation (adopted portal-wide from the Ops
   * dashboard; dashboard first, other pages to follow).
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-shadow-none:    none;
  --slate-shadow-subtle:  0 1px 2px rgba(42, 46, 44, 0.04);    /* Cards that need slight lift */
  --slate-shadow-pop:     0 4px 12px rgba(42, 46, 44, 0.08);   /* Dropdowns, popovers, modals ONLY */
  --slate-shadow-card:    0 12px 34px rgba(15, 52, 42, 0.10);  /* Ops-style elevated content cards */

  /* ═══════════════════════════════════════════════════════════════════
   * LAYOUT — shell and sidebar dimensions
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-shell-topbar-height:    56px;
  --slate-shell-maxwidth:         1440px;

  --slate-sidebar-w-expanded:     172px;
  --slate-sidebar-w-collapsed:    44px;
  --slate-sidebar-transition:     160ms ease;

  /* ═══════════════════════════════════════════════════════════════════
   * Z-INDEX — keep flat. If you need more than 5 layers, rearchitect.
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-z-base:      0;
  --slate-z-dropdown:  100;
  --slate-z-sticky:    200;
  --slate-z-modal:     300;
  --slate-z-tooltip:   400;

  /* ═══════════════════════════════════════════════════════════════════
   * MOTION
   * ═══════════════════════════════════════════════════════════════════ */

  --slate-duration-fast:    100ms;   /* Hovers, button presses */
  --slate-duration-normal:  160ms;   /* Sidebar collapse, panel open */
  --slate-duration-slow:    240ms;   /* Page transitions (rare) */
  --slate-ease:             ease;    /* Default curve. Don't overthink this. */
}

/**
 * ──────────────────────────────────────────────────────────────────────
 * BASELINE TYPOGRAPHY
 * Applied globally to portal pages via the outer shell wrapper.
 * Individual components may scale text smaller, never larger for body copy.
 * ──────────────────────────────────────────────────────────────────────
 */

.slate-portal,
.slate-portal * {
  box-sizing: border-box;
}

.slate-portal {
  font-family: var(--slate-font-sans);
  font-size: var(--slate-text-base);
  font-weight: var(--slate-weight-regular);
  line-height: var(--slate-leading-normal);
  color: var(--slate-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slate-portal h1,
.slate-portal h2,
.slate-portal h3,
.slate-portal h4 {
  font-weight: var(--slate-weight-medium);
  line-height: var(--slate-leading-tight);
  color: var(--slate-ink);
  margin: 0;
}

.slate-portal h1 { font-size: var(--slate-text-xl); }
.slate-portal h2 { font-size: var(--slate-text-lg); }
.slate-portal h3 { font-size: var(--slate-text-md); }
.slate-portal h4 { font-size: var(--slate-text-base); }

.slate-portal p {
  margin: 0;
}

.slate-portal code,
.slate-portal kbd,
.slate-portal .slate-mono {
  font-family: var(--slate-font-mono);
  font-size: 0.92em;  /* Slightly smaller than surrounding sans — mono reads larger */
}

/**
 * ──────────────────────────────────────────────────────────────────────
 * UTILITY CLASSES
 * Minimal set. If you reach for a new utility, prefer a semantic component class.
 * ──────────────────────────────────────────────────────────────────────
 */

.slate-eyebrow {
  font-size: var(--slate-text-micro);
  font-weight: var(--slate-weight-medium);
  letter-spacing: var(--slate-tracking-wide);
  text-transform: uppercase;
  color: var(--slate-arches);
}

.slate-label {
  font-size: var(--slate-text-micro);
  font-weight: var(--slate-weight-medium);
  letter-spacing: var(--slate-tracking-label);
  text-transform: uppercase;
  color: var(--slate-ink-subtle);
}

.slate-muted {
  color: var(--slate-ink-muted);
}

.slate-subtle {
  color: var(--slate-ink-subtle);
}

/**
 * ──────────────────────────────────────────────────────────────────────
 * SEMANTIC STATE PILLS
 * Use these class names for quote/order status. Status vocabulary matches
 * Slate_Quotes schema: draft | submitted | approved | revised | accepted.
 * Plus: expired | needs_revision for edge cases.
 * ──────────────────────────────────────────────────────────────────────
 */

.slate-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--slate-space-xs);
  padding: var(--slate-space-2xs) var(--slate-space-sm);
  border-radius: var(--slate-radius-sm);
  font-size: var(--slate-text-micro);
  font-weight: var(--slate-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.slate-pill--draft     { background: var(--slate-surface-tint);   color: var(--slate-ink-subtle); }
.slate-pill--submitted { background: var(--slate-sand);           color: var(--slate-sage);       }
.slate-pill--approved  { background: var(--slate-redwood-wash);   color: var(--slate-redwood);    }
.slate-pill--revised   { background: var(--slate-arches-wash);    color: var(--slate-arches-ink); }
.slate-pill--accepted  { background: var(--slate-redwood);        color: var(--slate-sand-wash);  }
.slate-pill--expired   { background: var(--slate-flag-wash);      color: var(--slate-flag);       }
.slate-pill--attention { background: var(--slate-arches-wash);    color: var(--slate-arches-ink); }

/**
 * ──────────────────────────────────────────────────────────────────────
 * WHAT TO DO WHEN A TOKEN IS MISSING
 * ──────────────────────────────────────────────────────────────────────
 * 1. Pause. The scale above is intentionally tight.
 * 2. Check if an existing token covers the case at "close enough" distance.
 *    (e.g., do you really need 10px, or will --slate-space-sm work?)
 * 3. If a new token is genuinely needed, ADD IT TO THIS FILE with a comment
 *    explaining what it's for. Never hardcode in a component.
 * 4. Tell Ryan the new token was added so it can be reviewed.
 *
 * Bad: padding: 6px 10px;  // magic numbers leak from this everywhere
 * Good: padding: var(--slate-space-xs) var(--slate-space-sm);
 *       (or add --slate-space-compact: 6px if you really need it)
 * ──────────────────────────────────────────────────────────────────────
 */