/* ============================================================
   Nucor Buildings Group — Official Design System Tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand palette ---- */
  --nbg-color-brand-green-dark:   #213B34;
  --nbg-color-brand-green-medium: #006325;
  --nbg-color-brand-green-light:  #A1CEAD;
  --nbg-color-brand-green-pale:   #D9E8E2;

  /* Blue is a real second accent for portal/data actions (Create, Filter, Manage), not an unused brand swatch. */
  --nbg-color-brand-blue:         #7CC5EB;
  --nbg-color-brand-blue-light:   #BFE2F6;
  --nbg-color-brand-gray-light:   #F5F4F0;
  --nbg-color-brand-white:        #FFFFFF;
  --nbg-color-brand-ink:          #0E1A17;
  --nbg-color-brand-ink-2:        #2A3B36;
  --nbg-color-brand-ink-3:        #5A6B66;
  --nbg-color-brand-line:         #D4DBD7;
  --nbg-color-brand-line-strong:  #B4BFBA;
  --nbg-color-brand-line-dark:    #2F4A42;

  /* ---- Neutral gray ramp (theme-independent primitive; 1 = lightest, 12 = darkest) ----
     Shared source for every neutral surface/border/text token below — both themes draw
     their neutral steps from here instead of each re-declaring the same grays. Pure white
     isn't a ramp step: it's already --nbg-color-brand-white, so consumers that need it
     reference that primitive directly rather than a redundant "neutral-0" synonym. */
  --nbg-color-neutral-1:  #F4F4F4;
  --nbg-color-neutral-2:  #E8E8E8;
  --nbg-color-neutral-3:  #E0E0E0;
  --nbg-color-neutral-4:  #C6C6C6;
  --nbg-color-neutral-5:  #A8A8A8;
  --nbg-color-neutral-6:  #8D8D8D;
  --nbg-color-neutral-7:  #525252;
  --nbg-color-neutral-8:  #474747;
  --nbg-color-neutral-9:  #353535;
  --nbg-color-neutral-10: #262626;
  --nbg-color-neutral-11: #1C1C1C;
  --nbg-color-neutral-12: #161616;

  /* ---- Dark-theme surface tokens (IBM Carbon neutral gray ramp) ---- */
  --nbg-color-surface-1:   var(--nbg-color-neutral-12);
  --nbg-color-surface-2:   var(--nbg-color-neutral-11);
  --nbg-color-surface-3:   var(--nbg-color-neutral-10);
  --nbg-color-surface-4:   var(--nbg-color-neutral-9);
  --nbg-color-surface-5:   var(--nbg-color-neutral-8);  /* Carbon G80 hover; extends the 4-step ramp */

  /* Surface variants pulled from the design system — no existing local
     equivalent. -bg-deep aliases neutral-2 in light theme (exact hex
     match); -card-2 and -input-bg keep their own raw values in both files. */
  --nbg-color-bg-deep:  #0E120E;
  --nbg-color-card-2:   #1E1E1E;
  --nbg-color-input-bg: #373737;

  /* Brand-tinted (not neutral) — dark theme's borders/text lean warm-green rather than
     drawing from the neutral ramp above; this is a deliberate brand-warmth choice. */
  --nbg-color-border-1: #1F3933;
  --nbg-color-border-2: #2A4D45;
  --nbg-color-border-3: #3A6358;

  /* Plain neutral hairline divider — a distinct role from the
     brand-tinted -1/-2/-3 borders above, not a 4th step in that ramp.
     -hairline-strong aliases the neutral ramp rather than duplicating its hex;
     -hairline itself is a genuinely new value with no matching neutral step. */
  --nbg-color-border-hairline:        #393939;
  --nbg-color-border-hairline-strong: var(--nbg-color-neutral-7);

  --nbg-color-text-1:   #E8F0EC;
  --nbg-color-text-2:   #B5C5BF;
  --nbg-color-text-3:   #7E938C;
  --nbg-color-text-4:   #5A6F69;

  --nbg-color-accent:        #00793A;
  --nbg-color-accent-strong: #42BE65;
  --nbg-color-accent-dim:    #00501F;
  --nbg-color-accent-tint:   #00793A1F;
  --nbg-color-accent-tint-2: #00793A33;

  --nbg-color-info:         var(--nbg-color-accent);
  --nbg-color-info-tint:    var(--nbg-color-accent-tint);
  --nbg-color-warning:      #E0A340;
  --nbg-color-warning-tint: #E0A34024;
  --nbg-color-warning-dim:  #E0A34066;
  --nbg-color-success:      #7EEAA7;
  --nbg-color-success-tint: #7EEAA71F;
  --nbg-color-success-dim:  #7EEAA74D;

  /* Tier 0 reconciliation: green accent modifiers pulled from the
     design system's --eq-green-hover/-bright/-light. -hover has no light-theme
     override in the source (hover state stays the same swatch in both themes). */
  --nbg-color-accent-hover:  #005528;
  --nbg-color-accent-bright: #3DDC84;
  --nbg-color-accent-light:  #4ADE80;

  /* ---- Accent — blue (portal/data actions: Create, Filter, Manage) ----
     Blue is a real second accent alongside green, mirroring the design
     system's Carbon-blue role (--eq-blue* family).
     -bright aliases -strong here because dark theme's source values are equal;
     light theme flips which one is the alias (see light override below). */
  --nbg-color-accent-blue:        #0F62FE;
  --nbg-color-accent-blue-hover:  #0353E9;
  --nbg-color-accent-blue-light:  #78A9FF;
  --nbg-color-accent-blue-strong: #4589FF;
  --nbg-color-accent-blue-bright: var(--nbg-color-accent-blue-strong);
  --nbg-color-accent-blue-tint:   #78A9FF26;

  /* Text placed on top of a surface colored with --nbg-color-accent (avatar, brand mark, FAB,
     active segment controls). --nbg-color-brand-ink is the official brand ink token, not theme-aware —
     it reads fine against dark theme's brighter --nbg-color-accent, but needs a light-theme
     override below since light theme's --nbg-color-accent is a darker green. */
  --nbg-color-on-accent: var(--nbg-color-brand-ink);

  --nbg-color-danger:       #F87171;
  --nbg-color-danger-pale:  #FCA5A5;
  --nbg-color-danger-tint:  #F871711F;
  --nbg-color-violet:       #C4B5FD;

  /* ---- GoodThru "expired" pill — its own tint/border tuning, distinct from danger-tint ---- */
  --nbg-color-expired-red:        var(--nbg-color-danger);
  --nbg-color-expired-red-tint:   #F8717126;
  --nbg-color-expired-red-border: #F8717161;

  --nbg-color-button-text: var(--nbg-color-brand-white);

  /* Logo mask color (see .brand-mark) — white to read against the dark topbar. */
  --nbg-color-brand-mark: var(--nbg-color-brand-white);

  --nbg-shadow-soft:  0 1px 2px #0000004D;
  --nbg-shadow-mid:   0 8px 24px -8px #00000080;
  --nbg-shadow-pop:   0 24px 60px -16px #00000099;
  --nbg-shadow-modal: 0 24px 64px #000000B3; /* deepest shadow, above -pop */
  --nbg-shadow-glow:  0 8px 20px #0066334D;  /* green emphasis glow on primary CTAs */

  /* ---- CAD diagram palette — always on the dark #0a0a0a diagram
     canvas regardless of theme; used in panel section SVGs instead of raw hex. ---- */
  --nbg-color-cad-bg:       #0A0A0A;
  --nbg-color-cad-dim:      #FF0000;
  --nbg-color-cad-dim-2:    #E5484D;
  --nbg-color-cad-accent:   #39FF5F;
  /* -2 aliases -accent-bright, which does shift in the light-theme block below —
     an inherited quirk from the same aliasing in the upstream source. */
  --nbg-color-cad-accent-2: var(--nbg-color-accent-bright);
  --nbg-color-cad-grid:     #FFFF00;
  --nbg-color-cad-detail:   #00FFFF;
  --nbg-color-cad-steel:    #CFCFCF;

  /* ---- Chart / categorical colors — theme-independent. Chart-1/-2 use
     fixed hex values (not aliased to the accent tokens) because accent
     is redefined per-theme and these must not drift with it. ---- */
  --nbg-color-chart-1: #00793A;
  --nbg-color-chart-2: #42BE65;
  --nbg-color-chart-3: #BE95FF;
  --nbg-color-chart-4: #FF7EB6;
  --nbg-color-chart-5: #FFB3B8;

  /* ---- Typography ---- */
  --nbg-type-font-display: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --nbg-type-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nbg-type-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --nbg-type-h1:      44px;
  --nbg-type-h2:      32px;
  --nbg-type-h3:      24px;
  --nbg-type-h4:      20px;
  --nbg-type-body-l:  18px;
  --nbg-type-body:    16px;
  --nbg-type-body-s:  14px;
  --nbg-type-caption: 12px;
  --nbg-type-eyebrow: 11px;

  --nbg-type-weight-regular:  400;
  --nbg-type-weight-medium:   500;
  --nbg-type-weight-semibold: 600;
  --nbg-type-weight-bold:     700;
  --nbg-type-weight-black:    800;

  --nbg-type-tracking-tight:   -0.02em;
  --nbg-type-tracking-snug:    -0.01em;
  --nbg-type-tracking-wide:     0.04em;
  --nbg-type-tracking-eyebrow:  0.1em;

  /* ---- Spacing scale (4px base) ---- */
  --nbg-space-1:  4px;
  --nbg-space-2:  8px;
  --nbg-space-3:  12px;
  --nbg-space-4:  16px;
  --nbg-space-5:  24px;
  --nbg-space-6:  32px;
  --nbg-space-7:  48px;
  --nbg-space-8:  64px;

  /* ---- Layout & grid — theme-independent chrome/rail dimensions ---- */
  --nbg-layout-nav-h:        48px;
  --nbg-layout-subhead-h:    56px;
  --nbg-layout-portal-max-w: 1440px;
  --nbg-layout-rail-sm:      240px;
  --nbg-layout-rail-md:      320px;
  --nbg-layout-rail-lg:      384px;
  --nbg-layout-rail-xl:      480px;

  /* ---- Radius ---- */
  --nbg-radius-1:    2px;
  --nbg-radius-2:    4px;
  --nbg-radius-3:    8px;
  --nbg-radius-4:    12px; /* gap between -3 and -pill */
  --nbg-radius-pill: 999px;

  /* ---- Motion ---- */
  --nbg-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --nbg-motion-dur-fast:      120ms;
  --nbg-motion-dur-medium:    200ms;
  --nbg-motion-dur-slow:      320ms;

  /* ---- Line-height scale ---- */
  --nbg-type-leading-none:    1;
  --nbg-type-leading-tight:   1.2;
  --nbg-type-leading-normal:  1.5;
  --nbg-type-leading-relaxed: 1.65;

  /* ---- Z-index scale ----
     Named after the two dominant tiers already in use across the app (most dialogs'
     backdrop/panel pair sits at 100/101; ProfileMenu/ProjectContextMenu's popover pair
     at 299/300; toasts always on top at 9999). RightSidePanel (40/41), ImportDialog
     (50/51), and SubmitProjectDialog's nested picker (110) don't match either tier —
     worth a look, but left as-is here since retuning them is a stacking-behavior change,
     not a token-naming one. */
  --nbg-z-base:             0;   /* in-flow content, below the named tiers */
  --nbg-z-raised:           10;  /* hover cards, focused rows */
  --nbg-z-modal-backdrop:   100;
  --nbg-z-modal:            101;
  --nbg-z-dropdown:         200; /* gap between the modal and popover tiers */
  --nbg-z-popover-backdrop: 299;
  --nbg-z-popover:          300;
  --nbg-z-toast:            9999;
}

