/*
 * Pro gradient backgrounds — light + dark mode.
 *
 * Light mode order: 500 (base), 400 (hover, lighter), 600 (down, darker).
 * Dark mode swaps: hover and down use the opposite ends because the accent
 * ramp runs the other way in dark mode — a higher step is lighter, not darker.
 */
@utility bg-background-pro {
  background-image: linear-gradient(
    to right,
    var(--color-accent-500),
    var(--color-magic-accent-500)
  );
}
@utility bg-background-pro-hover {
  background-image: linear-gradient(
    to right,
    var(--color-accent-400),
    var(--color-magic-accent-400)
  );
}
@utility bg-background-pro-down {
  background-image: linear-gradient(
    to right,
    var(--color-accent-600),
    var(--color-magic-accent-600)
  );
}

/*
 * Flash gradient backgrounds (same in light + dark)
 */
@utility bg-background-flash {
  background-image: linear-gradient(
    to right,
    var(--color-yellow-500),
    var(--color-yellow-light-500)
  );
}
@utility bg-background-flash-hover {
  background-image: linear-gradient(
    to right,
    var(--color-yellow-400),
    var(--color-yellow-light-400)
  );
}
@utility bg-background-flash-down {
  background-image: linear-gradient(
    to right,
    var(--color-yellow-600),
    var(--color-yellow-light-600)
  );
}

/*
 * Pro gradient on text/content elements (same in light + dark)
 */
@utility bg-content-pro {
  background-image: linear-gradient(
    to right,
    var(--color-accent-500),
    var(--color-magic-accent-500)
  );
}

/*
 * Photoroom color tokens — light + dark mode values.
 *
 * This file defines the actual CSS variable values referenced by the
 * @theme inline block in theme.css (which only registers utility names).
 *
 * Use hex color values directly from Figma:
 *   https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=7217%3A13600
 *
 * Don't use color channels — we don't need Tailwind opacity modifier syntax.
 * All codebase colors should be direct tokens, not derivatives (don't do
 * `bg-gray/80`).
 */

