/* ============================================================
   Saraf — design tokens

   Ported from the legacy Nuxt app (LandingSSR@hamravesh):
   `app/assets/scss/root-variables.scss`.

   Names and values are kept verbatim so a component ported from the old
   codebase can keep the exact `var(--…)` it already referenced. Do not invent
   new token names here — if a colour is missing, it is missing upstream too,
   and the design system should be the one to add it.

   `html.dark` mirrors the light palette. Nothing toggles that class yet: the
   legacy theme switch was already disabled (`v-if="false"` in Header.vue), so
   the dark values ship dormant, ready for whenever the switch comes back.
   ============================================================ */

:root {
  /* --- Backgrounds --- */
  --background-neutral-1: #ffffff;
  --background-neutral-2: #f5f7f8;
  --background-neutral-3: #eff2f4;
  --background-neutral-4: #e9eef1;
  --background-primary: #fffcef;
  --background-error-1: #ffebef;
  --background-error-2: #ffdbe4;
  --background-warning-1: #fff7ed;
  --background-warning-2: #fff3e4;
  --background-success-1: #e8f7f3;
  --background-success-2: #d9f2eb;
  --background-in-progress-1: #f1f8fe;
  --background-in-progress-2: #e4f1fe;

  /* --- On background --- */
  --on-background-neutral-default: #1b272d;
  --on-background-neutral-subdued: #4f7082;
  --on-background-neutral-cta: #ffd60a;
  --on-background-neutral-active: #ffd60a;
  /* TODO (upstream): check with UI designers */
  --on-background-neutral-disabled: #c3d2da;
  --on-background-error: #b41f42;
  --on-background-error-subdued: #d51a46;
  --on-background-error-cta: #ffd60a;
  /* TODO (upstream): check with UI designers */
  --on-background-error-active: #ed5b75;
  --on-background-error-default: #b41f42;
  --on-background-error-disabled: #ffadc0;
  --on-background-warning-default: #be7a19;
  --on-background-warning-subdued: #dd8e18;
  --on-background-warning-cta: #ffd60a;
  --on-background-warning-active: #f39b16;
  --on-background-warning-disabled: #ffce96;
  /* TODO (upstream): check with UI designers */
  --on-background-success-default: #31ba96;
  --on-background-success: #1c9c8b;
  --on-background-success-subdued: #13c396;
  --on-background-success-cta: #ffd60a;
  --on-background-success-active: #17e8b2;
  --on-background-success-disabled: #99ead5;

  /* --- Tints --- */
  --background-tint-success: #c8efe4;
  --background-tint-primary: #fff3c6;
  --background-tint-primary-default: #fff5ce;
  --background-tint-display-yellow: #fef3c7;
  --background-tint-display-red: #fbdfe6;
  --background-tint-display-blue: #c4effd;
  --background-tint-display-grey: #e9eef1;
  --background-tint-display-green: #c7f8fa;
  --background-tint-display-purple: #efe0ff;
  --background-tint-display-pink: #ffe5f5;
  --background-tint-display-brown: #f8ddd3;
  --background-tint-display-orange: #ffe6c2;
  --on-background-tint-success: #325152;
  --on-background-tint-primary: #474230;
  --on-background-tint-primary-default: #211f17;
  --on-background-tint-display-green: #12ba8f;
  --on-background-tint-display-blue: #1c85be;
  --on-background-tint-display-red: #b41f42;
  --on-background-tint-display-yellow: #a78b17;
  --on-background-tint-display-purple: #6338af;
  --on-background-tint-display-pink: #b6214f;
  --on-background-tint-display-brown: #895141;
  --on-background-tint-display-orange: #b37419;

  /* --- Foregrounds --- */
  --foreground-neutral: #1b272d;
  --foreground-neutral-disabled: #e4eaee;
  --foreground-primary-default: #ffd60a;
  --foreground-primary-disabled: #fff6d6;
  --foreground-error-default: #f44d74;
  --foreground-error: #e11947;
  --foreground-error-hovered: #f0426b;
  --foreground-error-selected: #ec325d;
  --foreground-error-disabled: #ffc2d0;
  --foreground-warning: #f39b16;
  --foreground-warning-disabled: #ffebd3;
  --foreground-success-default: #17e8b2;
  --foreground-success: #17e8b2;
  --foreground-success-disabled: #d9f2eb;

  /* --- On foreground (text drawn on top of a filled/photo surface) --- */
  --on-foreground-neutral: #ffffff;
  --on-foreground-neutral-disabled: #a3bac7;
  --on-foreground-neutral-cta: #ffe684;
  --on-foreground-neutral-info: #3eb0f5;
  --on-foreground-neutral-error: #f0426b;
  --on-foreground-neutral-warning: #faaf50;
  --on-foreground-neutral-success: #45edc1;
  --on-foreground-primary-default: #1b272d;
  --on-foreground-primary-disabled: #ffdf60;
  --on-foreground-error-default: #ffffff;
  --on-foreground-error: #ffffff;
  --on-foreground-error-disabled: #f65077;
  --on-foreground-warning: #ffffff;
  --on-foreground-warning-disabled: #faaf50;
  --on-foreground-success-default: #000000;
  --on-foreground-success: #000000;
  --on-foreground-success-disabled: #45edc1;

  /* --- Strokes --- */
  --stroke-neutral-1-default: #c8d6de;
  --stroke-neutral-1-hovered: #beced7;
  --stroke-neutral-1-active: #1b272d;
  --stroke-neutral-1-disabled: #eff2f4;
  --stroke-neutral-2: #e9eef1;
  --stroke-neutral-2-default: #e9eef1;
  --stroke-neutral-2-hovered: #dee7eb;
  --stroke-neutral-2-pressed: #d4dfe4;
  --stroke-neutral-2-disabled: #f5f7f8;
  --stroke-neutral-think: #f5f7f8;
  --stroke-primary: #ffd60a;
  --stroke-primary-hovered: #e8c30f;
  --stroke-primary-pressed: #ddba12;
  --stroke-primary-disabled: #ffeb9d;
  --stroke-error-default: #b41f42;
  --stroke-error-hovered: #833d54;
  --stroke-error-pressed: #774053;
  --stroke-error-disabled: #ffadc0;
  --stroke-error-active: #e11947;
  --stroke-warning: #be7a19;
  --stroke-warning-hovered: #a96d19;
  --stroke-warning-pressed: #9f6719;
  --stroke-warning-disabled: #ffce96;
  --stroke-success: #1c9c8b;
  --stroke-success-hovered: #297a70;
  --stroke-success-pressed: #3e6265;
  --stroke-success-disabled: #c8efe4;
  --stroke-white: #ffffff;

  /* --- State layers --- */
  --state-layer-fill-neutral-hover: #0000000a;
  --state-layer-fill-neutral-pressed: #00000014;
  --state-layer-neutral-hover: #0000000a;
  --state-layer-neutral-pressed: #00000014;

  /* --- Radii --- */
  --radius: 9px;
  --button: 12px;
  --text-field: 12px;

  /* --- Legacy palette (pre-token colours still referenced by older markup) --- */
  --identity: #ffc800;
  --success: #408941;
  --danger: #cc4956;
  --white: #ffffff;
  --black: #0f222a;
  --low-identity: #fdf7e2;
  --bg-success: #f0faf3;
  --bg-danger: #faf0f1;
  --profit-color: #f0faf3;
  --loss-color: #faf0f1;

  --gray-0: #ffffff;
  --gray-50: #f8fbfc;
  --gray-100: #f1f7f9;
  --gray-200: #e2ecf0;
  --gray-300: #cbdae1;
  --gray-400: #94adb8;
  --gray-500: #647f8b;
  --gray-600: #475f69;
  --gray-700: #384950;
  --gray-800: #1e323b;
  --gray-900: #0f222a;
}

