/*
 * Magneto token overlay for the real Cal.diy application.
 *
 * Load this after Cal's globals.css. It changes Cal's semantic tokens and
 * primitive states while leaving Cal's DOM, routes, layout, and components in
 * place. The .magneto-cal-surface hook is useful when the app is mounted in a
 * shell or iframe; the root selectors keep the overlay useful in a standalone
 * Cal preview too.
 */

/* Next development diagnostics stay in the console, outside the product preview. */

:root,
:host,
.magneto-cal-surface,
.magneto-cal-surface :where(.dark) {
  color-scheme: dark;

  /* Coss UI semantic tokens (the current Cal login/app primitives). */
  --background: #0a0f12;
  --foreground: #ece5da;
  --card: #12181c;
  --card-foreground: #ece5da;
  --popover: #11181c;
  --popover-foreground: #ece5da;
  --primary: #ff9a16;
  --primary-foreground: #130c02;
  --secondary: #151c21;
  --secondary-foreground: #ece5da;
  --muted: #12181c;
  --muted-foreground: #9e978c;
  --accent: #151c21;
  --accent-foreground: #ece5da;
  --destructive: #cc1225;
  --destructive-foreground: #ff9aa4;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.08);
  --ring: #ff9a16;
  --sidebar: #11181c;
  --sidebar-foreground: #ece5da;
  --sidebar-primary: #ff9a16;
  --sidebar-primary-foreground: #130c02;
  --sidebar-accent: #151c21;
  --sidebar-accent-foreground: #ece5da;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #ff9a16;

  /* Cal semantic backgrounds -> Magneto surfaces. */
  --cal-bg: #0a0f12;
  --cal-bg-emphasis: #151c21;
  --cal-bg-subtle: #12181c;
  --cal-bg-muted: #11181c;
  --cal-bg-inverted: #ece5da;
  --cal-bg-primary: #ff9a16 !important;
  --cal-bg-primary-emphasis: #ffc165 !important;
  --cal-bg-primary-muted: rgba(255, 154, 22, 0.12) !important;
  --cal-bg-brand: #ff9a16 !important;
  --cal-bg-brand-emphasis: #ffc165 !important;
  --cal-bg-brand-muted: rgba(255, 154, 22, 0.12) !important;

  /* Cal semantic borders. */
  --cal-border: rgba(255, 255, 255, 0.08);
  --cal-border-emphasis: rgba(255, 255, 255, 0.16);
  --cal-border-subtle: rgba(255, 255, 255, 0.05);
  --cal-border-muted: rgba(255, 255, 255, 0.04);
  --cal-border-booker: rgba(255, 255, 255, 0.08);
  --cal-border-error: rgba(204, 18, 37, 0.45);
  --cal-border-semantic-error: rgba(204, 18, 37, 0.45);
  --cal-border-semantic-attention-subtle: rgba(255, 154, 22, 0.42);
  --cal-border-semantic-error-subtle: rgba(204, 18, 37, 0.45);

  /* Cal semantic text. */
  --cal-text-emphasis: #ffffff;
  --cal-text: #ece5da;
  --cal-text-default: #ece5da;
  --cal-text-subtle: #b5aea3;
  --cal-text-muted: #9e978c;
  --cal-text-inverted: #0a0f12;
  --cal-brand: #ff9a16 !important;
  --cal-brand-emphasis: #ffc165 !important;
  --cal-brand-subtle: #9e978c;
  --cal-brand-accent: #130c02 !important;
  --cal-brand-text: #130c02 !important;

  /* Semantic status roles retain Cal's vocabulary. */
  --cal-bg-semantic-info-subtle: rgba(59, 130, 246, 0.14);
  --cal-bg-semantic-info-emphasis: #3b82f6;
  --cal-bg-semantic-success-subtle: rgba(60, 185, 60, 0.12);
  --cal-bg-semantic-success-emphasis: #3cb93c;
  --cal-bg-semantic-attention-subtle: rgba(255, 154, 22, 0.12);
  --cal-bg-semantic-attention-emphasis: #ff9a16;
  --cal-bg-semantic-error-subtle: rgba(204, 18, 37, 0.12);
  --cal-bg-semantic-error-emphasis: #cc1225;
  --cal-bg-info: rgba(59, 130, 246, 0.14);
  --cal-bg-success: rgba(60, 185, 60, 0.12);
  --cal-bg-attention: rgba(255, 154, 22, 0.12);
  --cal-bg-error: rgba(204, 18, 37, 0.12);
  --cal-bg-dark-error: #cc1225;
  --cal-text-semantic-info: #7da7ff;
  --cal-text-semantic-success: #72d572;
  --cal-text-semantic-attention: #ffc165;
  --cal-text-semantic-error: #ff7b88;
  --cal-text-info: #9ec0ff;
  --cal-text-success: #8add8a;
  --cal-text-attention: #ffc165;
  --cal-text-error: #ff9aa4;

  /* Cal's shared primitives. */
  --radius: 9px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 9px;
  --radius-2xl: 9px;
  --radius-3xl: 9px;
  --font-cal: "area-variable", sans-serif !important;
  --font-sans: "area-variable", sans-serif !important;
  --brand-color: #ff9a16 !important;
  --brand-text-color: #130c02 !important;
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.36);
  --shadow-elevation-low: 0 4px 14px rgba(0, 0, 0, 0.24);
}