:root,
.theme-light {
  /*
   * BASE
   */

  /* Static */
  --color-black: #000000;
  --color-black-alpha-100: rgba(0, 0, 0, 5%);
  --color-black-alpha-200: rgba(0, 0, 0, 10%);
  --color-black-alpha-300: rgba(0, 0, 0, 15%);
  --color-black-alpha-400: rgba(0, 0, 0, 24%);
  --color-black-alpha-500: rgba(0, 0, 0, 32%);
  --color-black-alpha-600: rgba(0, 0, 0, 42%);
  --color-black-alpha-700: rgba(0, 0, 0, 56%);
  --color-black-alpha-800: rgba(0, 0, 0, 75%);
  --color-black-alpha-900: rgba(0, 0, 0, 85%);
  --color-white: #ffffff;
  --color-white-1: #f2f3f7;
  --color-white-2: #e6e7ed;
  --color-white-alpha-100: rgba(255, 255, 255, 7%);
  --color-white-alpha-200: rgba(255, 255, 255, 12%);
  --color-white-alpha-300: rgba(255, 255, 255, 18%);
  --color-white-alpha-400: rgba(255, 255, 255, 41%);
  --color-white-alpha-500: rgba(255, 255, 255, 49%);
  --color-white-alpha-600: rgba(255, 255, 255, 60%);
  --color-white-alpha-700: rgba(255, 255, 255, 72%);
  --color-white-alpha-800: rgba(255, 255, 255, 81%);
  --color-white-alpha-900: rgba(255, 255, 255, 85%);

  /* Neutral */
  --color-neutral-0: #ffffff;
  --color-neutral-0-80: rgba(255, 255, 255, 80%);
  --color-neutral-50: #f9f9f9;
  --color-neutral-100: #f2f2f2;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d9d9d9;
  --color-neutral-400: #b5b5b5;
  --color-neutral-500: #a1a1a1;
  --color-neutral-600: #8a8a8a;
  --color-neutral-700: #6b6b6b;
  --color-neutral-800: #474747;
  --color-neutral-900: #1a1a1a;
  --color-neutral-alpha-100: rgba(0, 0, 0, 5%);
  --color-neutral-alpha-200: rgba(0, 0, 0, 10%);
  --color-neutral-alpha-300: rgba(0, 0, 0, 15%);
  --color-neutral-alpha-400: rgba(0, 0, 0, 29%);
  --color-neutral-alpha-500: rgba(0, 0, 0, 37%);
  --color-neutral-alpha-600: rgba(0, 0, 0, 47%);

  /* Sand */
  --color-sand-50: #f5f4f0;

  /* Accent */
  --color-accent-300: #6369ff;
  --color-accent-400: #544fff;
  --color-accent-500: #492ffb;
  --color-accent-600: #410de9;
  --color-accent-alpha-100: rgba(73, 47, 251, 6%);
  --color-accent-alpha-200: rgba(73, 47, 251, 12%);
  --color-accent-alpha-300: rgba(73, 47, 251, 18%);
  --color-accent-alpha-400: rgba(73, 47, 251, 35%);
  --color-accent-alpha-500: rgba(73, 47, 251, 44%);

  /* Positive */
  --color-positive-400: #3dba83;
  --color-positive-500: #00a66f;
  --color-positive-600: #018255;
  --color-positive-alpha-100: rgba(15, 175, 125, 10%);
  --color-positive-alpha-200: rgba(8, 166, 113, 19%);
  --color-positive-alpha-300: rgba(3, 165, 114, 29%);

  /* Negative */
  --color-negative-400: #ff6b5e;
  --color-negative-500: #ff3333;
  --color-negative-600: #c92224;
  --color-negative-alpha-100: rgba(255, 105, 105, 10%);
  --color-negative-alpha-200: rgba(255, 24, 24, 13%);
  --color-negative-alpha-300: rgba(255, 74, 74, 26%);

  /* Magic accent */
  --color-magic-accent-400: #7d63ff;
  --color-magic-accent-500: #7146ff;
  --color-magic-accent-600: #6532ed;

  /* Animation accent */
  --color-animation-accent-500: #cfc5ff;

  /* Camera accent */
  --color-camera-accent-500: #f5b63d;

  /* Yellow */
  --color-yellow-400: #edf280;
  --color-yellow-500: #e5ed49;
  --color-yellow-600: #c3c93e;

  /* Yellow light */
  --color-yellow-light-400: #feffea;
  --color-yellow-light-500: #fdffd5;
  --color-yellow-light-600: #e4e5c0;

  /* Branding */
  --color-brand-blue: #492ffb;
  --color-brand-purple: #7146ff;
  --color-brand-yellow: #e5ed49;
  --color-brand-white: #ffffff;
  --color-brand-sand: #f5f4f0;
  --color-brand-neutral: #f9f9f9;
  --color-brand-lilac: #ebe8ff;
  --color-brand-black: #000000;
  --color-secondary-moon-grape: #626eff;
  --color-secondary-electric-litchi: #ff86f6;
  --color-secondary-sunny-mango: #ffa602;
  --color-secondary-aqua-kiwi: #00cd9c;
  --color-secondary-coral-cherry: #ff538c;
  --color-secondary-navy: #000255;
  --color-secondary-lilac: #e7e8ff;

  /* Semantic */
  --color-spotlight: rgba(255, 166, 2, 0.16);
  --color-spotlight-down: rgba(255, 166, 2, 0.34);

  /* Replaceable layer indicator in editor */
  --color-replaceable: #00ffc2;

  /*
   * ALIASES
   */

  /* Surface */
  --color-surface-default: var(--color-neutral-0);
  --color-surface-alternate: var(--color-neutral-100);
  --color-surface-canvas: var(--color-neutral-50);
  --color-surface-low: var(--color-neutral-100);
  --color-surface-high: var(--color-neutral-0);
  --color-surface-higher: var(--color-neutral-0);
  /* Same value as surface-canvas today, but surface-subtle has no Prism slot behind it (website
     section backgrounds only) — canvas tracks Prism and moves with it, subtle does not. */
  --color-surface-subtle: var(--color-neutral-50);

  /* Background */
  --color-background-default: var(--color-neutral-900);
  --color-background-hover: var(--color-neutral-800);
  --color-background-down: var(--color-neutral-900);
  --color-background-subdued: var(--color-neutral-alpha-100);
  --color-background-subdued-hover: var(--color-neutral-alpha-200);
  --color-background-subdued-down: var(--color-neutral-alpha-300);
  --color-background-borderless-subdued-hover: var(--color-neutral-alpha-100);
  --color-background-borderless-subdued-down: var(--color-neutral-alpha-200);
  --color-background-accent: var(--color-accent-500);
  --color-background-accent-hover: var(--color-accent-400);
  --color-background-accent-down: var(--color-accent-600);
  --color-background-accent-subdued: var(--color-accent-alpha-100);
  --color-background-accent-subdued-hover: var(--color-accent-alpha-200);
  --color-background-accent-subdued-down: var(--color-accent-alpha-300);
  /* Theme-invariant brand accent: stays #492ffb in dark too, for permanent
     accent surfaces with white content (e.g. the drag-and-drop drop state). */
  --color-background-accent-fixed: #492ffb;
  --color-background-positive: var(--color-positive-500);
  --color-background-positive-hover: var(--color-positive-400);
  --color-background-positive-down: var(--color-positive-600);
  --color-background-positive-subdued: var(--color-positive-alpha-100);
  --color-background-positive-subdued-hover: var(--color-positive-alpha-200);
  --color-background-positive-subdued-down: var(--color-positive-alpha-300);
  --color-background-negative: var(--color-negative-500);
  --color-background-negative-hover: var(--color-negative-400);
  --color-background-negative-down: var(--color-negative-600);
  --color-background-negative-subdued: var(--color-negative-alpha-100);
  --color-background-negative-subdued-hover: var(--color-negative-alpha-200);
  --color-background-negative-subdued-down: var(--color-negative-alpha-300);
  --color-background-tab: var(--color-neutral-0);
  --color-background-bar: var(--color-neutral-0-80);
  --color-background-white: var(--color-white);
  --color-background-white-hover: var(--color-white-1);
  --color-background-white-down: var(--color-white-2);
  --color-background-white-subdued: var(--color-white-alpha-200);
  --color-background-white-subdued-hover: var(--color-white-alpha-300);
  --color-background-white-subdued-down: var(--color-white-alpha-400);
  --color-background-spotlight: var(--color-spotlight);
  --color-background-spotlight-down: var(--color-spotlight-down);
  --color-background-inverted: var(--color-neutral-0);
  --color-background-promotional: var(--color-secondary-lilac);
  --color-background-overlay: var(--color-white-alpha-900);
  --color-background-tooltip: var(--color-neutral-800);

  /* Content */
  --color-content-primary: var(--color-neutral-900);
  --color-content-subdued-primary: var(--color-neutral-800);
  --color-content-secondary: var(--color-neutral-700);
  --color-content-tertiary: var(--color-neutral-600);
  --color-content-accent: var(--color-accent-500);
  --color-content-accent-hover: var(--color-accent-400);
  --color-content-accent-down: var(--color-accent-600);
  --color-content-positive: var(--color-positive-500);
  --color-content-positive-hover: var(--color-positive-400);
  --color-content-positive-down: var(--color-positive-600);
  --color-content-negative: var(--color-negative-500);
  --color-content-negative-hover: var(--color-negative-400);
  --color-content-negative-down: var(--color-negative-600);
  --color-content-camera-accent: var(--color-camera-accent-500);
  --color-content-white-primary: var(--color-white);
  --color-content-white-secondary: var(--color-white-alpha-800);
  --color-content-black-primary: var(--color-black);
  --color-content-black-secondary: var(--color-black-alpha-800);
  --color-content-white-inverted-primary: var(--color-white);
  --color-content-white-inverted-secondary: var(--color-white-alpha-800);
  --color-content-black-inverted-primary: var(--color-black);
  --color-content-black-inverted-secondary: var(--color-black-alpha-800);

  /* Structure */
  --color-misc-divider: var(--color-neutral-alpha-200);
  --color-misc-divider-ios: var(--color-neutral-alpha-300);
  --color-misc-border: var(--color-neutral-alpha-300);
  --color-misc-border-hover: var(--color-neutral-alpha-400);
  --color-misc-border-down: var(--color-neutral-alpha-500);
  --color-misc-border-emphasized: var(--color-neutral-alpha-500);
  --color-misc-border-sidebar: var(--color-black-alpha-100);
  --color-misc-border-default: var(--color-neutral-alpha-300);
  --color-misc-stack-layer-1: var(--color-neutral-400);
  --color-misc-stack-layer-2: var(--color-neutral-200);
  --color-misc-focus-indicator: var(--color-accent-alpha-500);
  --color-misc-focus-indicator-subdued: var(--color-accent-alpha-200);
  --color-misc-white-focus-indicator: var(--color-white);
  --color-misc-hairline: var(--color-neutral-alpha-300);
  --color-misc-hairline-emphasized: var(--color-neutral-alpha-400);

  /* Overlay */
  --color-misc-visual-hover: var(--color-black-alpha-200);
  --color-misc-visual-down: var(--color-black-alpha-300);

  /* Custom (light mode defaults) */
  --font-thumbnail-filter: none;
  --scroll-hint-from: var(--color-white);
  --color-checker: var(--color-white-1);

  /* Pricing */
  --color-misc-ai-image: #5383ff;
  --color-misc-ai-video: #00cd9c;
  --color-misc-automated-exports: #aa4fff;
}

