/* =====================================================================
   Desek Color System
   Generated color ramps (50-950) for six palettes, plus semantic tokens
   for text, UI elements, and surfaces on both light and dark backgrounds.
 
   WCAG AA thresholds used throughout:
     - Normal text / text-based UI:      contrast ratio >= 4.5:1
     - Large text (>=24px, or >=19px bold)
       and non-text UI components:        contrast ratio >= 3:1
 
   Reference surfaces:
     - Light background: #ffffff
     - Dark background:  #14161a  (= --color-neutral-950, brand ink)
 
   Every semantic token below is annotated with its measured ratio
   against the surface it's designed for. Ramp steps are raw palette
   values (not all are text-safe) -- use the semantic tokens for any
   text, icon, or UI-component color; use raw ramp steps for fills,
   backgrounds, and decorative use where contrast rules don't apply.
   ===================================================================== */
 
:root {
 
  /* ---------- Primary ramp ---------- */
  --color-primary-50: #fdf9f1;
  --color-primary-100: #fbf1df;
  --color-primary-200: #f9e4be;
  --color-primary-300: #f7d18d;
  --color-primary-400: #fbb942;
  --color-primary-500: #faa60f;
  --color-primary-600: #d88e08;
  --color-primary-700: #ae730a;
  --color-primary-800: #85590a;
  --color-primary-900: #5d3f09;
  --color-primary-950: #291c05;
 
  /* ---------- Secondary ramp ---------- */
  --color-secondary-50: #f5f8fa;
  --color-secondary-100: #e7eef3;
  --color-secondary-200: #cedde8;
  --color-secondary-300: #abc6d9;
  --color-secondary-400: #7fa9c8;
  --color-secondary-500: #518db8;
  --color-secondary-600: #43789e;
  --color-secondary-700: #386280;
  --color-secondary-800: #2c4c62;
  --color-secondary-900: #203646;
  --color-secondary-950: #0f181f;
 
  /* ---------- Neutral ramp ---------- */
  --color-neutral-50: #f5f5f0;
  --color-neutral-100: #ebedef;
  --color-neutral-200: #d7dadf;
  --color-neutral-300: #bbbfc9;
  --color-neutral-400: #989faf;
  --color-neutral-500: #757f95;
  --color-neutral-600: #626c7e;
  --color-neutral-700: #515867;
  --color-neutral-800: #3f4550;
  --color-neutral-900: #1a1a1a;
  --color-neutral-950: #14161a;
 
  /* ---------- Success ramp ---------- */
  --color-success-50: #f4fbf8;
  --color-success-100: #e5f5ee;
  --color-success-200: #caecdc;
  --color-success-300: #a4e0c4;
  --color-success-400: #73d3a6;
  --color-success-500: #41c889;
  --color-success-600: #35ac74;
  --color-success-700: #2d8b5f;
  --color-success-800: #246b4a;
  --color-success-900: #1b4b35;
  --color-success-950: #0d2118;
 
  /* ---------- Warning ramp ---------- */
  --color-warning-50: #fdf7f2;
  --color-warning-100: #faece0;
  --color-warning-200: #f6d9c0;
  --color-warning-300: #f2bd91;
  --color-warning-400: #f09c57;
  --color-warning-500: #f07a19;
  --color-warning-600: #d06711;
  --color-warning-700: #a75410;
  --color-warning-800: #80420f;
  --color-warning-900: #5a2f0c;
  --color-warning-950: #271506;
 
  /* ---------- Error ramp ---------- */
  --color-error-50: #fcf3f3;
  --color-error-100: #f7e3e4;
  --color-error-200: #f0c7c8;
  --color-error-300: #e79c9f;
  --color-error-400: #de686c;
  --color-error-500: #d83137;
  --color-error-600: #ba262b;
  --color-error-700: #962225;
  --color-error-800: #731c1f;
  --color-error-900: #511517;
  --color-error-950: #240a0b;
 
  /* =====================================================================
     Semantic tokens -- WCAG AA guaranteed
     ===================================================================== */
 
  /* Base surfaces & text (neutral) */
  --color-bg-light: #ffffff;
  --color-bg-dark: var(--color-neutral-950);              /* #14161a */
  --color-surface-light: var(--color-neutral-50);         /* #f5f5f0 */
  --color-surface-dark: var(--color-neutral-900);         /* #1a1a1a, elevated above bg-dark */
  --color-border-light: var(--color-neutral-200);         /* #d7dadf, 1.4:1 vs white -- decorative use only, not for text */
  --color-border-dark: var(--color-neutral-700);          /* #515867, 2.54:1 vs dark -- decorative use only, not for text */
  --color-text-primary-on-light: var(--color-neutral-900);   /* #1a1a1a, 17.4:1 vs white */
  --color-text-secondary-on-light: var(--color-neutral-600); /* #626c7e, 5.3:1 vs white */
  --color-text-primary-on-dark: var(--color-neutral-50);     /* #f5f5f0, 16.56:1 vs dark */
  --color-text-secondary-on-dark: var(--color-neutral-400);  /* #989faf, 6.83:1 vs dark */
 
  /* Primary -- text & UI on light/dark backgrounds */
  --color-primary-text-on-light: var(--color-primary-800); /* #85590a, 6.12:1 vs white */
  --color-primary-text-on-dark: var(--color-primary-400);   /* #fbb942, 10.45:1 vs dark */
  --color-primary-ui-on-light: var(--color-primary-700);     /* #ae730a, 4.0:1 vs white -- icons/borders/large text */
  --color-primary-ui-on-dark: var(--color-primary-400);       /* #fbb942, 10.45:1 vs dark -- icons/borders/large text */
  --color-primary-on-primary: #1a1a1a;  /* text placed ON a primary-400 filled button/badge, 10.04:1 */
 
  /* Secondary -- text & UI on light/dark backgrounds */
  --color-secondary-text-on-light: var(--color-secondary-600); /* #43789e, 4.75:1 vs white */
  --color-secondary-text-on-dark: var(--color-secondary-500);   /* #518db8, 5.05:1 vs dark */
  --color-secondary-ui-on-light: var(--color-secondary-500);     /* #518db8, 3.59:1 vs white -- icons/borders/large text */
  --color-secondary-ui-on-dark: var(--color-secondary-500);       /* #518db8, 5.05:1 vs dark -- icons/borders/large text */
  --color-secondary-on-secondary: #1a1a1a;  /* text placed ON a secondary-500 filled button/badge, 4.85:1 */
 
  /* Success -- text & UI on light/dark backgrounds */
  --color-success-text-on-light: var(--color-success-800); /* #246b4a, 6.41:1 vs white */
  --color-success-text-on-dark: var(--color-success-500);   /* #41c889, 8.49:1 vs dark */
  --color-success-ui-on-light: var(--color-success-700);     /* #2d8b5f, 4.23:1 vs white -- icons/borders/large text */
  --color-success-ui-on-dark: var(--color-success-500);       /* #41c889, 8.49:1 vs dark -- icons/borders/large text */
  --color-success-on-success: #1a1a1a;  /* text placed ON a success-500 filled button/badge, 8.16:1 */
 
  /* Warning -- text & UI on light/dark backgrounds */
  --color-warning-text-on-light: var(--color-warning-700); /* #a75410, 5.36:1 vs white */
  --color-warning-text-on-dark: var(--color-warning-500);   /* #f07a19, 6.47:1 vs dark */
  --color-warning-ui-on-light: var(--color-warning-600);     /* #d06711, 3.73:1 vs white -- icons/borders/large text */
  --color-warning-ui-on-dark: var(--color-warning-500);       /* #f07a19, 6.47:1 vs dark -- icons/borders/large text */
  --color-warning-on-warning: #1a1a1a;  /* text placed ON a warning-500 filled button/badge, 6.22:1 */
 
  /* Error -- text & UI on light/dark backgrounds */
  --color-error-text-on-light: var(--color-error-500); /* #d83137, 4.76:1 vs white */
  --color-error-text-on-dark: var(--color-error-400);   /* #de686c, 5.44:1 vs dark */
  --color-error-ui-on-light: var(--color-error-500);     /* #d83137, 4.76:1 vs white -- icons/borders/large text */
  --color-error-ui-on-dark: var(--color-error-500);       /* #d83137, 3.81:1 vs dark -- icons/borders/large text */
  --color-error-on-error: #ffffff;  /* text placed ON a error-500 filled button/badge, 4.76:1 */
 
}
/* =====================================================================
   Desek Type System
   Font pairing: Space Grotesk (headings) + Inter (body)
   Google Fonts -- add this import (or the equivalent <link> tags) once,
   before this stylesheet:
 
   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
 
   Type scale is set in rem against a 16px root font-size, ratio ~1.2-1.25
   between steps, tightened at the top (larger headings get progressively
   more negative letter-spacing, per standard practice for grotesk/geometric
   display faces at large sizes) and loosened at the bottom (body and
   caption get more generous line-height for reading comfort).
   ===================================================================== */
 
