/*
 * Animpic Design System — semantic tokens
 *
 * This file is intentionally not a page stylesheet. Existing pages are
 * migrated to these tokens in controlled waves described in
 * docs/redesign-roadmap.md.
 */

:root {
  color-scheme: dark;

  /* Brand */
  --anp-brand-cyan: #1ec3d3;
  --anp-brand-cyan-hover: #42d7e3;
  --anp-brand-cyan-active: #16aebd;
  --anp-brand-cyan-soft: #123a45;
  --anp-brand-blue: #078dff;

  /* Content Hub product theme. The surface remains on shared Animpic tokens. */
  --anp-content-accent: #ff654f;
  --anp-content-accent-hover: #ff7a67;
  --anp-content-accent-active: #e95643;
  --anp-content-accent-soft: #422923;
  --anp-content-provenance: #b9a7ff;
  --anp-content-provenance-soft: #33275b;

  /* Approved UI System concept palette; opt-in until surface migration. */
  --anp-concept-bg-deep: #071018;
  --anp-concept-bg: #0a151d;
  --anp-concept-nav-bg: #09141b;
  --anp-concept-surface-1: #0f1b23;
  --anp-concept-surface-2: #14222b;
  --anp-concept-surface-3: #182a34;
  --anp-concept-border: #263b47;
  --anp-concept-border-strong: #355361;
  --anp-concept-nav-border: #3f535e;
  --anp-concept-blue: #087fff;
  --anp-concept-sky: #00b9ff;
  --anp-concept-cyan: #18d5d1;
  --anp-concept-text: #f3f7f8;
  --anp-concept-muted: #80939c;
  --anp-concept-dim: #526872;
  --anp-concept-success: #27bf89;
  --anp-concept-warning: #f2c45b;

  /* Backgrounds and surfaces */
  --anp-bg-deep: #151e27;
  --anp-bg: #141d26;
  --anp-surface-1: #1a232c;
  --anp-surface-2: #242b35;
  --anp-surface-3: #252c36;

  /* Store theme surfaces sampled from the approved visual reference */
  --anp-store-bg: #0a121e;
  --anp-store-surface: #121b26;
  --anp-store-surface-hover: #182330;

  /* Borders */
  --anp-border-subtle: #303943;
  --anp-border: #3a444e;
  --anp-border-strong: #4a5661;

  /* Text */
  --anp-text-primary: #f4f7fa;
  --anp-text-secondary: #b2bdca;
  --anp-text-muted: #8b98a8;
  --anp-text-disabled: #596574;
  --anp-text-inverse: #07111b;

  /* Text placed on saturated brand and product actions. */
  --anp-text-on-accent: var(--anp-text-inverse);

  /* Semantic status */
  --anp-success: #2ccaa5;
  --anp-warning: #f5b82e;
  --anp-danger: #ef6b76;
  --anp-info: #38a9ff;

  /* Typography */
  --anp-font-display: "Manrope", "Inter", sans-serif;
  --anp-font-ui: "Inter", sans-serif;

  --anp-text-xs: 0.75rem;
  --anp-text-sm: 0.875rem;
  --anp-text-md: 1rem;
  --anp-text-lg: 1.125rem;
  --anp-text-xl: 1.5rem;
  --anp-text-2xl: 2rem;
  --anp-text-display: 3.75rem;

  --anp-line-xs: 1rem;
  --anp-line-sm: 1.25rem;
  --anp-line-md: 1.5rem;
  --anp-line-lg: 1.75rem;
  --anp-line-xl: 2rem;
  --anp-line-2xl: 2.5rem;
  --anp-line-display: 4rem;

  /* Spacing */
  --anp-space-1: 0.25rem;
  --anp-space-2: 0.5rem;
  --anp-space-3: 0.75rem;
  --anp-space-4: 1rem;
  --anp-space-5: 1.25rem;
  --anp-space-6: 1.5rem;
  --anp-space-8: 2rem;
  --anp-space-10: 2.5rem;
  --anp-space-12: 3rem;
  --anp-space-16: 4rem;

  /* Shape */
  --anp-radius-sm: 0.375rem;
  --anp-radius-md: 0.5rem;
  --anp-radius-lg: 0.75rem;
  --anp-radius-xl: 1rem;
  --anp-radius-round: 999px;
  --anp-radius-panel-cut: 15px 9px 16px 10px;
  --anp-radius-control-cut: 9px 6px 10px 7px;
  --anp-radius-badge-cut: 7px 4px 8px 5px;
  --anp-radius-tab-cut: 10px 6px 11px 7px;
  --anp-radius-field-cut: 11px 7px 12px 8px;
  --anp-radius-nav-cut: 12px 7px 13px 8px;
  --anp-radius-compact-panel-cut: 13px 8px 14px 9px;
  --anp-radius-preview-cut: 18px 10px 20px 12px;
  --anp-radius-stage-cut: 19px 11px 21px 13px;
  --anp-radius-shell-cut: 32px 18px 36px 21px;

  /* Sculpted geometry from the approved UI System reference. */
  --anp-shape-shell-radius: 1.5rem 0.875rem 1.5625rem 0.9375rem;
  --anp-shape-control-radius: 0.9375rem 0.5625rem 1rem 0.625rem;
  --anp-shape-card-radius: 1rem 0.625rem 1.0625rem 0.6875rem;
  --anp-shape-badge-radius: 38% 62% 47% 53% / 58% 39% 61% 42%;
  --anp-shape-orbit-radius: 48% 52% 56% 44% / 41% 59% 43% 57%;

  /* Elevation and focus */
  --anp-shadow-panel: 0 12px 32px rgb(0 0 0 / 18%);
  --anp-shadow-focus: 0 0 0 3px rgb(30 195 211 / 24%);
  --anp-shadow-primary-action:
    0 0 18px color-mix(in srgb, var(--anp-concept-sky) 18%, transparent),
    0 12px 28px color-mix(in srgb, var(--anp-brand-blue) 26%, transparent);
  --anp-shadow-primary-action-focus:
    0 0 0 3px color-mix(in srgb, var(--anp-brand-cyan) 32%, transparent),
    0 0 22px color-mix(in srgb, var(--anp-concept-sky) 25%, transparent),
    0 12px 28px color-mix(in srgb, var(--anp-brand-blue) 28%, transparent);
  --anp-focus-outline: 2px solid var(--anp-brand-cyan);
  --anp-focus-offset: 2px;

  /* Motion */
  --anp-duration-fast: 120ms;
  --anp-duration-normal: 180ms;
  --anp-duration-slow: 280ms;
  --anp-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --anp-control-compact: 2.25rem;
  --anp-control-standard: 2.75rem;
  --anp-control-comfortable: 3rem;
  --anp-hit-target: 2.75rem;
  --anp-store-shell-max-width: 87.5rem;
  --anp-store-max-width: 110rem;
  --anp-library-sidebar-width: 13.5rem;
  --anp-library-inspector-width: 23rem;
  --anp-manager-sidebar-width: 16rem;
}

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