/*
 * Light-mode scoping helper. The combined `:root, .theme-light` selector
 * above re-asserts the light token values on a `.theme-light` subtree even
 * when an ancestor has `.theme-dark`. Pinning `color-scheme` and a default
 * `color` here keeps the browser's `CanvasText` and unstyled inherited text
 * visible regardless of the surrounding scheme.
 */
.theme-light {
  color-scheme: light;
  color: var(--color-content-primary);
}

/*
 * DARK MODE
 */
.theme-dark {
  /*
   * BASE
   */

  /* Neutral */
  --color-neutral-0: #0f1011;
  --color-neutral-0-80: rgba(15, 16, 17, 80%);
  --color-neutral-50: #18191b;
  --color-neutral-100: #202124;
  --color-neutral-200: #2d2e33;
  --color-neutral-300: #393a40;
  --color-neutral-400: #616268;
  --color-neutral-500: #76777d;
  --color-neutral-600: #8f9096;
  --color-neutral-700: #aeafb5;
  --color-neutral-800: #d2d3d9;
  --color-neutral-900: #ffffff;
  --color-neutral-alpha-100: rgba(146, 147, 163, 13%);
  --color-neutral-alpha-200: rgba(182, 183, 206, 18%);
  --color-neutral-alpha-300: rgba(198, 199, 221, 23%);
  --color-neutral-alpha-400: rgba(231, 232, 246, 38%);
  --color-neutral-alpha-500: rgba(239, 240, 252, 46%);
  --color-neutral-alpha-600: rgba(245, 246, 255, 55%);

  /* Sand — dark-mode value TBD (falls back to :root light value) */

  /* Accent */
  --color-accent-300: #4c3fc2;
  --color-accent-400: #5052cb;
  --color-accent-500: #696eff;
  --color-accent-600: #7f89ff;
  --color-accent-alpha-100: rgba(76, 77, 247, 23%);
  --color-accent-alpha-200: rgba(89, 93, 251, 35%);
  --color-accent-alpha-300: rgba(95, 100, 255, 45%);
  --color-accent-alpha-400: rgba(108, 113, 255, 76%);
  --color-accent-alpha-500: rgba(113, 118, 255, 92%);

  /* Positive */
  --color-positive-400: #01a86f;
  --color-positive-500: #00cc88;
  --color-positive-600: #57e2a2;
  --color-positive-alpha-100: rgba(0, 124, 65, 25%);
  --color-positive-alpha-200: rgba(0, 142, 83, 35%);
  --color-positive-alpha-300: rgba(0, 149, 93, 45%);

  /* Negative */
  --color-negative-400: #ce4545;
  --color-negative-500: #ff5959;
  --color-negative-600: #ff8480;
  --color-negative-alpha-100: rgba(245, 51, 47, 23%);
  --color-negative-alpha-200: rgba(250, 66, 64, 34%);
  --color-negative-alpha-300: rgba(251, 75, 74, 44%);

  /* Magic accent */
  --color-magic-accent-400: #aa4acb;
  --color-magic-accent-500: #d460fb;
  --color-magic-accent-600: #e87fff;

  /* Animation accent */
  --color-animation-accent-500: #5f598a;

  /* Camera accent */
  --color-camera-accent-500: #f5b63d;

  /* Yellow */
  --color-yellow-400: #edf280;
  --color-yellow-500: #e5ed49;
  --color-yellow-600: #c3c93e;

  /* Yellow light */
  --color-yellow-light-400: #feffea;
  --color-yellow-light-500: #fdffd5;
  --color-yellow-light-600: #e4e5c0;

  /*
   * ALIASES
   */

  /* Surface */
  --color-surface-default: var(--color-neutral-0);
  --color-surface-alternate: var(--color-neutral-100);
  --color-surface-canvas: var(--color-neutral-50);
  --color-surface-low: var(--color-neutral-0);
  --color-surface-high: var(--color-neutral-100);
  --color-surface-higher: var(--color-neutral-200);
  /* See the light block: same value, no Prism slot. */
  --color-surface-subtle: var(--color-neutral-50);

  /* Background */
  --color-background-default: var(--color-neutral-900);
  --color-background-hover: var(--color-neutral-800);
  --color-background-down: var(--color-neutral-900);
  --color-background-subdued: var(--color-neutral-alpha-100);
  --color-background-subdued-hover: var(--color-neutral-alpha-200);
  --color-background-subdued-down: var(--color-neutral-alpha-300);
  --color-background-borderless-subdued-hover: var(--color-neutral-alpha-100);
  --color-background-borderless-subdued-down: var(--color-neutral-alpha-200);
  --color-background-accent: var(--color-accent-500);
  --color-background-accent-hover: var(--color-accent-600);
  --color-background-accent-down: var(--color-accent-400);
  --color-background-accent-subdued: var(--color-accent-alpha-100);
  --color-background-accent-subdued-hover: var(--color-accent-alpha-200);
  --color-background-accent-subdued-down: var(--color-accent-alpha-300);
  /* Theme-invariant brand accent: stays #492ffb in dark too, for permanent
     accent surfaces with white content (e.g. the drag-and-drop drop state). */
  --color-background-accent-fixed: #492ffb;
  --color-background-positive: var(--color-positive-500);
  --color-background-positive-hover: var(--color-positive-600);
  --color-background-positive-down: var(--color-positive-400);
  --color-background-positive-subdued: var(--color-positive-alpha-100);
  --color-background-positive-subdued-hover: var(--color-positive-alpha-200);
  --color-background-positive-subdued-down: var(--color-positive-alpha-300);
  --color-background-negative: var(--color-negative-500);
  --color-background-negative-hover: var(--color-negative-600);
  --color-background-negative-down: var(--color-negative-400);
  --color-background-negative-subdued: var(--color-negative-alpha-100);
  --color-background-negative-subdued-hover: var(--color-negative-alpha-200);
  --color-background-negative-subdued-down: var(--color-negative-alpha-300);
  --color-background-tab: var(--color-neutral-400);
  --color-background-white: var(--color-white);
  --color-background-white-hover: var(--color-white-alpha-800);
  --color-background-white-down: var(--color-white);
  --color-background-white-subdued: var(--color-white-alpha-200);
  --color-background-white-subdued-hover: var(--color-white-alpha-300);
  --color-background-white-subdued-down: var(--color-white-alpha-400);
  --color-background-spotlight: var(--color-spotlight);
  --color-background-inverted: var(--color-neutral-0);
  --color-background-promotional: var(--color-secondary-lilac);
  --color-background-overlay: var(--color-black-alpha-900);
  --color-background-tooltip: var(--color-neutral-100);

  /* Content */
  --color-content-primary: var(--color-neutral-900);
  --color-content-subdued-primary: var(--color-neutral-800);
  --color-content-secondary: var(--color-neutral-700);
  --color-content-tertiary: var(--color-neutral-600);
  --color-content-accent: var(--color-accent-500);
  --color-content-accent-hover: var(--color-accent-400);
  --color-content-accent-down: var(--color-accent-600);
  --color-content-positive: var(--color-positive-500);
  --color-content-positive-hover: var(--color-positive-600);
  --color-content-positive-down: var(--color-positive-400);
  --color-content-negative: var(--color-negative-500);
  --color-content-negative-hover: var(--color-negative-600);
  --color-content-negative-down: var(--color-negative-400);
  --color-content-camera-accent: var(--color-camera-accent-500);
  --color-content-white-primary: var(--color-white);
  --color-content-white-secondary: var(--color-white-alpha-800);
  --color-content-black-primary: var(--color-black);
  --color-content-black-secondary: var(--color-black-alpha-800);
  --color-content-white-inverted-primary: var(--color-black);
  --color-content-white-inverted-secondary: var(--color-black-alpha-800);
  --color-content-black-inverted-primary: var(--color-white);
  --color-content-black-inverted-secondary: var(--color-white-alpha-800);

  /* Structure */
  --color-misc-divider: var(--color-neutral-alpha-200);
  --color-misc-divider-ios: var(--color-neutral-alpha-300);
  --color-misc-border: var(--color-neutral-alpha-300);
  --color-misc-border-hover: var(--color-neutral-alpha-400);
  --color-misc-border-down: var(--color-neutral-alpha-500);
  --color-misc-border-emphasized: var(--color-neutral-alpha-500);
  --color-misc-border-sidebar: var(--color-neutral-alpha-200);
  --color-misc-border-default: var(--color-neutral-alpha-300);
  --color-misc-stack-layer-1: var(--color-neutral-400);
  --color-misc-stack-layer-2: var(--color-neutral-200);
  --color-misc-focus-indicator: var(--color-accent-alpha-500);
  --color-misc-focus-indicator-subdued: var(--color-accent-alpha-200);
  --color-misc-white-focus-indicator: var(--color-white);
  --color-misc-hairline: var(--color-neutral-alpha-300);
  --color-misc-hairline-emphasized: var(--color-neutral-alpha-400);

  /* Overlay */
  --color-misc-visual-hover: var(--color-black-alpha-200);
  --color-misc-visual-down: var(--color-black-alpha-300);

  /* Custom (dark mode overrides) */
  --font-thumbnail-filter: invert(1);
  --scroll-hint-from: var(--color-surface-higher);
  --color-checker: var(--color-neutral-300);

  /* Pricing */
  --color-misc-ai-image: #5383ff;
  --color-misc-ai-video: #00cd9c;
  --color-misc-automated-exports: #aa4fff;
}
.theme-dark .bg-background-pro-hover {
  background-image: linear-gradient(
    to right,
    var(--color-accent-600),
    var(--color-magic-accent-600)
  );
}
.theme-dark .bg-background-pro-down {
  background-image: linear-gradient(
    to right,
    var(--color-accent-400),
    var(--color-magic-accent-400)
  );
}