/* ---- Light mode overrides (IBM Carbon white/Gray-10 ramp) ---- */
:root[data-theme="light"] {
  --nbg-color-surface-1: var(--nbg-color-neutral-1);
  --nbg-color-surface-2: var(--nbg-color-brand-white);
  --nbg-color-surface-3: var(--nbg-color-neutral-2);
  --nbg-color-surface-4: var(--nbg-color-neutral-3);
  --nbg-color-surface-5: var(--nbg-color-neutral-4);

  --nbg-color-border-1: var(--nbg-color-neutral-3);
  --nbg-color-border-2: var(--nbg-color-neutral-4);
  --nbg-color-border-3: var(--nbg-color-neutral-5);

  --nbg-color-text-1: var(--nbg-color-neutral-12);
  --nbg-color-text-2: var(--nbg-color-neutral-7);
  --nbg-color-text-3: var(--nbg-color-neutral-6);
  --nbg-color-text-4: var(--nbg-color-neutral-5);

  /* Light theme's accent and accent-dim are the official brand green swatches verbatim —
     not independently-tuned colors, so they alias the brand palette rather than repeating it. */
  --nbg-color-accent:        var(--nbg-color-brand-green-medium);
  --nbg-color-accent-strong: #004A1C;
  --nbg-color-accent-dim:    var(--nbg-color-brand-green-light);
  --nbg-color-accent-tint:   #00632514;
  --nbg-color-accent-tint-2: #00632526;

  --nbg-color-info:         var(--nbg-color-accent);
  --nbg-color-info-tint:    var(--nbg-color-accent-tint);
  --nbg-color-warning:      #996B10;
  --nbg-color-warning-tint: #996B101A;
  --nbg-color-warning-dim:  #996B104D;
  --nbg-color-success:      #1B7B47;
  --nbg-color-success-tint: #1B7B4714;
  --nbg-color-success-dim:  #1B7B4740;

  /* -hover has no light override in the design system (same swatch
     both themes); -bright/-light are darkened here for AA contrast on white. */
  --nbg-color-accent-bright: #198038;
  --nbg-color-accent-light:  #0E6027;

  /* Light theme collapses -light and -strong to the same darkened
     swatch for contrast, then reuses the vivid dark-mode blue for -bright
     instead (inverse of the dark-theme aliasing above). */
  --nbg-color-accent-blue:        #0043CE;
  --nbg-color-accent-blue-light:  #0043CE;
  --nbg-color-accent-blue-strong: var(--nbg-color-accent-blue-light);
  --nbg-color-accent-blue-bright: #0F62FE;
  --nbg-color-accent-blue-tint:   #0F62FE1A;

  --nbg-color-border-hairline:        var(--nbg-color-neutral-3);
  --nbg-color-border-hairline-strong: var(--nbg-color-neutral-6);

  --nbg-color-bg-deep:  var(--nbg-color-neutral-2);
  --nbg-color-card-2:   var(--nbg-color-surface-1);
  --nbg-color-input-bg: var(--nbg-color-brand-white);

  /* Light theme's --nbg-color-accent is a darker green than dark theme's — near-black ink text
     no longer contrasts, so use light text against it here instead. */
  --nbg-color-on-accent: var(--nbg-color-brand-white);

  --nbg-color-danger:       #DC2626;
  --nbg-color-danger-pale:  #EF4444;
  --nbg-color-danger-tint:  #DC262614;
  --nbg-color-violet:       #7C3AED;

  /* Logo reads better against light surfaces in the brand's own accent green. */
  --nbg-color-brand-mark: var(--nbg-color-accent);

  /* ---- GoodThru "expired" pill (light overrides) ---- */
  --nbg-color-expired-red:        var(--nbg-color-danger);
  --nbg-color-expired-red-tint:   #DC26261A;
  --nbg-color-expired-red-border: #DC262652;

  --nbg-shadow-soft:  0 1px 2px #00000014;
  --nbg-shadow-mid:   0 8px 24px -8px #00000026;
  --nbg-shadow-pop:   0 24px 60px -16px #00000033;
  --nbg-shadow-modal: 0 24px 64px #00000033;
}

/* ---- Base resets ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--nbg-type-font-sans);
  font-size: var(--nbg-type-body-s);
  line-height: 1.5;
  color: var(--nbg-color-text-1);
  background-color: var(--nbg-color-surface-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nbg-type-font-display);
  color: var(--nbg-color-text-1);
  font-weight: var(--nbg-type-weight-bold);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--nbg-color-accent);
  outline-offset: 2px;
}

/* Blazor's <FocusOnNavigate> moves screen-reader focus to the page's h1 on
   navigation by giving it a temporary tabindex="-1". That's not a real
   keyboard-focusable element, so it shouldn't get a visible focus ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}