/* The overlay must win over Cal's built-in .dark variable block. */
.dark,
.magneto-cal-surface.dark,
.magneto-cal-surface .dark {
  --background: #0a0f12;
  --foreground: #ece5da;
  --card: #12181c;
  --card-foreground: #ece5da;
  --popover: #11181c;
  --popover-foreground: #ece5da;
  --primary: #ff9a16;
  --primary-foreground: #130c02;
  --secondary: #151c21;
  --secondary-foreground: #ece5da;
  --muted: #12181c;
  --muted-foreground: #9e978c;
  --accent: #151c21;
  --accent-foreground: #ece5da;
  --destructive: #cc1225;
  --destructive-foreground: #ff9aa4;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.08);
  --ring: #ff9a16;
  --sidebar: #11181c;
  --sidebar-foreground: #ece5da;
  --sidebar-primary: #ff9a16;
  --sidebar-primary-foreground: #130c02;
  --sidebar-accent: #151c21;
  --sidebar-accent-foreground: #ece5da;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #ff9a16;
  --cal-bg: #0a0f12;
  --cal-bg-emphasis: #151c21;
  --cal-bg-subtle: #12181c;
  --cal-bg-muted: #11181c;
  --cal-bg-inverted: #ece5da;
  --cal-bg-primary: #ff9a16 !important;
  --cal-bg-primary-emphasis: #ffc165 !important;
  --cal-bg-primary-muted: rgba(255, 154, 22, 0.12) !important;
  --cal-bg-brand: #ff9a16 !important;
  --cal-bg-brand-emphasis: #ffc165 !important;
  --cal-bg-brand-muted: rgba(255, 154, 22, 0.12) !important;
  --cal-border: rgba(255, 255, 255, 0.08);
  --cal-border-emphasis: rgba(255, 255, 255, 0.16);
  --cal-border-subtle: rgba(255, 255, 255, 0.05);
  --cal-border-muted: rgba(255, 255, 255, 0.04);
  --cal-text-emphasis: #ffffff;
  --cal-text: #ece5da;
  --cal-text-default: #ece5da;
  --cal-text-subtle: #b5aea3;
  --cal-text-muted: #9e978c;
  --cal-text-inverted: #0a0f12;
  --cal-brand: #ff9a16 !important;
  --cal-brand-emphasis: #ffc165 !important;
  --cal-brand-subtle: #9e978c;
  --cal-brand-accent: #130c02 !important;
  --cal-brand-text: #130c02 !important;
}

/* Native Cal primitives, identified from packages/ui and the token theme. */
.magneto-cal-surface,
.magneto-cal-surface body,
.magneto-cal-surface main,
.magneto-cal-surface [class~="bg-default"] {
  background-color: var(--cal-bg);
  color: var(--cal-text);
  font-family: var(--font-cal);
}

.magneto-cal-surface [class~="bg-subtle"],
.magneto-cal-surface [class~="bg-cal-muted"],
.magneto-cal-surface [class~="bg-emphasis"] {
  background-color: var(--cal-bg-subtle);
}

.magneto-cal-surface [class~="border-default"],
.magneto-cal-surface [class~="border-subtle"],
.magneto-cal-surface [class~="border-muted"] {
  border-color: var(--cal-border);
}

.magneto-cal-surface [class~="text-default"],
.magneto-cal-surface [class~="text-emphasis"] { color: var(--cal-text); }
.magneto-cal-surface [class~="text-subtle"],
.magneto-cal-surface [class~="text-muted"] { color: var(--cal-text-muted); }

/* Button.tsx color variants: primary, secondary, minimal, destructive. */
.magneto-cal-surface [class~="bg-brand-default"] {
  background-color: var(--cal-brand);
  color: var(--cal-brand-text);
}
@media (hover: hover) and (pointer: fine) {
  .magneto-cal-surface [class~="bg-brand-default"]:hover {
    background-color: var(--cal-brand-emphasis);
  }
  .magneto-cal-surface [class~="bg-default"]:is(button, a):hover,
  .magneto-cal-surface [class~="bg-subtle"]:is(button, a):hover {
    background-color: var(--cal-bg-emphasis);
  }
}
.magneto-cal-surface button:focus-visible,
.magneto-cal-surface a:focus-visible,
.magneto-cal-surface input:focus-visible,
.magneto-cal-surface select:focus-visible,
.magneto-cal-surface textarea:focus-visible {
  outline: 2px solid var(--cal-brand);
  outline-offset: 2px;
}

/* Preserve Cal controls and layout; only tune their native visual roles. */
.magneto-cal-surface input,
.magneto-cal-surface select,
.magneto-cal-surface textarea {
  border-color: var(--cal-border);
  background-color: var(--cal-bg-subtle);
  color: var(--cal-text);
  border-radius: var(--radius);
}

.magneto-cal-surface [role="dialog"],
.magneto-cal-surface [data-radix-popper-content-wrapper] > *,
.magneto-cal-surface [data-testid="card-container"] {
  background-color: var(--cal-bg-subtle);
  border-color: var(--cal-border);
  color: var(--cal-text);
  border-radius: var(--radius-lg);
}