/* ============================================================================
   VelvetOS — Design tokens
   Material Design 3 inspired tokens tuned to match the chromeOS / FydeOS look.
   ========================================================================== */

:root {
  /* ---------- typography ---------- */
  --font-ui: "Google Sans", "Product Sans", "Roboto", "Segoe UI Variable Text",
             "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Google Sans Display", "Google Sans", "Product Sans", "Roboto",
                  "Segoe UI", system-ui, sans-serif;
  --font-mono: "Roboto Mono", "Cascadia Mono", "JetBrains Mono", Consolas,
               "SF Mono", Menlo, monospace;

  --fs-display: 44px;
  --fs-headline: 28px;
  --fs-title-lg: 22px;
  --fs-title: 16px;
  --fs-body: 13px;
  --fs-label: 12px;
  --fs-caption: 11px;
  --fs-mono: 13px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- spacing ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---------- shape ---------- */
  --r-xs: 4px;  --r-s: 8px;  --r-m: 12px; --r-l: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---------- motion ---------- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(.05, .7, .1, 1);
  --ease-accelerate: cubic-bezier(.3, 0, .8, .15);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-xs: 90ms; --dur-s: 140ms; --dur-m: 200ms; --dur-l: 320ms; --dur-xl: 480ms;

  /* ---------- shell geometry ---------- */
  --shelf-height: 48px;
  --shelf-icon: 34px;
  /* The user's shelf-size preference scales the hit target; the glyph itself is
     kept smaller so the running indicator always has clear space below it. */
  --shelf-glyph: calc(var(--shelf-icon) * .72);
  --shelf-radius: 16px;
  --shelf-inset: 0px;
  --window-header-h: 34px;
  --window-radius: 12px;

  /* ---------- z-index scale ---------- */
  --z-wallpaper: 0;
  --z-desktop: 10;
  --z-windows: 100;
  --z-shelf: 900;
  --z-overview: 1000;
  --z-launcher: 1100;
  --z-popover: 1200;
  --z-dialog: 1300;
  --z-toast: 1400;
  --z-osd: 1500;
  --z-session: 1600;
  --z-tint: 1700;

  /* ---------- accent (overwritten by settings) ---------- */
  --accent: #1a73e8;
}

/* ============================== LIGHT THEME ============================== */
[data-theme="light"] {
  color-scheme: light;

  --primary: var(--accent);
  --on-primary: #ffffff;
  --primary-container: #e8f0fe;
  --on-primary-container: #174ea6;
  --primary-hover: rgba(26, 115, 232, .08);
  --primary-press: rgba(26, 115, 232, .14);

  --surface: #ffffff;
  --surface-1: #f8f9fa;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --surface-4: #dadce0;
  --surface-inverse: #202124;
  --on-surface: #202124;
  --on-surface-2: #3c4043;
  --on-surface-3: #5f6368;
  --on-surface-4: #80868b;
  --outline: #dadce0;
  --outline-variant: #e8eaed;
  --divider: rgba(60, 64, 67, .12);

  --secondary-container: #e8eaed;
  --on-secondary-container: #202124;

  --error: #d93025;
  --error-container: #fce8e6;
  --on-error-container: #b3261e;
  --success: #1e8e3e;
  --success-container: #e6f4ea;
  --warning: #f9ab00;
  --warning-container: #fef7e0;
  --info: #1a73e8;

  --scrim: rgba(32, 33, 36, .42);
  --scrim-strong: rgba(32, 33, 36, .62);

  --shelf-bg: rgba(255, 255, 255, .82);
  --shelf-border: rgba(60, 64, 67, .08);
  --shelf-icon-bg: rgba(60, 64, 67, .06);
  --shelf-icon-hover: rgba(60, 64, 67, .1);
  /* the shelf sits flush with the screen edge, so it only needs a whisper of
     shadow to separate it from the wallpaper — never a full bubble rim */
  --shelf-shadow: 0 -1px 2px rgba(60, 64, 67, .05);
  --shelf-sheen: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 60%);
  --launcher-bg: rgba(255, 255, 255, .86);
  --launcher-border: rgba(255, 255, 255, .55);
  --launcher-sheen: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 45%);
  --acrylic-noise: none;

  --window-bg: #ffffff;
  --window-header: #f8f9fa;
  --window-header-active: #f1f3f4;
  --window-border: rgba(60, 64, 67, .14);

  --popover-bg: #ffffff;
  --popover-border: rgba(60, 64, 67, .1);
  --menu-bg: #ffffff;

  --login-bg: linear-gradient(150deg, #dbe6f5 0%, #eef2f7 55%, #e6e9f0 100%);
  --login-text: #202124;

  --elevation-1: 0 1px 2px rgba(60, 64, 67, .16), 0 1px 3px rgba(60, 64, 67, .1);
  --elevation-2: 0 1px 3px rgba(60, 64, 67, .16), 0 2px 6px rgba(60, 64, 67, .12);
  --elevation-3: 0 2px 6px rgba(60, 64, 67, .16), 0 6px 16px rgba(60, 64, 67, .14);
  --elevation-4: 0 4px 10px rgba(60, 64, 67, .18), 0 12px 28px rgba(60, 64, 67, .18);
  --elevation-5: 0 8px 20px rgba(60, 64, 67, .2), 0 20px 44px rgba(60, 64, 67, .22);

  --wallpaper-tint: rgba(0, 0, 0, 0);
  --desktop-label: #ffffff;
  --desktop-label-bg: rgba(32, 33, 36, .5);
}

