/* Mulan Theme — mirrored from
   projects/mulanai/frontend/mulanai-hk/packages/utils/src/styles/theme.css
   Drift = bug. Update from Figma → that file → here.
   See projects/mulanai/knowledge/tech/frontend/design-system/foundations/colors.md */

:root {
  /* Text */
  --mulan-text-primary:   oklch(0.13 0 0);        /* #131414 */
  --mulan-text-secondary: oklch(0.25 0.01 250);   /* #35383C */
  --mulan-text-tertiary:  oklch(0.42 0.01 250);   /* #5B6067 */
  --mulan-text-muted:     oklch(0.75 0.01 250);   /* #B1B5BC */
  --mulan-text-subtle:    oklch(0.72 0.02 250);   /* #A8AFBA */
  --mulan-text-disabled:  oklch(0.58 0 0);

  /* Background */
  --mulan-bg-primary:   oklch(1 0 0);             /* #FFFFFF */
  --mulan-bg-secondary: oklch(0.98 0 0);          /* #F9F9F9 */
  --mulan-bg-tertiary:  oklch(0.97 0 0);          /* #F4F5F6 */
  --mulan-bg-elevated:  oklch(0.96 0.01 260);     /* #EFF2F9 */
  --mulan-bg-hover:     oklch(0.95 0 0);          /* #F0F1F3 */
  --mulan-bg-dark:      oklch(0.25 0.01 250);     /* #35383C */
  --mulan-bg-darker:    oklch(0.28 0.01 250);
  --mulan-bg-darkest:   oklch(0.13 0 0);

  /* Accent */
  --mulan-accent-purple:   oklch(0.55 0.24 280);  /* #725EFF */
  --mulan-accent-blue:     oklch(0.52 0.22 260);  /* #006CF6 */
  --mulan-accent-blue-alt: oklch(0.6 0.18 255);

  /* Status */
  --mulan-status-success:    oklch(0.6 0.18 145); /* #2EAC36 */
  --mulan-status-success-bg: rgba(46, 172, 54, 0.1);
  --mulan-status-error:      oklch(0.6 0.2 25);   /* #F45555 */
  --mulan-status-error-bg:   oklch(0.95 0.03 20); /* #FFE8E8 */
  --mulan-status-warning:    oklch(0.7 0.18 60);  /* #FF9000 */

  /* Border / Divider */
  --mulan-border-default: oklch(0.91 0 0);        /* #E5E5E5 */
  --mulan-border-subtle:  oklch(0.88 0 0);        /* #DBDBDE */
  --mulan-divider:        oklch(0.35 0.02 260);

  /* Radii */
  --radius-sm: 0.25rem;   /* 4 */
  --radius-md: 0.375rem;  /* 6 */
  --radius:    0.5rem;    /* 8 — default */
  --radius-lg: 0.75rem;   /* 12 */
  --radius-xl: 1rem;      /* 16 — Dialog */

  /* Shadows — layered on rgba(19,20,20,...) (Mulan darkest, never pure black).
     See examples/login.html for the source. */
  --shadow-sm:
    0 1px 1px rgba(19, 20, 20, 0.04),
    0 1px 2px rgba(19, 20, 20, 0.05);
  --shadow-md:
    0 1px 2px rgba(19, 20, 20, 0.05),
    0 2px 4px rgba(19, 20, 20, 0.04),
    0 4px 8px rgba(19, 20, 20, 0.03);
  --shadow-lg:
    0 1px 2px rgba(19, 20, 20, 0.04),
    0 4px 8px rgba(19, 20, 20, 0.04),
    0 12px 24px rgba(19, 20, 20, 0.05);
  --shadow-xl:
    0 2px 4px rgba(19, 20, 20, 0.04),
    0 8px 16px rgba(19, 20, 20, 0.04),
    0 24px 48px rgba(19, 20, 20, 0.06);
  --shadow-focus:     0 0 0 3px oklch(0.55 0.24 280 / 0.28);
  --shadow-focus-err: 0 0 0 3px oklch(0.6 0.2 25 / 0.28);

  /* Motion */
  --dur-press: 140ms;
  --dur-state: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);

  /* Font */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ============================================================
   Dark mode — follows OS preference automatically (no JS).
   Values mirrored from mulanai-hk packages/utils/src/styles/theme.css `.dark` block.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* Text */
    --mulan-text-primary:   oklch(0.93 0 0);
    --mulan-text-secondary: oklch(0.90 0 0);
    --mulan-text-tertiary:  oklch(0.68 0 0);
    --mulan-text-muted:     oklch(0.50 0 0);
    --mulan-text-subtle:    oklch(0.55 0 0);
    --mulan-text-disabled:  oklch(0.58 0 0);

    /* Background */
    --mulan-bg-primary:   oklch(0.10 0 0);
    --mulan-bg-secondary: oklch(0.14 0 0);
    --mulan-bg-tertiary:  oklch(0.20 0 0);
    --mulan-bg-elevated:  oklch(0.18 0.01 260);
    --mulan-bg-hover:     oklch(0.24 0 0);
    --mulan-bg-dark:      oklch(0.90 0 0);
    --mulan-bg-darker:    oklch(0.85 0 0);
    --mulan-bg-darkest:   oklch(0.95 0 0);

    /* Accent (slightly brighter for dark surfaces) */
    --mulan-accent-purple:   oklch(0.62 0.22 280);
    --mulan-accent-blue:     oklch(0.60 0.20 255);
    --mulan-accent-blue-alt: oklch(0.68 0.16 255);

    /* Status */
    --mulan-status-success:    oklch(0.68 0.16 145);
    --mulan-status-success-bg: oklch(0.22 0.05 145);
    --mulan-status-error:      oklch(0.68 0.18 20);
    --mulan-status-error-bg:   oklch(0.22 0.05 20);
    --mulan-status-warning:    oklch(0.75 0.16 60);

    /* Border / Divider */
    --mulan-border-default: oklch(0.26 0 0);
    --mulan-border-subtle:  oklch(0.30 0 0);
    --mulan-divider:        oklch(0.42 0.02 260);

    /* Shadows: pure rgba(0,0,0,...) reads better on dark surfaces than the
       Mulan-darkest tint used in light mode. */
    --shadow-sm:
      0 1px 1px rgba(0, 0, 0, 0.30),
      0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md:
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 2px 4px rgba(0, 0, 0, 0.25),
      0 4px 8px rgba(0, 0, 0, 0.20);
    --shadow-lg:
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 4px 8px rgba(0, 0, 0, 0.25),
      0 12px 24px rgba(0, 0, 0, 0.30);
    --shadow-xl:
      0 2px 4px rgba(0, 0, 0, 0.30),
      0 8px 16px rgba(0, 0, 0, 0.30),
      0 24px 48px rgba(0, 0, 0, 0.40);

    /* Focus rings: track dark-mode accent/status palette + bump alpha for visibility on dark surfaces */
    --shadow-focus:     0 0 0 3px oklch(0.62 0.22 280 / 0.40);
    --shadow-focus-err: 0 0 0 3px oklch(0.68 0.18 20 / 0.40);
  }
}

/* Global resets aligned with mulanai-hk */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--mulan-text-primary);
  background: var(--mulan-bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-feature-settings: "cv11" 1, "ss01" 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}