/**
 * Freshworks Dew theme — authoritative color tokens
 * App: --bg, --surface, --text, --muted, --accent, --accent-bg, --border, --dew-*
 * Crayons: --fw-primary-color, --fw-primary-color-hover, --fw-theme-mode
 */
:root,
[data-theme="light"] {
  --dew-sidebar-bg: #f3f1ff;
  --dew-brand: #6747d4;
  --dew-brand-hover: #5538b8;
  --dew-brand-tint: #ede9fe;
  --dew-primary: #1266f1;
  --dew-primary-hover: #0d52c4;
  --dew-primary-tint: #e8f0fe;
  --dew-text: #12344d;
  --dew-text-secondary: #6b7c93;
  --dew-text-muted: #92a2b1;
  --dew-text-faint: #b3bfca;
  --dew-bg: #eef0f4;
  --dew-surface: #ffffff;
  --dew-surface-subtle: #f8f9fb;
  --dew-surface-faint: #fafbfc;
  --dew-hairline: #f0f2f5;
  --dew-border: #e4e7ec;
  --dew-input-border: #cfd7df;
  --dew-purple: #6747d4;
  --dew-purple-tint: #ede9fe;
  --dew-green: #0aa06e;
  --dew-green-tint: #e4f4ed;
  --dew-amber: #f79009;
  --dew-amber-tint: #fff4e5;
  --dew-red: #e5484d;
  --dew-red-tint: #fdeaea;
  --dew-radius-lg: 14px;
  --dew-shadow-island: 0 2px 8px rgba(18, 52, 77, 0.06);
  --dew-shadow-card: 0 4px 16px rgba(18, 52, 77, 0.08);
  --dew-shadow-popover: 0 12px 40px rgba(18, 52, 77, 0.14);

  --bg: var(--dew-bg);
  --bg-gradient: none;
  --surface: var(--dew-surface);
  --surface-elevated: var(--dew-surface-faint);
  --surface-muted: var(--dew-surface-subtle);
  --border: var(--dew-border);
  --border-soft: rgba(103, 71, 212, 0.1);
  --text: var(--dew-text);
  --muted: var(--dew-text-secondary);
  --accent: var(--dew-brand);
  --accent-hover: var(--dew-brand-hover);
  --accent-soft: var(--dew-brand);
  --accent-bg: var(--dew-brand-tint);
  --teal: var(--dew-primary);
  --teal-bg: var(--dew-primary-tint);
  --warm: var(--dew-amber);
  --warm-hover: #e5484d;
  --warm-bg: var(--dew-amber-tint);
  --green-bg: var(--dew-green-tint);
  --green: var(--dew-green);
  --amber-bg: var(--dew-amber-tint);
  --amber: var(--dew-amber);
  --danger: var(--dew-red);
  --danger-bg: var(--dew-red-tint);
  --shadow-sm: var(--dew-shadow-island);
  --shadow-md: var(--dew-shadow-card);
  --shadow-lift: 0 8px 24px rgba(18, 52, 77, 0.1);
  --input-bg: var(--dew-surface);
  --topbar-bg: var(--dew-surface);
  --footer-bg: var(--dew-bg);
  --splash-bg: linear-gradient(145deg, #6747d4 0%, #5538b8 45%, #12344d 100%);
  --sidebar-w: 248px;

  --fw-primary-color: var(--dew-primary);
  --fw-primary-color-hover: var(--dew-primary-hover);
  --fw-theme-mode: light;

  /* Crayons fw-button semantic tokens → Dew (Freshdesk / Freshservice) */
  --dew-btn-radius: 7px;
  --color-fill-brand: var(--dew-primary);
  --color-fill-semantic-info-bold: var(--dew-primary-hover);
  --color-text-brand: var(--dew-primary);
  --color-text-primary: var(--dew-text);
  --color-text-inverse: #ffffff;
  --color-fill-surface: var(--dew-surface);
  --color-fill-container: var(--dew-surface-subtle);
  --color-boundary-border-mildest: var(--dew-input-border);
  --color-boundary-border-boldest: var(--dew-primary);
  --color-boundary-brand: var(--dew-primary);
  --border-radius-medium: var(--dew-btn-radius);
  --gradient-fill: none;
  --shadow-xs: none;
  --shadow-clicked-button: none;
  --fw-button-active-box-shadow: none;
  --fw-button-hover-background-color: var(--dew-primary-hover);
  --fw-button--lg-focus-border: var(--dew-primary);
}

[data-theme="dark"] {
  --dew-sidebar-bg: #1a1830;
  --dew-brand: #9b7dff;
  --dew-brand-hover: #b49aff;
  --dew-brand-tint: rgba(103, 71, 212, 0.2);
  --dew-primary: #5b8def;
  --dew-primary-hover: #7aa3f5;
  --dew-primary-tint: rgba(18, 102, 241, 0.16);
  --dew-text: #e8eef4;
  --dew-text-secondary: #9fb0c0;
  --dew-text-muted: #7c8ea0;
  --dew-text-faint: #5a7184;
  --dew-bg: #0f1219;
  --dew-surface: #1a2438;
  --dew-surface-subtle: #1e293b;
  --dew-surface-faint: #151d2e;
  --dew-hairline: rgba(148, 163, 184, 0.1);
  --dew-border: rgba(148, 163, 184, 0.18);
  --dew-input-border: rgba(148, 163, 184, 0.28);
  --dew-purple: #9b7dff;
  --dew-purple-tint: rgba(103, 71, 212, 0.18);
  --dew-green: #34d399;
  --dew-green-tint: rgba(10, 160, 110, 0.14);
  --dew-amber: #fbbf24;
  --dew-amber-tint: rgba(247, 144, 9, 0.14);
  --dew-red: #f87171;
  --dew-red-tint: rgba(229, 72, 77, 0.14);
  --dew-shadow-island: 0 2px 8px rgba(0, 0, 0, 0.24);
  --dew-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.32);
  --dew-shadow-popover: 0 12px 40px rgba(0, 0, 0, 0.42);

  --bg: var(--dew-bg);
  --bg-gradient: none;
  --surface: var(--dew-surface);
  --surface-elevated: var(--dew-surface-faint);
  --surface-muted: var(--dew-surface-subtle);
  --border: var(--dew-border);
  --border-soft: rgba(155, 125, 255, 0.14);
  --text: var(--dew-text);
  --muted: var(--dew-text-secondary);
  --accent: var(--dew-brand);
  --accent-hover: var(--dew-brand-hover);
  --accent-soft: var(--dew-brand);
  --accent-bg: var(--dew-brand-tint);
  --teal: var(--dew-primary);
  --teal-bg: var(--dew-primary-tint);
  --warm: var(--dew-amber);
  --warm-bg: var(--dew-amber-tint);
  --green-bg: var(--dew-green-tint);
  --green: var(--dew-green);
  --amber-bg: var(--dew-amber-tint);
  --amber: var(--dew-amber);
  --danger: var(--dew-red);
  --danger-bg: var(--dew-red-tint);
  --shadow-sm: var(--dew-shadow-island);
  --shadow-md: var(--dew-shadow-card);
  --shadow-lift: 0 10px 32px rgba(0, 0, 0, 0.38);
  --input-bg: #111827;
  --topbar-bg: var(--dew-surface);
  --footer-bg: var(--dew-bg);
  --splash-bg: linear-gradient(145deg, #1a1830 0%, #5538b8 40%, #1266f1 100%);

  --fw-primary-color: var(--dew-primary);
  --fw-primary-color-hover: var(--dew-primary-hover);
  --fw-theme-mode: dark;

  --dew-btn-radius: 7px;
  --color-fill-brand: var(--dew-primary);
  --color-fill-semantic-info-bold: var(--dew-primary-hover);
  --color-text-brand: var(--dew-primary);
  --color-text-primary: var(--dew-text);
  --color-text-inverse: #ffffff;
  --color-fill-surface: var(--dew-surface);
  --color-fill-container: var(--dew-surface-subtle);
  --color-boundary-border-mildest: var(--dew-input-border);
  --color-boundary-border-boldest: var(--dew-primary);
  --color-boundary-brand: var(--dew-primary);
  --border-radius-medium: var(--dew-btn-radius);
  --gradient-fill: none;
  --shadow-xs: none;
  --shadow-clicked-button: none;
  --fw-button-active-box-shadow: none;
  --fw-button-hover-background-color: var(--dew-primary-hover);
  --fw-button--lg-focus-border: var(--dew-primary);
}

/* fw-button variants — primary / secondary / link (Dew flat, no mint gradients) */
fw-button[color="primary"] {
  --color-fill-brand: var(--dew-primary);
  --fw-button-hover-background-color: var(--dew-primary-hover);
  --color-text-inverse: #ffffff;
  --gradient-fill: none;
  --shadow-xs: none;
}

fw-button[color="secondary"]:not([fill="clear"]) {
  --color-fill-surface: var(--dew-surface);
  --color-text-primary: var(--dew-text);
  --color-boundary-border-mildest: var(--dew-input-border);
  --gradient-fill: none;
  --shadow-xs: none;
  --fw-button-hover-background-color: var(--dew-surface-subtle);
}

fw-button[color="secondary"][fill="clear"] {
  --color-fill-surface: transparent;
  --color-text-primary: var(--dew-text);
  --color-boundary-border-mildest: transparent;
  --gradient-fill: none;
  --shadow-xs: none;
  --fw-button-hover-background-color: var(--dew-surface-subtle);
}

fw-button[color="link"] {
  --color-text-brand: var(--dew-primary);
  --gradient-fill: none;
  --fw-button-hover-background-color: transparent;
}

/* Sidebar rail collapse pill — neutral surface, no primary blue outline */
fw-button.sidebar-collapse[color="secondary"][fill="clear"] {
  --color-fill-surface: var(--dew-surface);
  --color-boundary-border-mildest: var(--dew-border);
  --color-boundary-border-boldest: var(--dew-border);
  --color-boundary-brand: var(--dew-border);
  --color-text-primary: var(--dew-text-secondary);
  --fw-button-hover-background-color: var(--dew-surface-subtle);
  --fw-button--lg-focus-border: var(--dew-border);
}

body {
  font-family: "Figtree", system-ui, -apple-system, sans-serif;
  color: var(--dew-text);
}

.dew-mono-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dew-text-secondary);
}