:root {
 
  /* ---------- Font families ---------- */
  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
 
  /* ---------- Font weights ---------- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
 
  /* ---------- H1 -- 48px / 56px ---------- */
  --font-size-h1: 3rem;
  --line-height-h1: 3.5rem;
  --font-weight-h1: var(--font-weight-bold);
  --letter-spacing-h1: -0.02em;
  --font-family-h1: var(--font-heading);
 
  /* ---------- H2 -- 36px / 44px ---------- */
  --font-size-h2: 2.25rem;
  --line-height-h2: 2.75rem;
  --font-weight-h2: var(--font-weight-bold);
  --letter-spacing-h2: -0.015em;
  --font-family-h2: var(--font-heading);
 
  /* ---------- H3 -- 30px / 38px ---------- */
  --font-size-h3: 1.875rem;
  --line-height-h3: 2.375rem;
  --font-weight-h3: var(--font-weight-semibold);
  --letter-spacing-h3: -0.01em;
  --font-family-h3: var(--font-heading);
 
  /* ---------- H4 -- 24px / 32px ---------- */
  --font-size-h4: 1.5rem;
  --line-height-h4: 2rem;
  --font-weight-h4: var(--font-weight-semibold);
  --letter-spacing-h4: -0.005em;
  --font-family-h4: var(--font-heading);
 
  /* ---------- H5 -- 20px / 30px ---------- */
  --font-size-h5: 1.25rem;
  --line-height-h5: 1.875rem;
  --font-weight-h5: var(--font-weight-semibold);
  --letter-spacing-h5: 0em;
  --font-family-h5: var(--font-heading);
 
  /* ---------- H6 -- 18px / 28px ---------- */
  --font-size-h6: 1.125rem;
  --line-height-h6: 1.75rem;
  --font-weight-h6: var(--font-weight-semibold);
  --letter-spacing-h6: 0em;
  --font-family-h6: var(--font-heading);
 
  /* ---------- Body -- 16px / 26px ---------- */
  --font-size-body: 1rem;
  --line-height-body: 1.625rem;
  --font-weight-body: var(--font-weight-regular);
  --letter-spacing-body: 0em;
  --font-family-body: var(--font-body);
 
  /* ---------- Small -- 14px / 20px ---------- */
  --font-size-small: 0.875rem;
  --line-height-small: 1.25rem;
  --font-weight-small: var(--font-weight-regular);
  --letter-spacing-small: 0em;
  --font-family-small: var(--font-body);
 
  /* ---------- Caption -- 12px / 16px ---------- */
  --font-size-caption: 0.75rem;
  --line-height-caption: 1rem;
  --font-weight-caption: var(--font-weight-medium);
  --letter-spacing-caption: 0.01em;
  --font-family-caption: var(--font-body);
 
}
 
