/*
 * Capstacker design tokens.
 *
 * Custom properties only, every name prefixed --ds- so nothing collides with the legacy styles.
 * Light palette on :root and on [data-theme="light"] (so a light panel can sit inside a dark
 * page); dark palette under prefers-color-scheme (unless the page opts into light) and under
 * [data-theme="dark"]. Inter is loaded by the page (Google Fonts), not here.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Brand primitives */
  --ds-sage: #e9eeea;
  --ds-white: #ffffff;
  --ds-ink: #1e1e1f;
  --ds-lime: #c7f33c;
  --ds-grey: #858585;
  --ds-border: #b1bbb0;

  /* Semantic */
  --ds-ground: var(--ds-sage);
  --ds-surface: var(--ds-white);
  --ds-surface-subtle: #f7f9f7;
  --ds-text: var(--ds-ink);
  --ds-text-secondary: var(--ds-grey);
  --ds-text-tertiary: #9ca39d;
  --ds-border-subtle: #e3e7e2;
  --ds-inverse: var(--ds-ink);
  --ds-on-inverse: var(--ds-white);
  --ds-on-inverse-muted: rgba(255, 255, 255, 0.64);
  --ds-accent: var(--ds-lime);
  --ds-on-accent: var(--ds-ink);
  --ds-highlight: var(--ds-lime);
  --ds-button-primary-bg: var(--ds-lime);
  --ds-button-primary-text: var(--ds-ink);

  /* Status */
  --ds-status-active-bg: #e3f895;
  --ds-status-active-text: var(--ds-ink);
  --ds-status-pending-bg: #f7f9f7;
  --ds-status-pending-text: #6b706c;
  /* App screens: secondary text that passes AA on white, soft lime for selected cards */
  --ds-text-muted: #646965; /* #6B706C in the design, darkened to pass AA on the sage ground too */
  --ds-accent-soft: #f1fad1;
  --ds-status-action-bg: #fdecec;
  --ds-status-action-text: #b42318;
  --ds-accent-strong: #13753a; /* darkened from #15803D to pass AA on the sage ground */

  /* Status tones for badges and alerts (danger reuses the action pair) */
  --ds-status-success-bg: #e4f4e8;
  --ds-status-success-text: #13753a;
  --ds-status-warning-bg: #fdf1dc;
  --ds-status-warning-text: #8a4b00;
  --ds-status-info-bg: #e7eef6;
  --ds-status-info-text: #2f5a85;
  --ds-status-neutral-bg: #eef0ee;
  --ds-status-neutral-text: #646965;

  /* Overlays and raised surfaces (modals, slide-overs, menus, toasts) */
  --ds-overlay: rgba(30, 30, 31, 0.48);
  --ds-shadow-raised: 0 12px 32px rgba(20, 20, 20, 0.16),
    0 2px 6px rgba(20, 20, 20, 0.08);

  /* Avatar fills */
  --ds-avatar-charcoal: #3d3d3f;
  --ds-avatar-sage: #8a9b8c;
  --ds-avatar-dusty-blue: #6e8ca0;
  --ds-avatar-olive: #9b8f5c;

  /* Focus and elevation */
  --ds-focus-ring: var(--ds-ink);
  --ds-shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04),
    0 1px 3px rgba(20, 20, 20, 0.06);
}

