/**
 * SE Labs theme — warm cream + teal accent (from SE Labs Portal design)
 * 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: #f2ede3;
  --dew-brand: #2e897b;
  --dew-brand-hover: #256f63;
  --dew-brand-tint: #e3efec;
  --dew-primary: #6fb8ac;
  --dew-primary-hover: #5da79a;
  --dew-primary-tint: #f0f7f5;
  --dew-text: #2b2926;
  --dew-text-secondary: #6f6759;
  --dew-text-muted: #8a8072;
  --dew-text-faint: #a49a88;
  --dew-bg: #fdfcfa;
  --dew-surface: #ffffff;
  --dew-surface-subtle: #faf8f4;
  --dew-surface-faint: #f6f3ee;
  --dew-hairline: #f4f0e8;
  --dew-border: #ece7de;
  --dew-input-border: #ddd4c4;
  --dew-purple: #2e897b;
  --dew-purple-tint: #e3efec;
  --dew-green: #4a7a5c;
  --dew-green-tint: #e9f1e9;
  --dew-amber: #b5831f;
  --dew-amber-tint: #f8efdf;
  --dew-red: #b8544a;
  --dew-red-tint: #f4e7df;
  --dew-teal: #2f8a7b;
  --dew-teal-tint: #e3efec;
  --dew-sand-tint: #f3ecda;
  --dew-clay-tint: #f4e7df;
  --dew-radius-lg: 14px;
  --dew-shadow-island: 0 1px 2px rgba(43, 41, 38, 0.03);
  --dew-shadow-card: 0 2px 8px rgba(43, 41, 38, 0.06);
  --dew-shadow-popover: 0 12px 40px rgba(43, 41, 38, 0.12);

  --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: #f4f0e8;
  --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-brand);
  --teal-bg: var(--dew-primary-tint);
  --warm: var(--dew-amber);
  --warm-hover: #a9782a;
  --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(43, 41, 38, 0.08);
  --input-bg: var(--dew-surface);
  --topbar-bg: var(--dew-surface);
  --footer-bg: var(--dew-bg);
  --splash-bg: var(--dew-bg);
  --splash-glow: color-mix(in srgb, var(--dew-brand) 12%, transparent);
  --sidebar-w: 250px;

  --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: 9px;
  --color-fill-brand: var(--dew-primary);
  --color-fill-semantic-info-bold: var(--dew-primary-hover);
  --color-text-brand: var(--dew-brand);
  --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-brand);
  --color-boundary-brand: var(--dew-brand);
  --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-brand);
}

[data-theme="dark"] {
  --dew-sidebar-bg: #1e1c19;
  --dew-brand: #6fb8ac;
  --dew-brand-hover: #8ecfc4;
  --dew-brand-tint: rgba(47, 138, 123, 0.18);
  --dew-primary: #6fb8ac;
  --dew-primary-hover: #8ecfc4;
  --dew-primary-tint: rgba(111, 184, 172, 0.14);
  --dew-text: #f0ebe3;
  --dew-text-secondary: #b0a898;
  --dew-text-muted: #8a8072;
  --dew-text-faint: #6f6759;
  --dew-bg: #141210;
  --dew-surface: #1f1c18;
  --dew-surface-subtle: #252219;
  --dew-surface-faint: #1a1815;
  --dew-hairline: rgba(236, 231, 222, 0.08);
  --dew-border: rgba(236, 231, 222, 0.14);
  --dew-input-border: rgba(236, 231, 222, 0.22);
  --dew-purple: #6fb8ac;
  --dew-purple-tint: rgba(47, 138, 123, 0.16);
  --dew-green: #6daa7e;
  --dew-green-tint: rgba(74, 122, 92, 0.16);
  --dew-amber: #d4a04a;
  --dew-amber-tint: rgba(181, 131, 31, 0.14);
  --dew-red: #d46a60;
  --dew-red-tint: rgba(184, 84, 74, 0.14);
  --dew-teal: #6fb8ac;
  --dew-teal-tint: rgba(47, 138, 123, 0.16);
  --dew-sand-tint: rgba(165, 136, 63, 0.12);
  --dew-clay-tint: rgba(176, 120, 91, 0.12);
  --dew-shadow-island: 0 1px 2px rgba(0, 0, 0, 0.28);
  --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(236, 231, 222, 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-brand);
  --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: #1a1815;
  --topbar-bg: var(--dew-surface);
  --footer-bg: var(--dew-bg);
  --splash-bg: var(--dew-bg);
  --splash-glow: color-mix(in srgb, var(--dew-brand) 16%, transparent);

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

  --dew-btn-radius: 9px;
  --color-fill-brand: var(--dew-primary);
  --color-fill-semantic-info-bold: var(--dew-primary-hover);
  --color-text-brand: var(--dew-brand);
  --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-brand);
  --color-boundary-brand: var(--dew-brand);
  --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-brand);
}

/* fw-button variants */
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: #ebe5da;
}

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

/* Crayons form surfaces */
fw-input,
fw-textarea,
fw-select {
  --fw-label-color: var(--dew-text);
  --fw-hint-color: var(--dew-text-muted);
  --fw-error-color: var(--dew-red);
  --fw-warning-color: var(--dew-amber);
  --fw-input-border-radius: var(--dew-btn-radius);
}

/* Crayons loading and feedback — orbit spinner in orbit-spinner.css; fw-button loading uses Crayons default */
fw-skeleton {
  --fw-skeleton-background: var(--dew-hairline);
  --fw-skeleton-sheen-color: var(--dew-border);
  --fw-skeleton-border-radius: var(--dew-btn-radius);
}

fw-inline-message {
  --fw-inline-message-border-radius: var(--dew-btn-radius);
}

/* Crayons overlays and navigation surfaces */
fw-tabs,
fw-modal,
fw-tooltip {
  --fw-tabs-border-color: var(--dew-border);
  --fw-modal-background-color: var(--dew-surface);
  --fw-modal-border-color: var(--dew-border);
  --fw-tooltip-background-color: var(--dew-text);
  --fw-tooltip-color: var(--dew-surface);
}

/* 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: #ebe5da;
  --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);
}