/* ==========================================================================
   RN VALVES PORTAL — DESIGN TOKENS
   "RN Cyan + Chrome": the brand blue lifted straight off the RN roundel
   (#01A0E2), set against deep water-navy and brushed-steel surfaces.
   Everything downstream reads from these variables, so rebranding is a matter
   of changing values here (or in Customizer → RN Portal Branding).
   ========================================================================== */

:root {
	/* ---- Brand (sampled from the RN Valves & Faucets roundel) ---- */
	--rnv-brand:        #01A0E2;
	--rnv-brand-rgb:    1, 160, 226;
	--rnv-accent:       #7DE3FF;
	--rnv-accent-rgb:   125, 227, 255;
	--rnv-ink:          #04202F;

	/* ---- Brand blue ramp, centred on #01A0E2 ---- */
	--rnv-blue-50:  #E7F6FD;
	--rnv-blue-100: #C4EAFA;
	--rnv-blue-200: #8FD8F5;
	--rnv-blue-300: #4EC3EE;
	--rnv-blue-400: #1CAEE8;
	--rnv-blue-500: #01A0E2;
	--rnv-blue-600: #0182BB;
	--rnv-blue-700: #026793;
	--rnv-blue-800: #044E6E;
	--rnv-blue-900: #05374E;

	/* ---- Steel / chrome ramp ---- */
	--rnv-steel-50:  #F6F8FC;
	--rnv-steel-100: #EDF1F7;
	--rnv-steel-200: #DCE3ED;
	--rnv-steel-300: #C2CCDA;
	--rnv-steel-400: #94A3B8;
	--rnv-steel-500: #6B7C93;
	--rnv-steel-600: #4C5A6E;
	--rnv-steel-700: #33404F;
	--rnv-steel-800: #1E2836;
	--rnv-steel-900: #121A24;

	/* ---- Water-navy ramp (dark shell) ---- */
	--rnv-navy-950: #030F17;
	--rnv-navy-900: #05161F;
	--rnv-navy-850: #071E2B;
	--rnv-navy-800: #092737;
	--rnv-navy-700: #0C3245;
	--rnv-navy-600: #103F56;
	--rnv-navy-500: #144D69;

	/* ---- Semantic ---- */
	--rnv-good:  #24D3A4;
	--rnv-good-d:#0C9B78;
	--rnv-warn:  #F7B23C;
	--rnv-warn-d:#C4870F;
	--rnv-bad:   #FF6178;
	--rnv-bad-d: #C43254;
	--rnv-info:  #4FC3F7;

	/* ---- Chrome gradients (the signature material) ---- */
	--rnv-chrome: linear-gradient(135deg,
		#FDFEFF 0%, #E4EAF2 18%, #B7C3D2 38%,
		#8E9CAF 50%, #C4CFDC 63%, #EEF2F8 82%, #FFFFFF 100%);
	--rnv-chrome-dark: linear-gradient(135deg,
		#31485A 0%, #1A2C3B 20%, #425B6F 42%,
		#12212E 55%, #38505F 74%, #172733 100%);
	--rnv-chrome-edge: linear-gradient(90deg,
		transparent, rgba(255,255,255,.55) 25%, rgba(255,255,255,.9) 50%,
		rgba(255,255,255,.55) 75%, transparent);

	/* ---- Typography ---- */
	--rnv-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--rnv-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
		Menlo, Consolas, monospace;

	--rnv-fs-xs: 11.5px;
	--rnv-fs-sm: 13px;
	--rnv-fs-md: 14.5px;
	--rnv-fs-lg: 17px;
	--rnv-fs-xl: 22px;
	--rnv-fs-2xl: 30px;
	--rnv-fs-3xl: 40px;

	/* ---- Geometry ---- */
	--rnv-r-xs: 6px;
	--rnv-r-sm: 9px;
	--rnv-r-md: 13px;
	--rnv-r-lg: 18px;
	--rnv-r-xl: 26px;
	--rnv-r-pill: 999px;

	--rnv-side-w: 268px;
	--rnv-side-w-collapsed: 76px;
	--rnv-top-h: 62px;
	--rnv-gut: 26px;
	--rnv-maxw: 1560px;

	/* ---- Motion ---- */
	--rnv-t-fast: 130ms cubic-bezier(.4, 0, .2, 1);
	--rnv-t: 220ms cubic-bezier(.4, 0, .2, 1);
	--rnv-t-slow: 420ms cubic-bezier(.16, 1, .3, 1);

	/* ---- Z ---- */
	--rnv-z-side: 40;
	--rnv-z-top: 30;
	--rnv-z-palette: 90;
}

/* ==========================================================================
   DARK — the default. Machined, low-light control-room feel.
   ========================================================================== */
:root,
html[data-rnv-theme="dark"] {
	--rnv-bg:        var(--rnv-navy-950);
	--rnv-bg-2:      var(--rnv-navy-900);
	--rnv-surface:   rgba(12, 34, 48, .72);
	--rnv-surface-2: rgba(17, 45, 62, .78);
	--rnv-surface-3: rgba(24, 58, 78, .70);
	--rnv-raised:    rgba(8, 30, 43, .93);

	--rnv-line:      rgba(110, 190, 228, .16);
	--rnv-line-2:    rgba(110, 190, 228, .28);
	--rnv-line-hot:  rgba(var(--rnv-brand-rgb), .55);

	--rnv-text:      #E4F3FA;
	--rnv-text-2:    #A2C1D2;
	--rnv-text-3:    #67879A;
	--rnv-text-inv:  #041722;

	--rnv-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
	--rnv-shadow:    0 10px 30px -12px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.35);
	--rnv-shadow-lg: 0 40px 90px -30px rgba(0,0,0,.85), 0 8px 26px rgba(0,0,0,.45);
	--rnv-glow:      0 0 0 1px rgba(var(--rnv-brand-rgb), .35),
	                 0 0 26px -6px rgba(var(--rnv-brand-rgb), .55);

	--rnv-chrome-surface: var(--rnv-chrome-dark);
	--rnv-grid-line: rgba(90, 190, 235, .06);
	--rnv-scrim: rgba(2, 12, 18, .74);
	color-scheme: dark;
}

/* ==========================================================================
   LIGHT — drawing-office white with steel rules.
   ========================================================================== */
html[data-rnv-theme="light"] {
	--rnv-bg:        #EDF4F8;
	--rnv-bg-2:      #F6FAFC;
	--rnv-surface:   rgba(255, 255, 255, .88);
	--rnv-surface-2: rgba(255, 255, 255, .96);
	--rnv-surface-3: #EFF6FA;
	--rnv-raised:    #FFFFFF;

	--rnv-line:      rgba(6, 62, 92, .12);
	--rnv-line-2:    rgba(6, 62, 92, .20);
	--rnv-line-hot:  rgba(var(--rnv-brand-rgb), .45);

	--rnv-text:      #062231;
	--rnv-text-2:    #35586C;
	--rnv-text-3:    #6D8B9D;
	--rnv-text-inv:  #FFFFFF;

	--rnv-shadow-sm: 0 1px 2px rgba(6, 52, 78, .07);
	--rnv-shadow:    0 12px 28px -14px rgba(6, 52, 78, .30), 0 2px 6px rgba(6,52,78,.06);
	--rnv-shadow-lg: 0 36px 70px -28px rgba(6, 52, 78, .35), 0 6px 20px rgba(6,52,78,.10);
	--rnv-glow:      0 0 0 1px rgba(var(--rnv-brand-rgb), .30),
	                 0 0 22px -8px rgba(var(--rnv-brand-rgb), .40);

	--rnv-chrome-surface: var(--rnv-chrome);
	--rnv-grid-line: rgba(2, 100, 145, .06);
	--rnv-scrim: rgba(4, 32, 47, .40);
	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	:root { --rnv-t-fast: 1ms; --rnv-t: 1ms; --rnv-t-slow: 1ms; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}