html.dark {
  /* --- Backgrounds --- */
  --background-neutral-1: #1b272d;
  --background-neutral-2: #22313a;
  --background-neutral-3: #283c48;
  --background-neutral-4: #304855;
  --background-primary: #2e2b1f;
  --background-error-1: #3f2733;
  --background-error-2: #462b38;
  --background-warning-1: #4a3113;
  --background-warning-2: #533714;
  --background-success-1: #233839;
  --background-success-2: #273f3f;
  --background-in-progress-1: #192f40;
  --background-in-progress-2: #1c3b52;

  /* --- On background --- */
  --on-background-neutral-default: #ffffff;
  --on-background-neutral-subdued: #b8cad4;
  --on-background-neutral-cta: #ffd60a;
  --on-background-neutral-active: #ffd60a;
  /* TODO (upstream): check with UI designers */
  --on-background-neutral-disabled: #5d8398;
  --on-background-error: #fc698b;
  --on-background-error-subdued: #f44d74;
  --on-background-error-cta: #ffd60a;
  /* TODO (upstream): check with UI designers */
  --on-background-error-active: #f2647e;
  --on-background-error-default: #fc698b;
  --on-background-error-disabled: #623c4f;
  --on-background-warning-default: #f39b16;
  --on-background-warning-subdued: #d38718;
  --on-background-warning-cta: #ffd60a;
  --on-background-warning-active: #f39b16;
  --on-background-warning-disabled: #654316;
  /* TODO (upstream): check with UI designers */
  --on-background-success-default: #17e8b2;
  --on-background-success: #6eedcd;
  --on-background-success-subdued: #45edc1;
  --on-background-success-cta: #ffd60a;
  --on-background-success-active: #17e8b2;
  --on-background-success-disabled: #2e4a4c;

  /* --- Tints --- */
  --background-tint-success: #325152;
  --background-tint-primary: #544e38;
  --background-tint-primary-default: #474230;
  --background-tint-display-yellow: #564816;
  --background-tint-display-red: #523242;
  --background-tint-display-blue: #1f5577;
  --background-tint-display-grey: #395360;
  --background-tint-display-green: #365758;
  --background-tint-display-purple: #38225b;
  --background-tint-display-pink: #741e34;
  --background-tint-display-brown: #58362c;
  --background-tint-display-orange: #784e17;
  --on-background-tint-success: #62efcb;
  --on-background-tint-primary: #ffe684;
  --on-background-tint-primary-default: #ffe684;
  --on-background-tint-display-green: #45edc1;
  --on-background-tint-display-blue: #65baf7;
  --on-background-tint-display-red: #f24a71;
  --on-background-tint-display-yellow: #ffe067;
  --on-background-tint-display-purple: #8860c6;
  --on-background-tint-display-pink: #f04b74;
  --on-background-tint-display-brown: #c48978;
  --on-background-tint-display-orange: #fbb359;

  /* --- Foregrounds --- */
  --foreground-neutral: #ffffff;
  --foreground-neutral-disabled: #334e5b;
  --foreground-primary-default: #ffd60a;
  --foreground-primary-disabled: #474230;
  --foreground-error-default: #f44d74;
  --foreground-error: #e11947;
  --foreground-error-hovered: #f0426b;
  --foreground-error-selected: #ec325d;
  --foreground-error-disabled: #623c4f;
  --foreground-warning: #f39b16;
  --foreground-warning-disabled: #6e4817;
  --foreground-success-default: #17e8b2;
  --foreground-success: #17e8b2;
  --foreground-success-disabled: #325152;

  /* --- On foreground --- */
  --on-foreground-neutral: #1b272d;
  --on-foreground-neutral-disabled: #7b9cad;
  --on-foreground-neutral-cta: #676044;
  --on-foreground-neutral-info: #129ade;
  --on-foreground-neutral-error: #b41f42;
  --on-foreground-neutral-warning: #be7a19;
  --on-foreground-neutral-success: #12ba8f;
  --on-foreground-primary-default: #1b272d;
  --on-foreground-primary-disabled: #88762d;
  --on-foreground-error-default: #ffffff;
  --on-foreground-error: #ffffff;
  --on-foreground-error-disabled: #833d54;
  --on-foreground-warning: #ffffff;
  --on-foreground-warning-disabled: #be7a19;
  --on-foreground-success-default: #000000;
  --on-foreground-success: #000000;
  --on-foreground-success-disabled: #12ba8f;

  /* --- Strokes --- */
  --stroke-neutral-1-default: #476372;
  --stroke-neutral-1-hovered: #4f7082;
  --stroke-neutral-1-active: #ffd60a;
  --stroke-neutral-1-disabled: #2c414e;
  --stroke-neutral-2: #2c414e;
  --stroke-neutral-2-default: #2c414e;
  --stroke-neutral-2-hovered: #334e5b;
  --stroke-neutral-2-pressed: #3e5965;
  --stroke-neutral-2-disabled: #263640;
  --stroke-neutral-think: #263640;
  --stroke-primary: #ffd60a;
  --stroke-primary-hovered: #ffd933;
  --stroke-primary-pressed: #ffdb40;
  --stroke-primary-disabled: #4d4834;
  --stroke-error-default: #fc698b;
  --stroke-error-hovered: #ff7a99;
  --stroke-error-pressed: #ff85a1;
  --stroke-error-disabled: #623c4f;
  --stroke-error-active: #e11947;
  --stroke-warning: #f39b16;
  --stroke-warning-hovered: #f6a332;
  --stroke-warning-pressed: #f7a73d;
  --stroke-warning-disabled: #654316;
  --stroke-success: #6eedcd;
  --stroke-success-hovered: #86ead0;
  --stroke-success-pressed: #99ead5;
  --stroke-success-disabled: #325152;
  --stroke-white: #1b272d;

  /* --- State layers --- */
  --state-layer-fill-neutral-hover: #0000000a;
  --state-layer-fill-neutral-pressed: #00000014;
  --state-layer-neutral-hover: #ffffff0a;
  --state-layer-neutral-pressed: #ffffff14;

  /* --- Legacy palette --- */
  --identity: #ffc800;
  --success: #07cf45;
  --danger: #ea4e5f;
  --white: #ffffff;
  --black: #0f222a;
  --profit-color: #24352b;
  --loss-color: #372a2e;

  --gray-0: #0f222a;
  --gray-50: #1e323b;
  --gray-100: #384950;
  --gray-200: #475f69;
  --gray-300: #647f8b;
  --gray-400: #94adb8;
  --gray-500: rgba(255, 255, 255, 0.85);
  --gray-600: #e2ecf0;
  --gray-700: #f1f7f9;
  --gray-800: #f8fbfc;
  --gray-900: #ffffff;
}