:root {
  /* Base palette adapted from the reference system for browser-only usage. */
  --palette-kuro-900: oklch(0.0862 0.0056 285.17);
  --palette-kuro-800: oklch(0.1156 0.0032 285.88);
  --palette-kuro-700: oklch(0.1457 0.0043 285.86);
  --palette-kuro-600: oklch(0.1698 0.0062 285.72);
  --palette-kuro-500: oklch(0.2015 0.0059 285.86);
  --palette-kuro-400: oklch(0.2367 0.0076 285.81);
  --palette-kuro-100: oklch(0.3516 0.0138 285.67);

  --palette-ruri-500: oklch(0.5942 0.1553 276.41);
  --palette-ruri-600: oklch(0.5674 0.1585 275.21);

  --palette-slate-100: oklch(0.9467 0.0027 286.35);
  --palette-slate-300: oklch(0.7603 0.0141 286.06);
  --palette-slate-400: oklch(0.6488 0.0146 262.36);
  --palette-slate-500: oklch(0.5465 0.0256 271.78);
  --palette-slate-600: oklch(0.4329 0.0272 271.57);

  --palette-violet-500: oklch(0.6056 0.2189 292.72);
  --palette-azure-400: oklch(0.7535 0.139 232.66);
  --palette-azure-600: oklch(0.5876 0.1389 241.97);

  --palette-white: oklch(1 0 0);
  --palette-white-t02: oklch(1 0 0 / 2%);
  --palette-white-t04: oklch(1 0 0 / 4%);
  --palette-white-t05: oklch(1 0 0 / 5%);
  --palette-white-t06: oklch(1 0 0 / 6%);
  --palette-white-t08: oklch(1 0 0 / 8%);
  --palette-white-t10: oklch(1 0 0 / 10%);
  --palette-white-t15: oklch(1 0 0 / 15%);
  --palette-white-t20: oklch(1 0 0 / 20%);
  --palette-white-t30: oklch(1 0 0 / 30%);
  --palette-white-t40: oklch(1 0 0 / 40%);
  --palette-white-t70: oklch(1 0 0 / 70%);
  --palette-white-t80: oklch(1 0 0 / 80%);
  --palette-white-t90: oklch(1 0 0 / 90%);

  --palette-black-t20: oklch(0 0 0 / 20%);
  --palette-black-t40: oklch(0 0 0 / 40%);
  --palette-black-t80: oklch(0 0 0 / 80%);

  --palette-page-start: #667eea;
  --palette-page-end: #764ba2;
  --palette-page-orb-one: rgba(120, 119, 198, 0.3);
  --palette-page-orb-two: rgba(255, 119, 198, 0.3);
  --palette-page-orb-three: rgba(120, 219, 255, 0.2);
  --palette-aqua-500: #21808d;
  --palette-aqua-600: #1d7480;
  --palette-aqua-700: #1a6873;

  --palette-shadow-sm: 0 1px 2px oklch(0 0 0 / 30%);
  --palette-shadow-md: 0 4px 6px oklch(0 0 0 / 40%);
  --palette-shadow-lg: 0 10px 15px oklch(0 0 0 / 40%);
  --palette-shadow-xl: 0 20px 25px oklch(0 0 0 / 50%);
  --palette-shadow-glow: 0 0 0 1px oklch(0.5674 0.1585 275.21 / 50%),
    0 4px 12px oklch(0.5674 0.1585 275.21 / 30%),
    inset 0 1px 0 0 oklch(1 0 0 / 20%);

  /* Semantic tokens */
  --ui-foreground: var(--palette-white-t90);
  --ui-foreground-hover: var(--palette-white);
  --ui-foreground-secondary: var(--palette-white-t80);
  --ui-foreground-muted: var(--palette-white-t70);
  --ui-foreground-subtle: var(--palette-white-t70);

  --ui-bg-base: var(--palette-kuro-800);
  --ui-bg-secondary: var(--palette-kuro-600);
  --ui-bg-hover: var(--palette-kuro-500);
  --ui-bg-elevated: var(--palette-kuro-700);
  --ui-bg-deep: var(--palette-kuro-900);

  --ui-primary: var(--palette-aqua-500);
  --ui-primary-hover: var(--palette-aqua-600);
  --ui-primary-active: var(--palette-aqua-700);
  --ui-primary-foreground: var(--palette-white);

  --ui-border-default: var(--palette-kuro-100);
  --ui-border-subtle: var(--palette-white-t06);
  --ui-border-hover: var(--palette-white-t10);
  --ui-border-strong: var(--palette-slate-600);

  --ui-glass-bg-subtle: var(--palette-white-t04);
  --ui-glass-bg-base: var(--palette-white-t05);
  --ui-glass-bg-hover: var(--palette-white-t08);
  --ui-glass-bg-active: var(--palette-white-t10);
  --ui-glass-bg-strong: var(--palette-white-t10);

  --ui-glass-border-subtle: var(--palette-white-t06);
  --ui-glass-border-base: var(--palette-white-t10);
  --ui-glass-border-strong: var(--palette-white-t20);
  --ui-glass-border-hover: var(--palette-white-t20);
  --ui-glass-border-focus: var(--palette-white-t40);

  --ui-overlay-focus: var(--palette-black-t20);
  --ui-overlay-dim: var(--palette-black-t40);
  --ui-overlay-blur: var(--palette-black-t80);

  --ui-shadow-sm: var(--palette-shadow-sm);
  --ui-shadow-md: var(--palette-shadow-md);
  --ui-shadow-lg: var(--palette-shadow-lg);
  --ui-shadow-xl: var(--palette-shadow-xl);
  --ui-shadow-glow: var(--palette-shadow-glow);

  --ui-font-sans: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui-font-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;

  --ui-motion-duration-fast: 120ms;
  --ui-motion-duration-standard: 250ms;
  --ui-motion-duration-slow: 320ms;
  --ui-motion-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  --ui-layer-base: 0;
  --ui-layer-content: 10;
  --ui-layer-chrome: 40;
  --ui-layer-overlay: 50;
  --ui-layer-modal: 100;

  --ui-page-background-start: var(--palette-page-start);
  --ui-page-background-end: var(--palette-page-end);
  --ui-page-orb-one: var(--palette-page-orb-one);
  --ui-page-orb-two: var(--palette-page-orb-two);
  --ui-page-orb-three: var(--palette-page-orb-three);

  /* Page theme tokens for this static profile page */
  --ui-page-background-color: var(--palette-black);
  --ui-page-shadow-card: 0 25px 50px oklch(0 0 0 / 10%);
  --ui-page-shadow-social-hover: 0 10px 25px oklch(0 0 0 / 20%);
  --ui-page-player-surface: var(--palette-white-t05);
  --ui-page-player-surface-hover: var(--palette-white-t08);
  --ui-page-player-surface-strong: var(--palette-white-t20);
  --ui-page-player-surface-strong-hover: var(--palette-white-t30);
  --ui-page-player-border: var(--palette-white-t10);
  --ui-page-player-border-hover: var(--palette-white-t20);
  --ui-page-player-track: var(--palette-white-t20);
  --ui-page-player-track-fill: var(--ui-primary);
  --ui-page-control-hover: var(--palette-white-t10);
  --ui-page-social-hover-surface: var(--palette-white-t20);
  --ui-page-social-hover-fill: var(--palette-white-t20);
  --ui-page-social-hover-border: var(--palette-white-t40);
  --ui-page-social-hover-icon: var(--ui-primary-hover);
  --ui-page-heading-tracking: -0.01em;
  --ui-page-heading-leading: 1.2;
  --ui-page-body-leading: 1.5;
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://www.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-motion-duration-fast: 0ms;
    --ui-motion-duration-standard: 0ms;
    --ui-motion-duration-slow: 0ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --ui-border-subtle: var(--palette-white-t15);
    --ui-border-hover: var(--palette-white-t20);
    --ui-glass-bg-base: var(--palette-white-t08);
    --ui-glass-bg-hover: var(--palette-white-t10);
  }
}

@media (forced-colors: active) {
  :root {
    --ui-glass-bg-subtle: Canvas;
    --ui-glass-bg-base: Canvas;
    --ui-glass-bg-hover: Canvas;
    --ui-glass-bg-active: Canvas;
    --ui-glass-border-subtle: CanvasText;
    --ui-glass-border-base: CanvasText;
    --ui-glass-border-strong: CanvasText;
    --ui-overlay-dim: transparent;
  }
}