/* Darn Good Ship — design tokens v1.0.0
   Generated from tokens.json. Do not edit values here by hand. */

:root {
  /* — brand ramps — */
  --dgs-teal-100: #eafff7;
  --dgs-teal-200: #d2f6ec;
  --dgs-teal-300: #a8e6dd;
  --dgs-teal-400: #6fcbc6;
  --dgs-teal-500: #49beb7;
  --dgs-teal-600: #389c96;
  --dgs-teal-700: #2b7d78;
  --dgs-teal-800: #1f5e5b;
  --dgs-teal-900: #133f3e;

  --dgs-coral-100: #fff4ef;
  --dgs-coral-200: #ffdfd2;
  --dgs-coral-300: #ffc4ab;
  --dgs-coral-400: #ffa17a;
  --dgs-coral-500: #f5825b;
  --dgs-coral-600: #d96540;
  --dgs-coral-700: #b04d2d;
  --dgs-coral-800: #84391f;
  --dgs-coral-900: #562513;

  --dgs-neutral-50: #f8fafa;
  --dgs-neutral-100: #eff3f3;
  --dgs-neutral-200: #e4e9e9;
  --dgs-neutral-300: #d6d6d6;
  --dgs-neutral-400: #b4bcbb;
  --dgs-neutral-500: #8c9695;
  --dgs-neutral-600: #67716f;
  --dgs-neutral-700: #495251;
  --dgs-neutral-800: #2d3534;
  --dgs-neutral-900: #111111;

  /* — status ramps — */
  --dgs-success-100: #e7f8f0;
  --dgs-success-300: #8fddc4;
  --dgs-success-500: #0eb98c;
  --dgs-success-700: #078664;
  --dgs-success-900: #04372a;

  --dgs-error-100: #fdedf0;
  --dgs-error-300: #f4b7c3;
  --dgs-error-500: #d33a5a;
  --dgs-error-700: #97203a;
  --dgs-error-900: #4e0f1d;

  --dgs-info-100: #eafff7;
  --dgs-info-300: #a8e6dd;
  --dgs-info-500: #1f5e5b;
  --dgs-info-700: #164644;
  --dgs-info-900: #0c2827;

  /* — semantic roles — */
  --dgs-bg-page: #f8fafa;
  --dgs-bg-surface: #ffffff;
  --dgs-bg-subtle: #eff3f3;
  --dgs-bg-brand-subtle: #eafff7;
  --dgs-bg-brand: #49beb7;
  --dgs-bg-inverse: #111111;
  --dgs-text-primary: #111111;
  --dgs-text-secondary: #495251;
  --dgs-text-muted: #67716f;
  --dgs-text-brand: #2b7d78;
  --dgs-text-on-brand: #111111;
  --dgs-text-disabled: #b4bcbb;
  --dgs-border-subtle: #e4e9e9;
  --dgs-border-default: #d6d6d6;
  --dgs-border-strong: #8c9695;
  --dgs-border-brand: #49beb7;
  --dgs-brand-hover: #389c96;
  --dgs-brand-pressed: #2b7d78;
  --dgs-accent-hover: #f5825b;
  --dgs-accent-pressed: #d96540;
  --dgs-focus-ring: #1f5e5b;

  /* — chart series — */
  --dgs-chart-series1: #49beb7;
  --dgs-chart-series2: #1f5e5b;
  --dgs-chart-series3: #a8e6dd;
  --dgs-chart-series4: #0eb98c;
  --dgs-chart-series5: #8c9695;
  --dgs-chart-highlight: #ffa17a;

  /* — type — */
  --dgs-font-title: "Dolce Vita Heavy", "Open Sans", system-ui, sans-serif;
  --dgs-font-subtitle: "Noto Sans", system-ui, sans-serif;
  --dgs-font-heading: "Open Sans", system-ui, sans-serif;
  --dgs-font-section: "Plat Nomor", "Open Sans", system-ui, sans-serif;
  --dgs-font-body: "Noto Sans", system-ui, sans-serif;
  --dgs-font-caption: "Open Sans", system-ui, sans-serif;

  --dgs-size-title: 42px;
  --dgs-size-subtitle: 36px;
  --dgs-size-heading: 32px;
  --dgs-size-subheading: 24px;
  --dgs-size-sectionHeader: 20px;
  --dgs-size-body: 16px;
  --dgs-size-quote: 16px;
  --dgs-size-caption: 14px;

  --dgs-leading-tight: 1.15;
  --dgs-leading-heading: 1.2;
  --dgs-leading-body: 1.6;

  /* — space — */
  --dgs-space-1: 4px;
  --dgs-space-2: 8px;
  --dgs-space-3: 12px;
  --dgs-space-4: 16px;
  --dgs-space-6: 24px;
  --dgs-space-8: 32px;
  --dgs-space-12: 48px;
  --dgs-space-16: 64px;
  --dgs-space-24: 96px;

  /* — radius, border, elevation — */
  --dgs-radius-sm: 2px;
  --dgs-radius-md: 4px;
  --dgs-border-hairline: 1px;
  --dgs-shadow-raised: 0 1px 2px rgba(17,17,17,.08);
  --dgs-shadow-overlay: 0 6px 18px rgba(17,17,17,.10);

  /* — layout — */
  --dgs-container-content: 1200px;
  --dgs-container-text: 720px;
  --dgs-gutter: 24px;
  --dgs-touch-target: 44px;

  /* — motion — */
  --dgs-duration-instant: 90ms;
  --dgs-duration-quick: 160ms;
  --dgs-duration-base: 240ms;
  --dgs-duration-slow: 360ms;
  --dgs-duration-loop: 1200ms;
  --dgs-ease-instant: cubic-bezier(.4,0,.6,1);
  --dgs-ease-standard: cubic-bezier(.2,0,.2,1);
  --dgs-ease-emphasized: cubic-bezier(.2,0,0,1);
  --dgs-ease-loop: linear;
}

/* Focus is themed, never the browser default. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dgs-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dgs-duration-instant: 1ms; --dgs-duration-quick: 1ms;
    --dgs-duration-base: 1ms; --dgs-duration-slow: 1ms;
  }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}