@charset "UTF-8";
/* ==========================================================================
   VODISOFT — design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, space, shape and motion.
   Loaded by BOTH the public site (vodisoft.css) and the admin panel
   (panel/css/admin-style.css) so the two surfaces cannot drift apart.

   DARK IS THE DEFAULT — this keeps the deep navy / indigo / violet identity
   the site has always had. Light is available as an opt-in via the toggle or
   an explicit OS preference, but the brand is a dark brand.

   Hues are the original ones (#5B6EF8 indigo, #8B5CF6 violet, #06D6A0 mint,
   #22D3EE cyan on a #07101F navy). What changed is discipline: every text
   colour now clears WCAG AA, and each token has exactly one job.
   ========================================================================== */

:root {
  /* -- Brand ramp (indigo) ------------------------------------------------ */
  --indigo-300: #A6B2FF;
  --indigo-400: #7B8EFA;   /* original --primary-light */
  --indigo-500: #5B6EF8;   /* original --primary        */
  --indigo-600: #4455E8;   /* original --primary-dark   */
  --indigo-700: #3542C4;

  /* -- Violet ------------------------------------------------------------- */
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;   /* original --secondary */
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;

  /* -- Support ------------------------------------------------------------ */
  --mint-400:  #34E4B0;
  --mint-500:  #06D6A0;    /* original --accent */
  --mint-600:  #059C76;
  --cyan-400:  #4BDDF4;
  --cyan-500:  #22D3EE;    /* original --cyan   */
  --cyan-600:  #0E9BB4;

  /* -- Navy neutrals ------------------------------------------------------ */
  --navy-950: #050B17;
  --navy-900: #07101F;     /* original --bg-base     */
  --navy-850: #0A1424;
  --navy-800: #0C1628;     /* original --bg-surface  */
  --navy-700: #101E34;     /* original --bg-elevated */
  --navy-600: #16294420;

  /* -- Slate text --------------------------------------------------------- */
  --slate-100: #E9EEF8;
  --slate-200: #E2E8F0;    /* original --text-primary   */
  --slate-300: #C3CDE0;
  --slate-400: #9AA8C0;    /* original --text-secondary, nudged for AA */
  --slate-500: #7C8AA3;    /* replaces #64748B, which failed AA at 4.0:1 */
  --slate-600: #5A6880;

  /* -- Semantic: DARK (default) ------------------------------------------ */
  --bg:            var(--navy-900);
  --bg-alt:        var(--navy-800);
  --bg-sunken:     var(--navy-950);
  --surface:       #0E1B30;
  --surface-hover: #142440;
  --surface-inset: var(--navy-850);

  --text:        var(--slate-200);
  --text-soft:   var(--slate-300);
  --text-muted:  var(--slate-400);
  --text-faint:  var(--slate-500);
  --text-on-brand: #FFFFFF;

  --line:        rgba(226, 232, 240, 0.10);
  --line-soft:   rgba(226, 232, 240, 0.06);
  --line-strong: rgba(226, 232, 240, 0.20);

  --brand:       var(--indigo-600);   /* white-on-brand clears AA at 5.6:1 */
  --brand-hover: var(--indigo-500);
  --brand-ink:   var(--indigo-400);   /* indigo that is safe as text on navy */
  --brand-wash:  rgba(91, 110, 248, 0.14);
  --brand-edge:  rgba(91, 110, 248, 0.38);

  --accent:      var(--cyan-500);
  --accent-ink:  var(--cyan-400);
  --accent-wash: rgba(34, 211, 238, 0.12);
  --accent-edge: rgba(34, 211, 238, 0.30);

  --ok:      var(--mint-400);  --ok-wash:     rgba(52, 228, 176, 0.12);
  --warn:    #F5B851;          --warn-wash:   rgba(245, 184, 81, 0.12);
  --danger:  #FF8492;          --danger-wash: rgba(255, 132, 146, 0.12);

  /* -- Signature gradients (the original brand move) ---------------------- */
  /* --grad-brand carries white text (buttons, active pills), so it stays deep
     enough to clear AA. --grad-rail is decorative only and can run bright. */
  --grad-brand:  linear-gradient(135deg, var(--indigo-600) 0%, var(--violet-600) 100%);
  --grad-hover:  linear-gradient(135deg, var(--indigo-700) 0%, var(--violet-700) 100%);
  --grad-accent: linear-gradient(135deg, var(--indigo-500) 0%, var(--cyan-500) 100%);
  --grad-rail:   linear-gradient(90deg, var(--indigo-500), var(--violet-500), var(--cyan-500));

  /* Ambient light behind the hero — the depth the old theme got from orbs,
     without the animated blur that cost paint time. */
  --glow-a: rgba(91, 110, 248, 0.16);
  --glow-b: rgba(139, 92, 246, 0.12);

  /* -- Elevation ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-3: 0 14px 36px rgba(0, 0, 0, .55);
  --shadow-4: 0 28px 68px rgba(0, 0, 0, .62);
  --shadow-brand: 0 8px 28px rgba(91, 110, 248, 0.35);
  --shadow-glow:  0 0 0 1px rgba(91, 110, 248, 0.25), 0 12px 40px rgba(91, 110, 248, 0.18);

  /* Translucent chrome, declared per theme. Deriving it with
     color-mix(var(--bg)…) failed to re-resolve on a runtime theme switch. */
  --chrome:       rgba(7, 16, 31, 0.82);
  --chrome-solid: rgba(7, 16, 31, 0.94);

  /* -- Type --------------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1rem;
  --t-lg:   clamp(1.0625rem, 0.99rem + 0.35vw, 1.1875rem);
  --t-xl:   clamp(1.25rem,  1.16rem + 0.42vw, 1.4375rem);
  --t-2xl:  clamp(1.5rem,   1.34rem + 0.75vw, 1.875rem);
  --t-3xl:  clamp(1.875rem, 1.60rem + 1.30vw, 2.625rem);
  --t-4xl:  clamp(2.25rem,  1.79rem + 2.20vw, 3.5rem);
  --t-5xl:  clamp(2.625rem, 1.90rem + 3.40vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug:  1.22;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.025em;
  --tracking-flat:   0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.11em;

  /* -- Space -------------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem);
  --gutter:    clamp(1.125rem, 0.7rem + 1.6vw, 2rem);
  --measure:   68ch;

  /* -- Shape -------------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px;
  --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* -- Motion ------------------------------------------------------------- */
  --ease:     cubic-bezier(.2, .6, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 340ms;
  --dur-4: 620ms;

  --nav-h: 68px;
  --z-nav: 100;
  --z-float: 90;
  --z-skip: 200;

  color-scheme: dark;
}


/* -- Light theme (opt-in) --------------------------------------------------
   Applied only when the visitor explicitly picks light, or when the OS asks
   for light and the visitor has not chosen dark.
   ------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:            #F7F9FD;
    --bg-alt:        #EEF2F9;
    --bg-sunken:     #E4EAF5;
    --surface:       #FFFFFF;
    --surface-hover: #FAFBFE;
    --surface-inset: #F2F5FB;

    --text:        #0B1428;
    --text-soft:   #33405C;
    --text-muted:  #4E5B78;
    --text-faint:  #616E8A;
    --text-on-brand: #FFFFFF;

    --line:        #D8DFEC;
    --line-soft:   #E7ECF5;
    --line-strong: #B9C3D8;

    --brand:       var(--indigo-600);
    --brand-hover: var(--indigo-700);
    --brand-ink:   var(--indigo-700);
    --brand-wash:  rgba(91, 110, 248, 0.09);
    --brand-edge:  rgba(91, 110, 248, 0.28);

    --accent:      var(--cyan-600);
    --accent-ink:  #0A6C7E;
    --accent-wash: rgba(34, 211, 238, 0.10);
    --accent-edge: rgba(14, 155, 180, 0.28);

    --ok:      #0B7A52;  --ok-wash:     rgba(6, 214, 160, 0.10);
    --warn:    #96610A;  --warn-wash:   rgba(245, 184, 81, 0.14);
    --danger:  #C32B3C;  --danger-wash: rgba(255, 132, 146, 0.14);

    --glow-a: rgba(91, 110, 248, 0.10);
    --glow-b: rgba(139, 92, 246, 0.08);

    --shadow-1: 0 1px 2px rgba(11, 20, 40, .06);
    --shadow-2: 0 4px 14px rgba(11, 20, 40, .08);
    --shadow-3: 0 14px 36px rgba(11, 20, 40, .10);
    --shadow-4: 0 28px 68px rgba(11, 20, 40, .14);
    --shadow-brand: 0 8px 24px rgba(68, 85, 232, 0.28);
    --shadow-glow:  0 0 0 1px rgba(91, 110, 248, 0.20), 0 12px 32px rgba(91, 110, 248, 0.14);

    --chrome:       rgba(255, 255, 255, 0.86);
    --chrome-solid: rgba(255, 255, 255, 0.95);

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg:            #F7F9FD;
  --bg-alt:        #EEF2F9;
  --bg-sunken:     #E4EAF5;
  --surface:       #FFFFFF;
  --surface-hover: #FAFBFE;
  --surface-inset: #F2F5FB;

  --text:        #0B1428;
  --text-soft:   #33405C;
  --text-muted:  #4E5B78;
  --text-faint:  #616E8A;
  --text-on-brand: #FFFFFF;

  --line:        #D8DFEC;
  --line-soft:   #E7ECF5;
  --line-strong: #B9C3D8;

  --brand:       var(--indigo-600);
  --brand-hover: var(--indigo-700);
  --brand-ink:   var(--indigo-700);
  --brand-wash:  rgba(91, 110, 248, 0.09);
  --brand-edge:  rgba(91, 110, 248, 0.28);

  --accent:      var(--cyan-600);
  --accent-ink:  #0A6C7E;
  --accent-wash: rgba(34, 211, 238, 0.10);
  --accent-edge: rgba(14, 155, 180, 0.28);

  --ok:      #0B7A52;  --ok-wash:     rgba(6, 214, 160, 0.10);
  --warn:    #96610A;  --warn-wash:   rgba(245, 184, 81, 0.14);
  --danger:  #C32B3C;  --danger-wash: rgba(255, 132, 146, 0.14);

  --glow-a: rgba(91, 110, 248, 0.10);
  --glow-b: rgba(139, 92, 246, 0.08);

  --shadow-1: 0 1px 2px rgba(11, 20, 40, .06);
  --shadow-2: 0 4px 14px rgba(11, 20, 40, .08);
  --shadow-3: 0 14px 36px rgba(11, 20, 40, .10);
  --shadow-4: 0 28px 68px rgba(11, 20, 40, .14);
  --shadow-brand: 0 8px 24px rgba(68, 85, 232, 0.28);
  --shadow-glow:  0 0 0 1px rgba(91, 110, 248, 0.20), 0 12px 32px rgba(91, 110, 248, 0.14);

  --chrome:       rgba(255, 255, 255, 0.86);
  --chrome-solid: rgba(255, 255, 255, 0.95);

  color-scheme: light;
}