/* =====================================================================
   Optional: element mapping
   Applies the tokens above directly to semantic HTML elements.
   Safe to delete if you're applying these as utility classes instead.
   ===================================================================== */
 
h1 { font-family: var(--font-family-h1); font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-h1); letter-spacing: var(--letter-spacing-h1); }
h2 { font-family: var(--font-family-h2); font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-h2); letter-spacing: var(--letter-spacing-h2); }
h3 { font-family: var(--font-family-h3); font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-h3); letter-spacing: var(--letter-spacing-h3); }
h4 { font-family: var(--font-family-h4); font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); letter-spacing: var(--letter-spacing-h4); }
h5 { font-family: var(--font-family-h5); font-size: var(--font-size-h5); line-height: var(--line-height-h5); font-weight: var(--font-weight-h5); letter-spacing: var(--letter-spacing-h5); }
h6 { font-family: var(--font-family-h6); font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-h6); letter-spacing: var(--letter-spacing-h6); }
 
body { font-family: var(--font-family-body); font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: var(--font-weight-body); letter-spacing: var(--letter-spacing-body); }
 
.text-small { font-family: var(--font-family-small); font-size: var(--font-size-small); line-height: var(--line-height-small); font-weight: var(--font-weight-small); letter-spacing: var(--letter-spacing-small); }
.text-caption { font-family: var(--font-family-caption); font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-caption); letter-spacing: var(--letter-spacing-caption); }
 
