/* ==========================================================================
   LCQM Admin — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for the visual language. Every other stylesheet
   in this plugin styles with these variables and never hard-codes a color,
   radius, shadow, or duration.

   Strategy: DARK-FIRST.
   :root defines the dark theme. Light mode is applied when either
     - the OS prefers light AND the user hasn't chosen a theme, or
     - the document is explicitly marked [data-theme="light"].
   An explicit [data-theme="dark"] always forces dark, beating the OS.

   Brand: primary #060b5c (deep indigo), accent #e57a1a (warm orange).
   ========================================================================== */

:root {
  /* ---- Brand (theme-independent) ---------------------------------------- */
  --lcqm-brand-primary: #060b5c;
  --lcqm-brand-primary-600: #0a1178;
  --lcqm-brand-primary-400: #2a35a8;
  --lcqm-brand-accent: #e57a1a;
  --lcqm-brand-accent-600: #cf6a0f;
  --lcqm-brand-accent-400: #f0954a;

  /* ---- Typography ------------------------------------------------------- */
  --lcqm-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --lcqm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --lcqm-text-xs: 0.75rem;
  --lcqm-text-sm: 0.8125rem;
  --lcqm-text-base: 0.875rem;
  --lcqm-text-md: 1rem;
  --lcqm-text-lg: 1.125rem;
  --lcqm-text-xl: 1.375rem;
  --lcqm-text-2xl: 1.75rem;
  --lcqm-text-3xl: 2.25rem;

  --lcqm-font-normal: 400;
  --lcqm-font-medium: 500;
  --lcqm-font-semibold: 600;
  --lcqm-font-bold: 700;

  --lcqm-leading-tight: 1.25;
  --lcqm-leading-normal: 1.5;
  --lcqm-leading-relaxed: 1.7;

  /* ---- Spacing scale (4px base) — generous whitespace ------------------- */
  --lcqm-space-1: 0.25rem;
  --lcqm-space-2: 0.5rem;
  --lcqm-space-3: 0.75rem;
  --lcqm-space-4: 1rem;
  --lcqm-space-5: 1.5rem;
  --lcqm-space-6: 2rem;
  --lcqm-space-7: 3rem;
  --lcqm-space-8: 4rem;

  /* ---- Radius — soft, rounded ------------------------------------------- */
  --lcqm-radius-xs: 4px;
  --lcqm-radius-sm: 6px;
  --lcqm-radius-md: 10px;
  --lcqm-radius-lg: 14px;
  --lcqm-radius-xl: 20px;
  --lcqm-radius-full: 9999px;

  /* ---- Motion — subtle, quick ------------------------------------------- */
  --lcqm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --lcqm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lcqm-duration-fast: 120ms;
  --lcqm-duration: 180ms;
  --lcqm-duration-slow: 280ms;

  /* ---- Focus ring ------------------------------------------------------- */
  --lcqm-ring-width: 3px;

  /* ======================================================================
     DARK THEME (default)
     ====================================================================== */
  --lcqm-bg: #0b0d17;
  --lcqm-bg-subtle: #10131f;
  --lcqm-surface: #161a29;
  --lcqm-surface-raised: #1d2133;
  --lcqm-surface-hover: #232840;
  --lcqm-border: #272c40;
  --lcqm-border-strong: #353b54;

  --lcqm-text: #eef1f7;
  --lcqm-text-muted: #a6adc4;
  --lcqm-text-subtle: #6f7793;
  --lcqm-text-on-primary: #ffffff;
  --lcqm-text-on-accent: #1a0f00;

  /* Brand surfaces adapted for dark backgrounds */
  --lcqm-primary: #4a57d6;
  --lcqm-primary-hover: #5d69e0;
  --lcqm-primary-soft: rgba(74, 87, 214, 0.14);
  --lcqm-accent: #f0954a;
  --lcqm-accent-hover: #f4a869;
  --lcqm-accent-soft: rgba(240, 149, 74, 0.14);

  --lcqm-focus-ring: rgba(74, 87, 214, 0.5);

  /* Semantic status */
  --lcqm-success: #3fbf7f;
  --lcqm-success-soft: rgba(63, 191, 127, 0.14);
  --lcqm-warning: #e5b34a;
  --lcqm-warning-soft: rgba(229, 179, 74, 0.14);
  --lcqm-danger: #f0656b;
  --lcqm-danger-soft: rgba(240, 101, 107, 0.14);
  --lcqm-info: #4aa8f0;
  --lcqm-info-soft: rgba(74, 168, 240, 0.14);

  /* Elevation — subtle shadows */
  --lcqm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lcqm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --lcqm-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --lcqm-shadow-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

/* ==========================================================================
   LIGHT THEME
   Applied via OS preference (when no explicit choice) or [data-theme="light"].
   ========================================================================== */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lcqm-bg: #f6f7fb;
    --lcqm-bg-subtle: #eef0f6;
    --lcqm-surface: #ffffff;
    --lcqm-surface-raised: #ffffff;
    --lcqm-surface-hover: #f2f4fa;
    --lcqm-border: #e4e7f0;
    --lcqm-border-strong: #d2d7e6;

    --lcqm-text: #10131f;
    --lcqm-text-muted: #565d78;
    --lcqm-text-subtle: #8a91ab;
    --lcqm-text-on-primary: #ffffff;
    --lcqm-text-on-accent: #ffffff;

    --lcqm-primary: #060b5c;
    --lcqm-primary-hover: #0a1178;
    --lcqm-primary-soft: rgba(6, 11, 92, 0.07);
    --lcqm-accent: #e57a1a;
    --lcqm-accent-hover: #cf6a0f;
    --lcqm-accent-soft: rgba(229, 122, 26, 0.1);

    --lcqm-focus-ring: rgba(6, 11, 92, 0.35);

    --lcqm-success: #1f9d5f;
    --lcqm-success-soft: rgba(31, 157, 95, 0.1);
    --lcqm-warning: #c98a1a;
    --lcqm-warning-soft: rgba(201, 138, 26, 0.12);
    --lcqm-danger: #d63a41;
    --lcqm-danger-soft: rgba(214, 58, 65, 0.1);
    --lcqm-info: #1a7fd6;
    --lcqm-info-soft: rgba(26, 127, 214, 0.1);

    --lcqm-shadow-sm: 0 1px 2px rgba(16, 19, 31, 0.06);
    --lcqm-shadow-md: 0 4px 16px rgba(16, 19, 31, 0.08);
    --lcqm-shadow-lg: 0 12px 40px rgba(16, 19, 31, 0.12);
    --lcqm-shadow-ring: inset 0 0 0 1px rgba(16, 19, 31, 0.02);

    color-scheme: light;
  }
}

