@layer base {
  /* Keep body neutral; the app container owns theming */
  body {
    margin: 0;
    background: transparent;
    color: inherit;
    font-family: var(--v-font);
    font-size: 16px;
    font-weight: var(--v-font-weight);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  #app { min-height: 100vh; }

  /* The *themed* root paints the page */
  #app > [data-theme] {
    min-height: 100vh;
    background: var(--v-bg);
    color: var(--v-text);
  }
}

@layer tokens {
  :root {
    /* Core colors */
    --v-bg: #ffffff;

    /* A knob for “glass strength” */
    --v-glass: 14%;
    --v-glass-elev: 22%;

    /* In light theme, fog is a little black (darkens bg slightly) */
    --v-glass-fog: #aaa;

    /* Derived glass surfaces (ALWAYS based on --v-bg) */
    --v-surface: color-mix(in srgb, var(--v-bg) calc(100% - var(--v-glass)), var(--v-glass-fog) var(--v-glass));
    --v-surface-elevated: color-mix(in srgb, var(--v-bg) calc(100% - var(--v-glass-elev)), var(--v-glass-fog) var(--v-glass-elev));

    /*--v-surface: rgba(255,255,255,0.96);*/
    /*--v-surface-elevated: #ffffff;*/
    --v-text: #111111;
    --v-muted: rgba(0,0,0,.65);
    --v-border: rgba(0,0,0,0.10);

    /* Accents */
    --v-accent: #0b5fff;
    --v-danger: #d92d20;
    --v-success: #10b981;
    --v-info: #0ea5e9;

    /* Focus */
    --v-focus: rgba(11,95,255,.35);

    /* Shadows */
    --v-shadow-elev-1: 0 10px 30px rgba(0,0,0,.08);
    --v-shadow-elev-2: 0 20px 60px rgba(0,0,0,0.18);

    /* Typography baseline */
    --v-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --v-font-weight: 500;

    /* Shape / radius */
    --v-radius-sm: 10px;
    --v-radius-md: 12px;
    --v-radius-lg: 16px;

    /* Spacing (global rhythm) */
    --v-space-xs: 0.375rem;
    --v-space-sm: 0.5rem;
    --v-space-md: 0.75rem;
    --v-space-lg: 1rem;
    --v-space-xl: 1.5rem;

	/* Surface / container radius (cards, panels, modals)
   Derived from control radius, but capped so "pill" never affects cards. */
	--v-surface-radius-sm: min(var(--v-radius-sm), 12px);
	--v-surface-radius-md: min(var(--v-radius-md), 16px);
	--v-surface-radius-lg: min(var(--v-radius-lg), 18px);

    /* Subtle surface tint (inputs, segmented, chips) */
    --v-surface-2: color-mix(in srgb, var(--v-text) 3%, transparent);

    /* Motion */
    --v-ease: cubic-bezier(.2,.8,.2,1);
    --v-dur-fast: 120ms;
    --v-dur-med: 160ms;

    --v-overlay: rgba(0,0,0,0.35);

	/* Navbar defaults: same as the surface */
	--v-navbar-bg: var(--v-surface);
	--v-navbar-fg: var(--v-text);

  }

  [data-theme="light"] {
    --v-bg: #ffffff;

    /* A knob for “glass strength” */
    --v-glass: 4%;
    --v-glass-elev: 22%;

    /* In light theme, fog is a little black (darkens bg slightly) */
    --v-glass-fog: #000;

    /* Derived glass surfaces (ALWAYS based on --v-bg) */
    --v-surface: color-mix(in srgb, var(--v-bg) calc(100% - var(--v-glass)), var(--v-glass-fog) var(--v-glass));
    --v-surface-elevated: color-mix(in srgb, var(--v-bg) calc(100% - var(--v-glass-elev)), var(--v-glass-fog) var(--v-glass-elev));


    /*--v-surface: rgba(255,255,255,0.96);*/
    /*--v-surface-elevated: #ffffff;*/
    --v-text: #111111;
    --v-muted: rgba(0,0,0,.65);
    --v-border: rgba(0,0,0,0.10);

    --v-focus: rgba(11,95,255,.35);
    --v-shadow-elev-1: 0 10px 30px rgba(0,0,0,.08);
    --v-shadow-elev-2: 0 20px 60px rgba(0,0,0,0.18);

    --v-surface-2: color-mix(in srgb, var(--v-text) 3%, transparent);

    --v-overlay: rgba(0,0,0,0.35);

    --v-navbar-bg: var(--v-surface);
	 --v-navbar-fg: var(--v-text);
  }

  [data-theme="dark"] {
    --v-bg: #0b0f19;

    /* In dark theme, fog is a little white (lightens bg slightly) */
    --v-glass-fog: #fff;

    /* You can also tweak strength in dark if you want */
    --v-glass: 10%;
    --v-glass-elev: 16%;

    --v-surface: color-mix(in srgb, var(--v-bg) calc(100% - var(--v-glass)), var(--v-glass-fog) var(--v-glass));
    --v-surface-elevated: color-mix(in srgb, var(--v-bg) calc(100% - var(--v-glass-elev)), var(--v-glass-fog) var(--v-glass-elev));

    /*--v-surface: rgba(255,255,255,0.04);*/
    /*--v-surface-elevated: rgba(255,255,255,0.12);*/
    --v-text: rgba(255,255,255,0.92);
    --v-muted: rgba(255,255,255,0.62);
    --v-border: rgba(255,255,255,0.12);

    --v-focus: rgba(120,160,255,.35);
    --v-shadow-elev-1: 0 18px 50px rgba(0,0,0,.45);
    --v-shadow-elev-2: 0 30px 80px rgba(0,0,0,.55);

    --v-surface-2: color-mix(in srgb, var(--v-text) 6%, transparent);

    --v-overlay: rgba(0,0,0,0.55);

    --v-navbar-bg: var(--v-surface);
	 --v-navbar-fg: var(--v-text);
  }
}

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