/* ==========================================================================
   Design tokens - Neumorphism template
   Swap the values below to re-skin the template for a new project.
   The template is dark only, there is no light palette to keep in sync.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Base surface color (everything is derived from this) --- */
  --bg: #171717;
  --bg-elevated: #212121;

  /* --- Page background photo, behind every component.
         --bg-scrim darkens it so body text stays readable over the bright
         parts of the image. Set --bg-image to none and --bg-scrim to
         transparent for a flat --bg page.

         The path is relative to this file. It is used in base.css, which
         sits in the same folder, so it resolves the same way: a url() inside
         a custom property is resolved against the stylesheet that uses the
         var(), not the one that declares it. --- */
  --bg-image: url("../img/background.webp");
  --bg-scrim: rgb(0 0 0 / 80%);

  /* --- Neumorphic shadow pair.
         On a near black surface the dark side cannot go below #000000, so
         the light side carries the emboss and sits further from --bg than
         it would on a mid-tone background. --- */
  --shadow-light: #3a3a3a;
  --shadow-dark: #000000;
  --shadow-distance: 6px;
  --shadow-blur: 12px;
  --shadow-distance-sm: 3px;
  --shadow-blur-sm: 6px;

  /* --- Text --- */
  --text-primary: #ebebeb;
  --text-secondary: #b0b0b0;
  --text-muted: #909090;

  /* --------------------------------------------------------------------
     ACCENT COLOR - single control point.
     To re-skin the whole template with a different brand color, change
     only --accent-h (hue, 0-360). --accent-s / --accent-l fine-tune the
     saturation and lightness. Every accent-derived token below (hover
     state, soft background tint, glow) is computed from these three, so
     nothing else needs to be touched.

     The default reads at 8:1 against --bg. Keep --accent-l near 55% when
     changing the hue, below that the accent stops carrying text.
     -------------------------------------------------------------------- */
  --accent-h: 142;
  --accent-s: 46%;
  --accent-l: 55%;

  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 9%));
  --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 16%);
  --accent-ring: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 35%);
  --accent-glow: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 45%);
  --accent-contrast: #0f1f14;

  /* --- Status colors (independent of the brand accent) --- */
  --accent-warm: #f5a35c;
  --accent-success: #4cd0a0;
  --accent-danger: #f56c8a;
  --accent-info: #5cb8f5;

  /* --- Radii --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Spacing scale (rem, so the layout scales with the user's text size) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Typography ---
     System font first: it ships optical sizing and tuned tracking tables. */
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-xxl: 2.5rem;

  /* Tracking is size-specific: tighten large text, open up small caps. */
  --tracking-display: -0.025em;
  --tracking-title: -0.015em;
  --tracking-body: 0;
  --tracking-caps: 0.06em;

  /* Leading runs opposite to size. */
  --leading-display: 1.08;
  --leading-title: 1.25;
  --leading-body: 1.55;

  /* --- Motion ---
     --ease-out is the default: it settles like a critically damped spring,
     with no overshoot. --ease-spring overshoots and is reserved for motion
     that follows a gesture with momentum. Gesture-driven elements use the
     real spring in js/motion.js instead of a CSS curve. */
  --duration-fast: 100ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --press-scale: 0.97;

  /* --- Materials (translucent floating chrome) and dimming --- */
  --material-bg: color-mix(in srgb, var(--bg) 72%, transparent);
  --material-blur: blur(20px) saturate(180%);
  --material-edge: color-mix(in srgb, var(--shadow-light) 70%, transparent);
  --scrim: rgb(0 0 0 / 55%);

  /* --- Focus ring --- */
  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* --- Layers --- */
  --z-sticky: 50;
  --z-popover: 60;
  --z-overlay: 100;
  --z-toast: 200;

  /* --- Elevation presets (flat neumorphic) --- */
  --neu-flat:
    var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) var(--shadow-dark),
    calc(var(--shadow-distance) * -1) calc(var(--shadow-distance) * -1) var(--shadow-blur) var(--shadow-light);

  --neu-flat-sm:
    var(--shadow-distance-sm) var(--shadow-distance-sm) var(--shadow-blur-sm) var(--shadow-dark),
    calc(var(--shadow-distance-sm) * -1) calc(var(--shadow-distance-sm) * -1) var(--shadow-blur-sm) var(--shadow-light);

  /* Bigger floating surfaces read as thicker: deeper, wider shadow. */
  --neu-float:
    0 18px 40px rgb(0 0 0 / 35%),
    var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) var(--shadow-dark),
    calc(var(--shadow-distance) * -1) calc(var(--shadow-distance) * -1) var(--shadow-blur) var(--shadow-light);

  --neu-pressed:
    inset var(--shadow-distance-sm) var(--shadow-distance-sm) var(--shadow-blur-sm) var(--shadow-dark),
    inset calc(var(--shadow-distance-sm) * -1) calc(var(--shadow-distance-sm) * -1) var(--shadow-blur-sm) var(--shadow-light);

  --neu-pressed-lg:
    inset var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) var(--shadow-dark),
    inset calc(var(--shadow-distance) * -1) calc(var(--shadow-distance) * -1) var(--shadow-blur) var(--shadow-light);
}

/* --- Reduced transparency: translucent chrome turns solid, blur is dropped --- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-bg: var(--bg);
    --material-blur: none;
  }
}

/* --- More contrast: stronger text, solid chrome, defined edges --- */
@media (prefers-contrast: more) {
  :root {
    --text-secondary: var(--text-primary);
    --text-muted: var(--text-primary);
    --material-bg: var(--bg);
    --material-blur: none;
    --material-edge: var(--text-primary);
    --focus-ring: 0 0 0 3px var(--accent);
  }
}

/* Register --percent as an animatable number so the radial dial (see
   components.css .neu-radial) can transition its conic-gradient sweep
   instead of jumping straight to its end value. */
@property --percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}