/* ==========================================================================
   SpeedCube PRO — Design Tokens & Optical Liquid Glass Variables
   ========================================================================== */

:root {
  --specular-angle: 135deg;

  /* Pure OLED Black & Obsidian Titanium Base */
  --bg-primary: #000000;
  --bg-secondary: #050608;
  --bg-tertiary: #08090d;

  /* Surface tints used by flat controls */
  --bg-surface: rgba(255, 255, 255, 0.045);
  --bg-surface-elevated: rgba(255, 255, 255, 0.08);
  --bg-surface-active: rgba(255, 255, 255, 0.12);

  /* Liquid glass fills: a lit top edge fading into a smoky graphite body */
  --glass-lens-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.075) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );

  /* Clear tint over a smoky base: lets the coloured ambient light show
     through the blur, which is what makes it read as glass */
  --glass-capsule-fill:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.035) 100%),
    rgba(14, 15, 20, 0.46);

  --glass-card-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 60%,
    rgba(255, 255, 255, 0.022) 100%
  );

  --glass-sheet-fill: linear-gradient(
    180deg,
    rgba(34, 36, 45, 0.94) 0%,
    rgba(17, 18, 24, 0.97) 100%
  );

  /* Refractive rim: bright specular corners (top-left / bottom-right) with a
     faint prismatic shift in between, like light bending through a glass edge.
     Used as the masked 1px border on every glass surface. */
  --liquid-rim-refraction: conic-gradient(
    from 300deg at 50% 50%,
    rgba(255, 255, 255, 0.62) 0deg,
    rgba(200, 222, 255, 0.30) 34deg,
    rgba(255, 255, 255, 0.08) 85deg,
    rgba(255, 205, 238, 0.14) 135deg,
    rgba(255, 255, 255, 0.34) 180deg,
    rgba(200, 255, 236, 0.12) 225deg,
    rgba(255, 255, 255, 0.07) 275deg,
    rgba(228, 212, 255, 0.26) 326deg,
    rgba(255, 255, 255, 0.62) 360deg
  );

  --liquid-rim-soft: conic-gradient(
    from 300deg at 50% 50%,
    rgba(255, 255, 255, 0.30) 0deg,
    rgba(196, 220, 255, 0.14) 45deg,
    rgba(255, 255, 255, 0.05) 100deg,
    rgba(255, 196, 236, 0.10) 145deg,
    rgba(255, 255, 255, 0.18) 180deg,
    rgba(196, 255, 232, 0.09) 225deg,
    rgba(255, 255, 255, 0.04) 275deg,
    rgba(255, 255, 255, 0.30) 360deg
  );

  /* Depth: soft ambient drop shadow + a lit inner top edge + a faint inner
     glow along the bottom, which reads as the thickness of the glass. */
  --liquid-shadow-sm:
    0 10px 28px -12px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 -8px 16px -14px rgba(255, 255, 255, 0.10);

  --liquid-shadow-md:
    0 24px 56px -22px rgba(0, 0, 0, 0.92),
    0 2px 6px -2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 26px -22px rgba(255, 255, 255, 0.12);

  --liquid-shadow-lg:
    0 40px 90px -24px rgba(0, 0, 0, 0.95),
    0 4px 12px -4px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 -18px 32px -26px rgba(255, 255, 255, 0.14);

  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #FFFFFF;
  --text-secondary: rgba(245, 245, 247, 0.76);
  --text-tertiary: rgba(245, 245, 247, 0.52);

  --blue: #0A84FF;
  /* Default accent = emerald (the theme a new visitor sees); the account's own theme replaces it on boot */
  --accent: #30D158;
  --accent-color: #30D158;
  --accent-light: #66E887;
  --accent-rgb: 48, 209, 88;
  --accent-light-rgb: 102, 232, 135;
  --accent-glow: rgba(48, 209, 88, 0.42);
  --accent-soft: rgba(48, 209, 88, 0.16);
  --green: #30D158;
  --green-soft: rgba(48, 209, 88, 0.15);
  --green-glow: rgba(48, 209, 88, 0.40);
  --red: #FF453A;
  --red-soft: rgba(255, 69, 58, 0.16);
  --red-glow: rgba(255, 69, 58, 0.42);
  --amber: #FF9F0A;
  --yellow: #FFD60A;

  --glass-blur-sm: blur(24px) saturate(170%);
  --glass-blur-md: blur(34px) saturate(180%);
  --glass-blur-lg: blur(44px) saturate(185%);

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 26px;
  --r-pill: 9999px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace;

  --header-h: 58px;
  --sidebar-w: 356px;
  --dock-h: 64px;

  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-apple: cubic-bezier(0.32, 1.35, 0.62, 1);
}