/* =====================================================================
   ViccoFitness — Design tokens ("Kinetic Lab")
   ---------------------------------------------------------------------
   A single source of truth for the brand: a confident dark-ink + volt
   identity that reads as trustworthy (it handles health data) yet
   energetic (it is a fitness product). Everything downstream — app
   shell, marketing landing, components — consumes these custom
   properties so the look stays cohesive and is themeable in one place.

   Distinctive, NOT a generic AI template: a deep slate canvas, a
   high-voltage lime signal colour, a warm ember secondary, an off-grid
   editorial rhythm, and bespoke motion tokens. No purple-on-white.
   ===================================================================== */

:root {
  /* --- Brand core ---------------------------------------------------- */
  --vf-ink:        #0d1320;   /* deepest canvas (dark surfaces, footer) */
  --vf-ink-2:      #121a2b;   /* raised dark surface                    */
  --vf-ink-3:      #1b2740;   /* hairlines / borders on dark            */

  --vf-volt:       #c4f23a;   /* signal accent — energy, CTAs, focus    */
  --vf-volt-deep:  #a4d121;   /* volt pressed / on light                */
  --vf-ember:      #ff6a3d;   /* warm secondary — highlights, alerts    */
  --vf-ember-deep: #e8431a;

  --vf-teal:       #2dd4bf;   /* tertiary data colour (charts/chips)    */
  --vf-violet:     #7c6cff;   /* quaternary data colour                 */

  /* --- Neutrals (light app surfaces) -------------------------------- */
  --vf-paper:      #f6f7f4;   /* app background — faint warm off-white  */
  --vf-surface:    #ffffff;   /* cards                                  */
  --vf-surface-2:  #eef0ea;   /* sunken wells / table stripes           */
  --vf-line:       #dde1d8;   /* borders on light                       */
  --vf-line-soft:  #e8ebe3;

  --vf-text:       #15202e;   /* primary text on light                  */
  --vf-text-2:     #4a5666;   /* secondary text                         */
  --vf-text-3:     #7a8696;   /* muted / hints                          */
  --vf-on-dark:    #eef2ec;   /* primary text on ink                    */
  --vf-on-dark-2:  #9fb0a6;   /* secondary on ink                       */
  --vf-on-volt:    #1a2300;   /* text on the volt accent (AA)           */

  /* --- Semantic ----------------------------------------------------- */
  --vf-success:    #2f9e6b;
  --vf-warning:    #d98a0b;
  --vf-danger:     #d23b46;
  --vf-info:       #2b74c7;

  /* --- Typography --------------------------------------------------- */
  --vf-font-display: "Bricolage Grotesque", "PingFang SC",
                     "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --vf-font-body:    "Hanken Grotesk", "PingFang SC", "Microsoft YaHei",
                     "Hiragino Sans GB", system-ui, sans-serif;
  --vf-font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Code",
                     Menlo, Consolas, monospace;

  /* Fluid type scale (clamp = mobile-first, scales to desktop) */
  --vf-fs-xs:   0.75rem;
  --vf-fs-sm:   0.875rem;
  --vf-fs-base: 1rem;
  --vf-fs-md:   1.125rem;
  --vf-fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --vf-fs-xl:   clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
  --vf-fs-2xl:  clamp(2.1rem, 1.5rem + 3vw, 3.5rem);
  --vf-fs-3xl:  clamp(2.8rem, 1.6rem + 5.5vw, 5.5rem);

  --vf-lh-tight: 1.05;
  --vf-lh-snug:  1.25;
  --vf-lh-body:  1.6;

  --vf-tracking-tight: -0.02em;
  --vf-tracking-wide:  0.12em;

  /* --- Spacing (4px base rhythm) ------------------------------------ */
  --vf-1:  0.25rem;
  --vf-2:  0.5rem;
  --vf-3:  0.75rem;
  --vf-4:  1rem;
  --vf-5:  1.5rem;
  --vf-6:  2rem;
  --vf-7:  3rem;
  --vf-8:  4rem;
  --vf-9:  6rem;

  --vf-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --vf-maxw:   1180px;

  /* --- Radius ------------------------------------------------------- */
  --vf-r-sm:  6px;
  --vf-r-md:  12px;
  --vf-r-lg:  20px;
  --vf-r-xl:  28px;
  --vf-r-pill: 999px;

  /* --- Shadows (cool-tinted, layered for real depth) ---------------- */
  --vf-shadow-sm: 0 1px 2px rgba(13, 19, 32, 0.06),
                  0 2px 6px rgba(13, 19, 32, 0.05);
  --vf-shadow-md: 0 4px 10px rgba(13, 19, 32, 0.07),
                  0 12px 28px rgba(13, 19, 32, 0.08);
  --vf-shadow-lg: 0 10px 24px rgba(13, 19, 32, 0.10),
                  0 30px 60px rgba(13, 19, 32, 0.12);
  --vf-shadow-volt: 0 8px 24px rgba(164, 209, 33, 0.35);
  --vf-ring: 0 0 0 3px rgba(196, 242, 58, 0.55); /* focus ring */

  /* --- Motion ------------------------------------------------------- */
  --vf-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --vf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vf-dur-fast: 140ms;
  --vf-dur:      260ms;
  --vf-dur-slow: 520ms;

  color-scheme: light;
}

/* Honour the system "reduce motion" preference everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}