/* =====================================================================
   Desek Bootstrap 5.3 Theme Override
   Load order in <head>:
     1. Bootstrap 5.3+ CDN CSS
     2. Desek_color_system.css
     3. Desek_type_scale.css
     4. This file (desek-bootstrap-theme.css)
 
   Scope of this file: retheme's Bootstrap's button and typography
   components to use Desek's tokens, via Bootstrap 5.3's documented
   CSS-variable override pattern -- no Sass recompile needed.
 
   IMPORTANT: Bootstrap's precompiled .btn-primary does NOT read the
   global --bs-primary variable at runtime -- its colors are baked in
   as component-scoped variables (--bs-btn-bg, --bs-btn-hover-bg, etc.)
   at build time. Retheming means overriding those scoped variables
   directly on the .btn-primary / .btn-outline-secondary selectors,
   which is exactly what this file does.
   ===================================================================== */
 
/* ---------- Global tokens (DO cascade live -- safe to set once) ---------- */
 
:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-primary: var(--color-primary-400);
  --bs-primary-rgb: 251, 185, 66;
  --bs-secondary: var(--color-secondary-500);
  --bs-secondary-rgb: 81, 141, 184;
  --bs-success: var(--color-success-500);
  --bs-success-rgb: 65, 200, 137;
  --bs-warning: var(--color-warning-500);
  --bs-warning-rgb: 240, 122, 25;
  --bs-danger: var(--color-error-500);
  --bs-danger-rgb: 216, 49, 55;
 
  /* These four DO cascade live into form controls -- Bootstrap's Sass
     defines $input-bg / $input-color / $input-border-color / $input-disabled-bg
     as var(--bs-body-bg) / var(--bs-body-color) / var(--bs-border-color) /
     var(--bs-secondary-bg) respectively, so the compiled .form-control
     rule reads var(--bs-body-bg) etc. directly rather than a baked hex.
     Setting these here retheme's form fields without touching .form-control
     itself. They also drive <body>'s own background/text color. */
  --bs-body-bg: var(--color-bg-light);
  --bs-body-color: var(--color-text-primary-on-light);
  --bs-border-color: var(--color-border-light);
  --bs-secondary-bg: var(--color-neutral-100);
  --bs-secondary-color: var(--color-text-secondary-on-light);
}
 
[data-bs-theme="dark"] {
  --bs-body-bg: var(--color-bg-dark);
  --bs-body-color: var(--color-text-primary-on-dark);
  --bs-border-color: var(--color-border-dark);
  --bs-secondary-bg: var(--color-neutral-800);
  --bs-secondary-color: var(--color-text-secondary-on-dark);
  --bs-primary: var(--color-primary-400);
  --bs-primary-rgb: 251, 185, 66;
}
 
