/* ==========================================================================
   TrustedCloudShop — Design Tokens
   Direction: "Cloud Command Center"

   A midnight-navy console rather than a storefront. Depth comes from five
   stacked surface levels, not from borders alone. Electric violet is the
   single interactive colour — CTAs, selection, focus, active nav — and a
   controlled magenta is reserved almost entirely for price. Cyan appears
   only as a status tint. Deliberately no mint and no amber anywhere.
   ========================================================================== */

:root {
  /* --- Surface stack -----------------------------------------------------
     Each level is a real step, so panels read as stacked hardware rather
     than as outlined boxes. */
  --tcs-void:        #06070F;  /* page ground                              */
  --tcs-navy:        #0A0C18;  /* bands, footer top                        */
  --tcs-surface:     #10132A;  /* elevated panel                           */
  --tcs-surface-2:   #161A3A;  /* secondary panel, table heads             */
  --tcs-surface-3:   #1D2350;  /* active / selected                        */
  --tcs-line:        #242A54;  /* hairline                                 */
  --tcs-line-strong: #38407E;  /* emphasis hairline                        */

  /* --- Accents -----------------------------------------------------------
     Violet is the only thing the user can click that changes state.       */
  --tcs-violet:        #7C5CFF;
  --tcs-violet-bright: #9F86FF;
  --tcs-violet-deep:   #4C31C7;
  --tcs-violet-ink:    #0A0620;  /* text on a violet fill                  */

  /* Scarce. Price, and the occasional live indicator. */
  --tcs-magenta:       #FF4D9D;
  --tcs-magenta-soft:  #FF7FB8;

  /* Status tint only — never a brand colour. */
  --tcs-cyan:          #2DD4E8;

  /* --- Text --------------------------------------------------------------
     Contrast on --tcs-void: ink 16.4:1, body 9.2:1, muted 4.9:1.          */
  --tcs-ink:       #EDEFFF;
  --tcs-ink-body:  #B6BBE4;
  --tcs-ink-muted: #7C83B8;
  --tcs-ink-faint: #545A8A;

  --tcs-ok:   #3ED598;
  --tcs-warn: #FFB443;
  --tcs-err:  #FF5C7A;

  /* --- Gradients ---------------------------------------------------------- */
  --tcs-grad-violet: linear-gradient(135deg, #7C5CFF 0%, #B14BFF 100%);
  --tcs-grad-dusk:   linear-gradient(135deg, #7C5CFF 0%, #FF4D9D 100%);
  --tcs-grad-edge:   linear-gradient(90deg, transparent, var(--tcs-line-strong) 18%, var(--tcs-violet) 50%, var(--tcs-line-strong) 82%, transparent);
  --tcs-grad-halo:   radial-gradient(60% 55% at 50% 0%, rgba(124, 92, 255, .22) 0%, rgba(6, 7, 15, 0) 70%);

  /* --- Typography ---------------------------------------------------------
     Space Grotesk sets a technical, slightly engineered headline voice;
     IBM Plex Sans keeps long-form product copy comfortable; IBM Plex Mono
     carries labels, counts and prices so data reads as data. */
  --tcs-font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --tcs-font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tcs-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A tighter, more deliberate scale than a generic template ramp. */
  --tcs-fs-2xs:  .75rem;
  --tcs-fs-xs:   .8125rem;
  --tcs-fs-sm:   .9375rem;
  --tcs-fs-base: 1.0625rem;
  --tcs-fs-lg:   clamp(1.125rem, .35vw + 1.05rem, 1.25rem);
  --tcs-fs-xl:   clamp(1.375rem, .9vw + 1.1rem,  1.75rem);
  --tcs-fs-2xl:  clamp(1.75rem, 1.7vw + 1.2rem,  2.5rem);
  --tcs-fs-3xl:  clamp(2.25rem, 3.2vw + 1.2rem,  3.5rem);
  --tcs-fs-4xl:  clamp(2.75rem, 5.4vw + 1rem,    5rem);

  --tcs-lh-tight: 1.06;
  --tcs-lh-snug:  1.3;
  --tcs-lh-body:  1.72;

  --tcs-track-label: .18em;   /* uppercase mono labels                     */
  --tcs-track-tight: -.025em; /* display headlines                         */

  /* --- Space (8px rhythm) -------------------------------------------------- */
  --tcs-1: .25rem;  --tcs-2: .5rem;   --tcs-3: .75rem;  --tcs-4: 1rem;
  --tcs-5: 1.5rem;  --tcs-6: 2rem;    --tcs-7: 2.75rem; --tcs-8: 3.5rem;
  --tcs-9: 4.5rem;  --tcs-10: 6rem;   --tcs-11: 7.5rem; --tcs-12: 9.5rem;

  /* --- Radii ---------------------------------------------------------------
     Much squarer than before: panels are 4px, only pills stay round. */
  --tcs-r-xs: 2px;  --tcs-r-sm: 4px;  --tcs-r-md: 6px;
  --tcs-r-lg: 10px; --tcs-r-pill: 999px;

  --tcs-shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset;
  --tcs-shadow-2: 0 18px 40px -24px rgba(0, 0, 0, .9);
  --tcs-shadow-3: 0 34px 80px -30px rgba(0, 0, 0, .95);
  --tcs-glow:     0 0 0 1px rgba(124, 92, 255, .5), 0 12px 36px -14px rgba(124, 92, 255, .55);

  /* --- Motion --------------------------------------------------------------
     Slower and more linear than a bouncy template; things slide and fade
     rather than pop. */
  --tcs-ease:     cubic-bezier(.22, .61, .36, 1);
  --tcs-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tcs-dur-fast: 160ms;
  --tcs-dur:      280ms;
  --tcs-dur-slow: 520ms;

  /* --- Layout --------------------------------------------------------------- */
  --tcs-container: 1320px;
  --tcs-gutter: clamp(1rem, 3.5vw, 3rem);
  --tcs-utility-h: 34px;
  --tcs-header-h: 72px;
  --tcs-z-header: 100;
  --tcs-z-mega: 110;
  --tcs-z-drawer: 120;
  --tcs-z-float: 90;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tcs-dur-fast: 1ms; --tcs-dur: 1ms; --tcs-dur-slow: 1ms; }
}