/* ============================== DARK THEME ============================== */
[data-theme="dark"] {
  color-scheme: dark;

  --primary: var(--accent);
  --on-primary: #ffffff;
  --primary-container: #22304a;
  --on-primary-container: #a8c7fa;
  --primary-hover: rgba(138, 180, 248, .1);
  --primary-press: rgba(138, 180, 248, .16);

  --surface: #1f1f21;
  --surface-1: #26262a;
  --surface-2: #2b2b2f;
  --surface-3: #333338;
  --surface-4: #3c3c42;
  --surface-inverse: #e8eaed;
  --on-surface: #e8eaed;
  --on-surface-2: #dadce0;
  --on-surface-3: #9aa0a6;
  --on-surface-4: #80868b;
  --outline: #5f6368;
  --outline-variant: #3c4043;
  --divider: rgba(232, 234, 237, .12);

  --secondary-container: #3c4043;
  --on-secondary-container: #e8eaed;

  --error: #f28b82;
  --error-container: #5c2b29;
  --on-error-container: #f6aea9;
  --success: #81c995;
  --success-container: #1e3a26;
  --warning: #fdd663;
  --warning-container: #4a3b16;
  --info: #8ab4f8;

  --scrim: rgba(0, 0, 0, .5);
  --scrim-strong: rgba(0, 0, 0, .72);

  --shelf-bg: rgba(41, 42, 45, .84);
  --shelf-border: rgba(232, 234, 237, .08);
  --shelf-icon-bg: rgba(232, 234, 237, .08);
  --shelf-icon-hover: rgba(232, 234, 237, .14);
  --shelf-shadow: 0 -1px 2px rgba(0, 0, 0, .22);
  --shelf-sheen: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%);
  --launcher-bg: rgba(41, 42, 45, .88);
  --launcher-border: rgba(255, 255, 255, .09);
  --launcher-sheen: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%);

  --window-bg: #292a2d;
  --window-header: #292a2d;
  --window-header-active: #303134;
  --window-border: rgba(0, 0, 0, .5);

  --popover-bg: #292a2d;
  --popover-border: rgba(232, 234, 237, .1);
  --menu-bg: #303134;

  --login-bg: linear-gradient(150deg, #101114 0%, #17181c 55%, #0d0e11 100%);
  --login-text: #e8eaed;

  --elevation-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --elevation-2: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --elevation-3: 0 2px 6px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .4);
  --elevation-4: 0 4px 10px rgba(0, 0, 0, .55), 0 12px 28px rgba(0, 0, 0, .45);
  --elevation-5: 0 8px 20px rgba(0, 0, 0, .6), 0 20px 44px rgba(0, 0, 0, .5);

  --wallpaper-tint: rgba(0, 0, 0, .28);
  --desktop-label: #f1f3f4;
  --desktop-label-bg: rgba(0, 0, 0, .55);
}

/* ---------- accessibility overrides ---------- */
body.high-contrast {
  --outline: #000;
  --divider: rgba(0, 0, 0, .35);
}
[data-theme="dark"] body.high-contrast,
body.high-contrast[data-theme="dark"] {
  --outline: #fff;
  --divider: rgba(255, 255, 255, .4);
}
body.reduce-motion * {
  animation-duration: 1ms !important;
  transition-duration: 1ms !important;
}
body.large-cursor,
body.large-cursor * {
  cursor: var(--cursor-value, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M4 2 L4 32 L12 25 L18 38 L23 35 L17 23 L28 22 Z' fill='white' stroke='black' stroke-width='2'/></svg>") 4 2, auto) !important;
}
body.night-light #nightlight-tint { opacity: 1; }