:root {
  /* Figma variables */
  --color-background-default: #ffffff;
  --color-background-subtle: #efefef;

  --color-border-default: #b8b8b8;
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-table-header-bg: rgba(0, 0, 0, 0.06);

  --color-surface-subtle: #f5f5f5;
  --color-surface-feedback-neutral: #efefef;
  --color-surface-feedback-attention: #f9e7d9;
  --color-surface-feedback-critical: #f8d6cd;
  --color-surface-feedback-success: #c6e9d9;
  --color-surface-decorative-04-subtle: #f3f6e2;
  --color-surface-decorative-05-subtle: #cfd7f4;

  --color-content-subtle: #000000a3;
  --color-content-subtle-on-color: #ffffffe0;
  --color-content-feedback-attention: #b56822;
  --color-content-feedback-critical: #d75133;
  --color-content-feedback-success: #427861;
  --color-content-disabled: rgba(0, 0, 0, 0.4);

  --color-surface-visualisation-multi-data-01: #4965aa;
  --color-surface-visualisation-multi-data-01-subtle: #b5bad0;
  --color-surface-visualisation-multi-data-02: #5dacdd;
  --color-surface-visualisation-multi-data-02-subtle: #bfdbef;

  /* ---- Grays ----- */
  --color-white: #ffffff;
  --color-gray-10: #f5f5f5;
  --color-gray-20: #e1e1e1;
  --color-gray-30: #b8b8b8;
  --color-gray-40: #919191;
  --color-gray-50: #6a6a6a;
  --color-black: #000000;

  /* ----- Neutrals ----- */
  --color-neutral-500: #737373;

  /* ----- Primary ----- */

  --color-teal-10: #c5cddc;
  --color-teal-20: #b2becd;
  --color-teal-30: #b9c9cc;
  --color-teal-50: #77939f;
  --color-teal-70: #0f353c;

  --color-primary: var(--color-ziv-petrole-700);
  --color-primary-selected: var(--color-ziv-petrole-500);

  /* ----- Feedback ----- */

  --color-lime-60: #d3d92b;

  --color-green-10: #c6e9d9;
  --color-green-20: #84dcb4;
  --color-green-30: #33ca89;
  --color-green-50: #427861;

  --color-orange-10: #f9e7d9;
  --color-orange-20: #f3d9c2;
  --color-orange-30: #fe800b;
  --color-orange-50: #b56822;

  --color-red-10: #f8d6cd;
  --color-red-20: #f2bfb4;
  --color-red-30: #f17e64;
  --color-red-50: #d75133;
  --color-red-70: #ad3014;

  /* ----- Alphas ----- */

  --color-white-alpha-30: #ffffff29;
  --color-white-alpha-50: #ffffff8f;
  --color-white-alpha-60: #ffffffa3;
  --color-white-alpha-80: #ffffffcc;
  --color-white-alpha-90: #ffffffe0;

  --gradient-black-alpha-10-black-alpha-30: linear-gradient(-45deg, #0000000a 0%, #00000029 50% 60%, #0000000a 100%);
  --color-black-alpha-0: #00000000;
  --color-black-alpha-10: #0000000a;
  --color-black-alpha-20: #00000014;
  --color-black-alpha-30: #00000029;
  --color-black-alpha-40: #00000066;
  --color-black-alpha-50: #0000007a;
  --color-black-alpha-60: #000000a3;
  --color-black-alpha-70: #000000b8;
  --color-black-alpha-100: #000000f5;

  /* ----- Decoration ----- */

  --color-lavender-10: #cdc7e6;
  --color-lavender-20: #9287bf;
  --color-lavender-50: #5c49aa;
  --color-lavender-60: #3f2b8b;

  --color-purple-10: #d6cad5;
  --color-purple-20: #bbabba;
  --color-purple-40: #9b6297;
  --color-purple-60: #70426d;

  --color-blue-10: #dbebf6;
  --color-blue-20: #bfdbef;
  --color-blue-30: #5dacdd;
  --color-blue-60: #1b80be;

  --color-citrus-10: #f3f6e2;
  --color-citrus-20: #e4ebbd;
  --color-citrus-30: #c2d45f;
  --color-citrus-60: #97af13;

  --color-cyan-10: #d3f7f5;
  --color-cyan-20: #b1f0ec;
  --color-cyan-30: #93ebe5;
  --color-cyan-50: #24bbb2;
  --color-cyan-60: #0f9a91;

  --color-cobalt-10: #cfd7f4;
  --color-cobalt-20: #b0bded;
  --color-cobalt-60: #2a48b2;
  --color-cobalt-70: #122f94;

  --color-brown-20: #d6c1b5;
  --color-brown-50: #8e6b57;

  --color-petrol-10: #eff9fa;

  /* ===== ZIV Design System Tokens ===== */
  /* From Figma: Design-system--New- */

  /* ----- ZIV Grey ----- */
  --color-ziv-grey-800: #18191d;
  --color-ziv-grey-700: #2e3038;
  --color-ziv-grey-600: #454854;
  --color-ziv-grey-500: #5c6070;
  --color-ziv-grey-400: #8f93a3;
  --color-ziv-grey-300: #abaeba;
  --color-ziv-grey-200: #c7c9d1;
  --color-ziv-grey-100: #e3e4e8;
  --color-ziv-grey-50: #f1f2f3;

  /* ----- ZIV Pétrole ----- */
  --color-ziv-petrole-800: #0f3a42;
  --color-ziv-petrole-700: #154a54;
  --color-ziv-petrole-600: #235c66;
  --color-ziv-petrole-500: #446e76;
  --color-ziv-petrole-400: #6a8f96;
  --color-ziv-petrole-300: #95b6bc;
  --color-ziv-petrole-200: #c1dadd;
  --color-ziv-petrole-100: #d6ecef;
  --color-ziv-petrole-50: #eff9fa;

  /* ----- ZIV Bleu ----- */
  --color-ziv-bleu-700: #0f4c75;
  --color-ziv-bleu-600: #1f6f9e;
  --color-ziv-bleu-500: #51ade2;
  --color-ziv-bleu-400: #7ec2ea;
  --color-ziv-bleu-300: #a8d7f2;
  --color-ziv-bleu-200: #cfeaf9;
  --color-ziv-bleu-100: #eaf6fd;

  /* ----- ZIV Violet ----- */
  --color-ziv-violet-700: #495da7;
  --color-ziv-violet-600: #5f73ba;
  --color-ziv-violet-500: #7a8ed0;
  --color-ziv-violet-400: #9faee2;
  --color-ziv-violet-300: #c1ccee;
  --color-ziv-violet-200: #dce3f7;
  --color-ziv-violet-100: #f1f4fc;

  /* ----- ZIV Lavande ----- */
  --color-ziv-lavande-700: #8c3e77;
  --color-ziv-lavande-600: #a85894;
  --color-ziv-lavande-500: #be79ab;
  --color-ziv-lavande-400: #d3a0c6;
  --color-ziv-lavande-300: #e5c4dd;
  --color-ziv-lavande-200: #f1ddea;
  --color-ziv-lavande-100: #faf1f7;

  /* ----- ZIV Orange ----- */
  --color-ziv-orange-700: #b5543f;
  --color-ziv-orange-600: #cf6a53;
  --color-ziv-orange-500: #e58069;
  --color-ziv-orange-400: #ee9c89;
  --color-ziv-orange-300: #f4b8aa;
  --color-ziv-orange-200: #f9d4cb;
  --color-ziv-orange-100: #fdf0ec;

  /* ----- ZIV Yellow ----- */
  --color-ziv-yellow-700: #664c00;
  --color-ziv-yellow-600: #997200;
  --color-ziv-yellow-500: #cc9800;
  --color-ziv-yellow-400: #ffcb33;
  --color-ziv-yellow-300: #ffd866;
  --color-ziv-yellow-200: #ffe599;
  --color-ziv-yellow-100: #fff2cc;

  /* ----- ZIV Rouge (Feedback) ----- */
  --color-ziv-rouge-700: #5c0a0a;
  --color-ziv-rouge-600: #8a0f0f;
  --color-ziv-rouge-500: #b81414;
  --color-ziv-rouge-400: #eb4747;
  --color-ziv-rouge-300: #f07575;
  --color-ziv-rouge-200: #f5a3a3;
  --color-ziv-rouge-100: #fad1d1;

  /* ----- ZIV Vert (Feedback) ----- */
  --color-ziv-vert-700: #1a4d33;
  --color-ziv-vert-600: #26734d;
  --color-ziv-vert-500: #339966;
  --color-ziv-vert-400: #66cc99;
  --color-ziv-vert-300: #8cd9b2;
  --color-ziv-vert-200: #b3e5cc;
  --color-ziv-vert-100: #d9f2e5;

  /* ----- ZIV Semantic Colors ----- */
  --color-ziv-background-surface-default: #ffffff;
  --color-ziv-background-surface-subtle: #f1f1f3;
  --color-ziv-foreground-neutral-bold: #000000;
  --color-ziv-foreground-neutral-default: #454854;
  --color-ziv-border-neutral-subtle: #c7c9d1;
  --color-ziv-border-neutral-default: var(--color-ziv-grey-400);
}
/*@layer base {*/
/* remove 300ms delay*/
/* Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/normalize.scss */
a,
a div,
a span,
button,
button div,
button span,
input,
textarea {
  touch-action: manipulation;
}

/* The Turbo progress bar is replaced with the spinner ("leaving" class) */
.turbo-progress-bar {
  visibility: hidden;
}

body.leaving main {
  animation: fak-fade-out 0.3s forwards;
  pointer-events: none;
}

body.leaving .nav-spinner {
  opacity: 1;
}

@keyframes fak-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fak-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fak-slide-from-right {
  from {
    transform: translateX(60px);
  }
}

@keyframes fak-slide-from-left {
  from {
    transform: translateX(-60px);
  }
}

@keyframes fak-slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

@keyframes fak-slide-to-right {
  to {
    transform: translateX(30px);
  }
}

/* Rails */
html[data-turbo-visit-direction='forward']::view-transition-old(root) {
  animation: none;
}

/* Next.js */
::view-transition-old(.slide-from-right) {
  animation: fak-fade-out 0.3s forwards;
}

/* Rails */
html[data-turbo-visit-direction='forward']::view-transition-new(root) {
  animation:
    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fak-fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both fak-slide-from-right;
}

/* Next.js */
::view-transition-new(.slide-from-right) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fak-fade-in;
}

/* Rails */
html[data-turbo-visit-direction='back']::view-transition-old(root) {
  animation: none;
}

/* Next.js */
::view-transition-old(.slide-from-left) {
  animation: fak-fade-out 0.3s forwards;
}

/* Rails */
html[data-turbo-visit-direction='back']::view-transition-new(root) {
  animation:
    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fak-fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both fak-slide-from-left;
}

/* Next.js */
::view-transition-new(.slide-from-left) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fak-fade-in;
}
.capacitor .capacitor-hidden {
  /* biome-ignore lint/complexity/noImportantStyles: Utility that should override everything else */
  display: none !important;
}

html:not(.capacitor) .capacitor-show {
  /* biome-ignore lint/complexity/noImportantStyles: Utility that should override everything else */
  display: none !important;
}

@media all and (display-mode: standalone) {
  .desktop-only {
    display: none;
  }
}

@media not all and (display-mode: standalone) {
  .pwa-only {
    display: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */