/* Sleipner design tokens. Source of truth: design/AGENTS.md (Colors, Project bootstrap). Do not edit by hand; re-extract on submodule update. */
:root {
  /* Base */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Charcoal (neutrals) */
  --color-charcoal-900: #101215;
  --color-charcoal-800: #23282C;
  --color-charcoal-700: #373D42;
  --color-charcoal-600: #4F5459;
  --color-charcoal-500: #676C70;
  --color-charcoal-400: #7E8387;
  --color-charcoal-300: #969A9D;
  --color-charcoal-200: #A3A8AB;
  --color-charcoal-100: #C6C9CB;
  --color-charcoal-50:  #DFE0E1;
  --color-charcoal-25:  #F7F7F8;

  /* Petroleum (primary) */
  --color-petroleum-900: #001D23;
  --color-petroleum-800: #002F38;
  --color-petroleum-700: #083E48; /* default */
  --color-petroleum-600: #245660;
  --color-petroleum-500: #406E77;
  --color-petroleum-400: #5D868E;
  --color-petroleum-300: #7AA0A8;
  --color-petroleum-200: #99B5BA;
  --color-petroleum-100: #B8CBCF;
  --color-petroleum-50:  #D6E2E4;
  --color-petroleum-25:  #F5F8F8;

  /* Aqua (accent) */
  --color-aqua-900: #012225;
  --color-aqua-800: #06464C;
  --color-aqua-700: #0E6770;
  --color-aqua-600: #198590;
  --color-aqua-500: #28A1AD; /* default */
  --color-aqua-400: #45B4BF;
  --color-aqua-300: #65C5CF;
  --color-aqua-200: #85D5DD;
  --color-aqua-100: #A8E3E9;
  --color-aqua-50:  #CCF0F4;
  --color-aqua-25:  #F3FCFD;

  /* Sea-green */
  --color-seagreen-900: #002125;
  --color-seagreen-800: #003339;
  --color-seagreen-700: #00444C;
  --color-seagreen-600: #00535C;
  --color-seagreen-500: #06606A; /* default */
  --color-seagreen-400: #2A7C85;
  --color-seagreen-300: #52979F;
  --color-seagreen-200: #7AB2B8;
  --color-seagreen-100: #A3CBCF;
  --color-seagreen-50:  #CCE3E5;
  --color-seagreen-25:  #F5F9FA;

  /* Mist (subtle backgrounds) */
  --color-mist-900: #101212;
  --color-mist-800: #303535;
  --color-mist-700: #4F5757;
  --color-mist-600: #6F7A7A;
  --color-mist-500: #8F9C9C;
  --color-mist-400: #AFBDBD;
  --color-mist-300: #CFDFDF; /* default */
  --color-mist-200: #D8E6E6;
  --color-mist-100: #E1EDED;
  --color-mist-50:  #EBF3F3;
  --color-mist-25:  #F5F9F9;

  /* Sunset (warm accent) */
  --color-sunset-900: #1A160C;
  --color-sunset-800: #403720;
  --color-sunset-700: #665735;
  --color-sunset-600: #8C774B;
  --color-sunset-500: #AF9662;
  --color-sunset-400: #D1B57B;
  --color-sunset-300: #F2D494; /* default */
  --color-sunset-200: #FADFA8;
  --color-sunset-100: #FEEABE;
  --color-sunset-50:  #FFF3D7;
  --color-sunset-25:  #FFFCF2;

  /* Bronze (warm accent, deeper) */
  --color-bronze-900: #241500;
  --color-bronze-800: #4B2C03;
  --color-bronze-700: #6E4309;
  --color-bronze-600: #8F5911;
  --color-bronze-500: #AD6F1C;
  --color-bronze-400: #C9852A; /* default */
  --color-bronze-300: #DA9D4C;
  --color-bronze-200: #E7B470;
  --color-bronze-100: #F2CB98;
  --color-bronze-50:  #FAE2C2;
  --color-bronze-25:  #FEF8F0;

  /* Burnt orange (call-to-action / alerts) */
  --color-burntorange-900: #210A02;
  --color-burntorange-800: #4A1A07;
  --color-burntorange-700: #712A0F;
  --color-burntorange-600: #953B1A;
  --color-burntorange-500: #B64E27;
  --color-burntorange-400: #D46237; /* default */
  --color-burntorange-300: #E37D56;
  --color-burntorange-200: #EE9978;
  --color-burntorange-100: #F7B69E;
  --color-burntorange-50:  #FCD5C6;
  --color-burntorange-25:  #FFF5F1;

  /* Semantic aliases: use these in components, not raw color tokens */
  --bg-page:        var(--color-petroleum-25); /* app pages: petroleum-25 with white cards on top; marketing/content pages: white */
  --bg-subtle:      var(--color-mist-25);
  --bg-muted:       var(--color-petroleum-25);
  --bg-inverse:     var(--color-petroleum-700);

  --text-primary:   var(--color-petroleum-700);
  --text-secondary: var(--color-charcoal-700); /* supporting text inside components; body copy uses --text-primary */
  --text-muted:     var(--color-charcoal-500);
  --text-inverse:   var(--color-white);
  --text-link:      var(--color-petroleum-700);

  --border-subtle:  var(--color-petroleum-50);
  --border-default: var(--color-petroleum-100);
  --border-strong:  var(--color-petroleum-700);

  --accent-primary: var(--color-petroleum-700);
  --accent-hover:   var(--color-petroleum-800);
  --accent-active:  var(--color-petroleum-900);

  --accent-secondary: var(--color-aqua-500);
  --accent-warm:      var(--color-bronze-400);
  --accent-danger:    var(--color-burntorange-500);
}


/* Control reset: the system owns every control's appearance, so browser
   chrome must never leak through. Tailwind's preflight does this for you;
   plain-CSS projects need it explicitly. Custom controls built as <button>
   (checkbox rows, sortable headers, chips, clickable rows) rely on it. */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:root {
  --motion-duration-fast: 150ms;
  --motion-duration-standard: 200ms;
  --motion-duration-press: 160ms;
  --motion-duration-list-reorder: 180ms;
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --motion-ease-position: cubic-bezier(0.22, 1, 0.36, 1);
}

button, [role='button'], a, input, textarea, select {
  outline: none;
}

button:focus-visible, [role='button']:focus-visible, a:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-aqua-500);
  outline-offset: 2px;
  /* no border-radius here: inherit would zero out the element's own radius;
     the outline follows the element's radius on its own */
}