/* Explicit manual override — user's chosen theme always wins over the OS. */
:root[data-theme="light"] {
  --lcqm-bg: #f6f7fb;
  --lcqm-bg-subtle: #eef0f6;
  --lcqm-surface: #ffffff;
  --lcqm-surface-raised: #ffffff;
  --lcqm-surface-hover: #f2f4fa;
  --lcqm-border: #e4e7f0;
  --lcqm-border-strong: #d2d7e6;

  --lcqm-text: #10131f;
  --lcqm-text-muted: #565d78;
  --lcqm-text-subtle: #8a91ab;
  --lcqm-text-on-primary: #ffffff;
  --lcqm-text-on-accent: #ffffff;

  --lcqm-primary: #060b5c;
  --lcqm-primary-hover: #0a1178;
  --lcqm-primary-soft: rgba(6, 11, 92, 0.07);
  --lcqm-accent: #e57a1a;
  --lcqm-accent-hover: #cf6a0f;
  --lcqm-accent-soft: rgba(229, 122, 26, 0.1);

  --lcqm-focus-ring: rgba(6, 11, 92, 0.35);

  --lcqm-success: #1f9d5f;
  --lcqm-success-soft: rgba(31, 157, 95, 0.1);
  --lcqm-warning: #c98a1a;
  --lcqm-warning-soft: rgba(201, 138, 26, 0.12);
  --lcqm-danger: #d63a41;
  --lcqm-danger-soft: rgba(214, 58, 65, 0.1);
  --lcqm-info: #1a7fd6;
  --lcqm-info-soft: rgba(26, 127, 214, 0.1);

  --lcqm-shadow-sm: 0 1px 2px rgba(16, 19, 31, 0.06);
  --lcqm-shadow-md: 0 4px 16px rgba(16, 19, 31, 0.08);
  --lcqm-shadow-lg: 0 12px 40px rgba(16, 19, 31, 0.12);
  --lcqm-shadow-ring: inset 0 0 0 1px rgba(16, 19, 31, 0.02);

  color-scheme: light;
}

/* Respect users who ask for reduced motion — disable transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lcqm-duration-fast: 0ms;
    --lcqm-duration: 0ms;
    --lcqm-duration-slow: 0ms;
  }
}