/* Headings: Bootstrap has no separate heading-font variable in the
   precompiled build -- h1-h6 inherit --bs-body-font-family by default.
   Set them explicitly to get Space Grotesk on headings, Inter on body. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
}
h1, .h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-h1); letter-spacing: var(--letter-spacing-h1); }
h2, .h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-h2); letter-spacing: var(--letter-spacing-h2); }
h3, .h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-h3); letter-spacing: var(--letter-spacing-h3); }
h4, .h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-h4); letter-spacing: var(--letter-spacing-h4); }
h5, .h5 { font-size: var(--font-size-h5); line-height: var(--line-height-h5); font-weight: var(--font-weight-h5); letter-spacing: var(--letter-spacing-h5); }
h6, .h6 { font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-h6); letter-spacing: var(--letter-spacing-h6); }
 
/* =====================================================================
   .btn-primary -- retheme Bootstrap's own class (safe: same name,
   same purpose -- filled, brand-color, highest-emphasis button)
   ===================================================================== */
 
.btn-primary {
  --bs-btn-color: var(--color-primary-on-primary);
  --bs-btn-bg: var(--color-primary-400);
  --bs-btn-border-color: var(--color-primary-400);
  --bs-btn-hover-color: var(--color-primary-on-primary);
  --bs-btn-hover-bg: var(--color-primary-500);
  --bs-btn-hover-border-color: var(--color-primary-500);
  --bs-btn-focus-shadow-rgb: 251, 185, 66;
  --bs-btn-active-color: var(--color-primary-on-primary);
  --bs-btn-active-bg: var(--color-primary-600);
  --bs-btn-active-border-color: var(--color-primary-600);
  --bs-btn-disabled-color: var(--color-neutral-400);
  --bs-btn-disabled-bg: var(--color-neutral-200);
  --bs-btn-disabled-border-color: var(--color-neutral-200);
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-font-weight: var(--font-weight-medium);
}
 
/* =====================================================================
   .btn-outline-secondary -- NOT Bootstrap's filled .btn-secondary.
   Desek's "secondary" is an outlined steel-blue button, which is
   Bootstrap's .btn-outline-* pattern, not .btn-secondary's pattern.
   Retheming .btn-secondary itself would mean making it FILLED
   steel-blue, which breaks the outlined design from the component
   spec -- .btn-outline-secondary is the faithful mapping.
   ===================================================================== */
 
.btn-outline-secondary {
  --bs-btn-color: var(--color-secondary-text-on-light);
  --bs-btn-border-color: var(--color-secondary-500);
  --bs-btn-hover-color: var(--color-secondary-text-on-light);
  --bs-btn-hover-bg: var(--color-secondary-50);
  --bs-btn-hover-border-color: var(--color-secondary-600);
  --bs-btn-focus-shadow-rgb: 81, 141, 184;
  --bs-btn-active-color: var(--color-secondary-text-on-light);
  --bs-btn-active-bg: var(--color-secondary-100);
  --bs-btn-active-border-color: var(--color-secondary-600);
  --bs-btn-disabled-color: var(--color-neutral-400);
  --bs-btn-disabled-border-color: var(--color-neutral-200);
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-font-weight: var(--font-weight-medium);
}
 
/* Dark-surface variant: Bootstrap's [data-bs-theme="dark"] attribute
   means this works automatically wherever the attribute is set --
   no manual .on-dark modifier class needed, unlike the standalone
   component spec. This is a genuine improvement Bootstrap gives you. */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--color-secondary-text-on-dark);
  --bs-btn-border-color: var(--color-secondary-500);
  --bs-btn-hover-color: var(--color-secondary-text-on-dark);
  --bs-btn-hover-bg: var(--color-secondary-950);
  --bs-btn-hover-border-color: var(--color-secondary-400);
  --bs-btn-active-bg: var(--color-secondary-900);
  --bs-btn-disabled-color: var(--color-neutral-500);
  --bs-btn-disabled-border-color: var(--color-neutral-700);
}
 