/*
 * Dark palette. The design only defines the marketing palette in dark mode; the dark status colours
 * below are derived from it. Lime, on-accent and the primary button
 * stay the same in both modes. The two blocks must stay identical.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ds-ground: #131313;
    --ds-surface: #1e1e1e;
    --ds-surface-subtle: #262626;
    --ds-inverse: #2a2a2a;
    --ds-border: #3a3a3a;
    --ds-border-subtle: #2e2e2e;
    --ds-text: #f5f5f5;
    --ds-text-secondary: #8a8a8a;
    --ds-text-tertiary: #6f6f6f;
    --ds-on-inverse: #f5f5f5;
    --ds-on-inverse-muted: rgba(245, 245, 245, 0.64);
    --ds-highlight: #333d16;
    --ds-focus-ring: #f5f5f5;
    --ds-status-active-bg: #333d16;
    --ds-status-active-text: #c7f33c;
    --ds-status-pending-bg: #262626;
    --ds-status-pending-text: #a3a3a3;
    --ds-text-muted: #a3a3a3;
    --ds-accent-strong: #c7f33c;
    --ds-accent-soft: #2b3313;
    --ds-status-action-bg: #3b1c1a;
    --ds-status-action-text: #f28b82;
    --ds-status-success-bg: #17301f;
    --ds-status-success-text: #7ddc95;
    --ds-status-warning-bg: #3a2a10;
    --ds-status-warning-text: #f2c46d;
    --ds-status-info-bg: #172636;
    --ds-status-info-text: #8fb8e3;
    --ds-status-neutral-bg: #262626;
    --ds-status-neutral-text: #a3a3a3;
    --ds-overlay: rgba(0, 0, 0, 0.64);
    --ds-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5),
      0 2px 6px rgba(0, 0, 0, 0.32);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --ds-ground: #131313;
  --ds-surface: #1e1e1e;
  --ds-surface-subtle: #262626;
  --ds-inverse: #2a2a2a;
  --ds-border: #3a3a3a;
  --ds-border-subtle: #2e2e2e;
  --ds-text: #f5f5f5;
  --ds-text-secondary: #8a8a8a;
  --ds-text-tertiary: #6f6f6f;
  --ds-on-inverse: #f5f5f5;
  --ds-on-inverse-muted: rgba(245, 245, 245, 0.64);
  --ds-highlight: #333d16;
  --ds-focus-ring: #f5f5f5;
  --ds-status-active-bg: #333d16;
  --ds-status-active-text: #c7f33c;
  --ds-status-pending-bg: #262626;
  --ds-status-pending-text: #a3a3a3;
  --ds-text-muted: #a3a3a3;
  --ds-accent-strong: #c7f33c;
  --ds-accent-soft: #2b3313;
  --ds-status-action-bg: #3b1c1a;
  --ds-status-action-text: #f28b82;
  --ds-status-success-bg: #17301f;
  --ds-status-success-text: #7ddc95;
  --ds-status-warning-bg: #3a2a10;
  --ds-status-warning-text: #f2c46d;
  --ds-status-info-bg: #172636;
  --ds-status-info-text: #8fb8e3;
  --ds-status-neutral-bg: #262626;
  --ds-status-neutral-text: #a3a3a3;
  --ds-overlay: rgba(0, 0, 0, 0.64);
  --ds-shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.32);
}

:root {
  /* Type: Inter only */
  --ds-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --ds-type-display-size: 72px;
  --ds-type-display-leading: 72px;
  --ds-type-display-tracking: -2.9px;
  --ds-type-h2-size: 48px;
  --ds-type-h2-leading: 52px;
  --ds-type-h2-tracking: -1.5px;
  --ds-type-h3-size: 22px;
  --ds-type-h3-leading: 28px;
  --ds-type-body-l-size: 18px;
  --ds-type-body-l-leading: 28px;
  --ds-type-body-size: 16px;
  --ds-type-body-leading: 26px;
  --ds-type-small-size: 14px;
  --ds-type-small-leading: 22px;
  --ds-type-eyebrow-size: 12px;
  --ds-type-eyebrow-leading: 16px;
  --ds-type-eyebrow-tracking: 1.2px;
  --ds-type-button-size: 16px;
  --ds-type-button-leading: 24px;
  --ds-type-caption-size: 12px;
  --ds-type-caption-leading: 16px;
  --ds-type-figure-size: 20px;
  --ds-type-figure-leading: 26px;
  /* App heading and nav link */
  --ds-type-app-h3-size: 18px;
  --ds-type-app-h3-leading: 26px;
  --ds-type-nav-size: 15px;
  --ds-type-nav-leading: 24px;

  /* Spacing: these steps only */
  --ds-space-4: 4px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-120: 120px;
  --ds-section-gap: var(--ds-space-120);

  /* Grid */
  --ds-content-max: 1280px;
  --ds-gutter: 80px;

  /* Radii: these three only */
  --ds-radius-12: 12px;
  --ds-radius-24: 24px;
  --ds-radius-pill: 100px;

  /* Motion */
  --ds-motion-fade: 400ms;
  --ds-motion-hover: 150ms;
  --ds-hover-lift: 2px;
  --ds-hover-tint: 6%;

  /* Layout */
  --ds-onboarding-card-width: 620px;
  --ds-dashboard-main-width: 1120px;
  --ds-dashboard-rail-width: 300px;
  --ds-app-sidebar-width: 272px;

  /* Stacking order */
  --ds-z-sticky: 20;
  --ds-z-dropdown: 40;
  --ds-z-drawer: 80;
  --ds-z-modal: 100;
  --ds-z-toast: 110;
  --ds-z-tour: 120;
}

/* Laptops too (1280 to 1359px): at 72px the hero's longest phrase wraps onto two lines */
@media (max-width: 1359px) {
  :root {
    --ds-type-display-size: 64px;
    --ds-type-display-leading: 64px;
    --ds-type-display-tracking: -2.4px;
    --ds-gutter: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --ds-type-display-size: 44px;
    --ds-type-display-leading: 46px;
    --ds-type-display-tracking: -1.5px;
    --ds-type-h2-size: 34px;
    --ds-type-h2-leading: 38px;
    --ds-type-h2-tracking: -1px;
    --ds-type-h3-size: 20px;
    --ds-type-h3-leading: 26px;
    --ds-type-body-l-size: 16px;
    --ds-type-body-l-leading: 26px;
    --ds-section-gap: var(--ds-space-64);
    --ds-gutter: 20px;
  }
}