/* =====================================================================
   .btn-ghost -- no Bootstrap equivalent exists (.btn-link is styled
   as a hyperlink, not a low-emphasis button), so this is a genuine
   addition rather than an override. No collision risk: Bootstrap
   does not define this class name. Copied as-is from the component
   spec, including the loading state.
   ===================================================================== */
 
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-primary-on-light);
  border-radius: var(--bs-border-radius);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  transition: background-color 150ms ease, color 150ms ease;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-neutral-100); }
.btn-ghost:active:not(:disabled) { background: var(--color-neutral-200); }
.btn-ghost:disabled { color: var(--color-neutral-400); cursor: not-allowed; pointer-events: none; }
 
[data-bs-theme="dark"] .btn-ghost {
  color: var(--color-text-primary-on-dark);
}
[data-bs-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--color-neutral-800); }
[data-bs-theme="dark"] .btn-ghost:active:not(:disabled) { background: var(--color-neutral-700); }
[data-bs-theme="dark"] .btn-ghost:disabled { color: var(--color-neutral-600); }
 
/* =====================================================================
   Loading state -- works on .btn-primary, .btn-outline-secondary, and
   .btn-ghost identically, same markup/behavior as the component spec.
   Note: Bootstrap ships its own .spinner-border component, which is a
   reasonable substitute for the custom .btn-spinner below if you'd
   rather stay fully native -- both use currentColor-friendly patterns.
   ===================================================================== */
 
.btn.is-loading { position: relative; pointer-events: none; cursor: default; }
.btn.is-loading .btn-label { opacity: 0; }
.btn-spinner { display: none; }
.btn.is-loading .btn-spinner {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem; height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
 
/* =====================================================================
   Forms
   Unlike buttons and navbar, Bootstrap's form controls don't have their
   own --bs-form-control-* variable namespace in 5.3 -- .form-control's
   background/text/border already retheme automatically from the root
   --bs-body-bg / --bs-body-color / --bs-border-color / --bs-secondary-bg
   tokens set above (verified against Bootstrap's Sass source: $input-bg
   etc. are defined as var(--bs-body-bg) etc., not hardcoded hex).
 
   Focus and checked states are NOT confirmed to inherit from a live
   root variable in the same way, so those are overridden directly and
   explicitly below rather than assumed -- correctness over cleverness.
   ===================================================================== */
 
.form-control:focus,
.form-select:focus {
  border-color: var(--color-secondary-500);
  box-shadow: 0 0 0 0.25rem rgba(81, 141, 184, 0.25);
}
 
.form-check-input:checked {
  background-color: var(--color-primary-400);
  border-color: var(--color-primary-400);
}
 
.form-check-input:focus {
  border-color: var(--color-secondary-500);
  box-shadow: 0 0 0 0.25rem rgba(81, 141, 184, 0.25);
}
 
.form-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary-on-light);
}
[data-bs-theme="dark"] .form-label {
  color: var(--color-text-primary-on-dark);
}
 
/* Validation states reuse --bs-success-rgb / --bs-danger-rgb set at
   root, so .is-valid / .is-invalid, .valid-feedback / .invalid-feedback
   already pick up Desek's success/error colors with no further changes
   needed here. */
 
/* =====================================================================
   Navbar
   Confirmed against Bootstrap's actual navbar.scss: theming is via
   real --bs-navbar-* variables scoped to .navbar (since 5.2), plus
   --bs-nav-link-* on .navbar-nav. Dark variant is set with
   data-bs-theme="dark" placed directly on the .navbar element itself --
   it does not require the page-level dark theme, so a dark navbar can
   sit inside an otherwise light page.
 
   One exception: --bs-navbar-toggler-icon-bg is a full inline SVG data
   URI with the stroke color baked in at Bootstrap's own build time, not
   a plain color value -- it has to be replaced with a new data URI
   rather than recolored via a simple variable.
   ===================================================================== */
 
.navbar {
  --bs-navbar-color: var(--color-text-secondary-on-light);
  --bs-navbar-hover-color: var(--color-text-primary-on-light);
  --bs-navbar-active-color: var(--color-primary-text-on-light);
  --bs-navbar-disabled-color: var(--color-neutral-400);
  --bs-navbar-brand-color: var(--color-text-primary-on-light);
  --bs-navbar-brand-hover-color: var(--color-text-primary-on-light);
  --bs-navbar-toggler-border-color: var(--color-border-light);
  --bs-navbar-toggler-border-radius: 0.375rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a1a1a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
 
.navbar[data-bs-theme="dark"] {
  --bs-navbar-color: var(--color-text-secondary-on-dark);
  --bs-navbar-hover-color: var(--color-text-primary-on-dark);
  --bs-navbar-active-color: var(--color-primary-text-on-dark);
  --bs-navbar-disabled-color: var(--color-neutral-600);
  --bs-navbar-brand-color: var(--color-text-primary-on-dark);
  --bs-navbar-brand-hover-color: var(--color-text-primary-on-dark);
  --bs-navbar-toggler-border-color: var(--color-border-dark);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f5f5f0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
 
/* .navbar-brand has no font-family variable in Bootstrap's own scoped
   set -- set explicitly to get Space Grotesk. Skip this rule if your
   navbar brand is the Desek SVG logo mark rather than text. */
.navbar-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}
 
 
 
/* ===== Coming soon page-specific styles ===== */
 
html, body { height: 100%; }
body {
  background: var(--color-bg-light);
  color: var(--color-text-primary-on-light);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
.skip-link {
  position: absolute; top: -48px; left: 1rem;
  background: var(--color-primary-400); color: var(--color-primary-on-primary);
  padding: 0.75rem 1.25rem; border-radius: 0 0 0.5rem 0.5rem;
  z-index: 2000; font-weight: var(--font-weight-medium);
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; color: var(--color-primary-on-primary); }
 
.cs-header { padding: 1.75rem 0; }
.cs-header .brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--color-text-primary-on-light); }
.cs-header .brand span { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); font-size: 1.125rem; }
.desek-mark path { fill: var(--color-primary-400); }
.desek-mark-fade path { fill: url(#heroFadeGrad); }
 
.cs-main { flex: 1; display: flex; align-items: center; }
.cs-content { padding: 2.5rem 0 3.5rem; text-align: center; }
 
.cs-graphic-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; margin: 0 auto 1.5rem; max-width: 380px; }
.orbit-dot { transform-origin: 210px 210px; animation: orbit 34s linear infinite; }
.orbit-dot.reverse { animation-direction: reverse; animation-duration: 46s; }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit-dot { animation: none; } }
 
.cs-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-text-on-light);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.25rem;
}
 
.cs-content h1 { font-size: clamp(2rem, 5vw, var(--font-size-h1)); }
.cs-content .lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary-on-light);
  max-width: 46ch;
  margin: 1rem auto 2rem;
}
 
.notify-form { max-width: 420px; margin: 0 auto; }
.notify-form .input-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.notify-form input[type="email"] {
  flex: 1 1 220px;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  border: 1.5px solid var(--color-border-light);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text-primary-on-light);
  background: #fff;
}
.notify-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-secondary-500);
  box-shadow: 0 0 0 0.25rem rgba(81, 141, 184, 0.25);
}
.notify-form .privacy-note {
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  color: var(--color-neutral-500);
  margin-top: 0.9rem;
}
 
.cs-footer { padding: 2rem 0; border-top: 1px solid var(--color-border-light); }
.cs-footer .footer-row {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-family: var(--font-body); font-size: var(--font-size-caption); color: var(--color-neutral-500);
}
.cs-footer a { color: var(--color-neutral-500); text-decoration: none; }
.cs-footer a:hover { color: var(--color-text-primary-on-light); text-decoration: underline; }
.cs-footer .footer-links { display: flex; gap: 1.25rem; }