/* Yaaleh Design System - tokens.
   Source: YaalehDev/Comercial, branch homolog1404.
   Not imported yet. Use these variables when migrating pages manually. */

:root {
  --color-white: #ffffff;
  --color-black: #000000;

  --color-grey-10: #f9f9f9;
  --color-grey-20: #e4e4e4;
  --color-grey-30: #d0d0d0;
  --color-grey-40: #bcbcbc;
  --color-grey-50: #a7a7a7;
  --color-grey-60: #939393;
  --color-grey-70: #7e7e7e;
  --color-grey-80: #6a6a6a;
  --color-grey-90: #565454;
  --color-grey-100: #413f3f;

  --color-brand-10: #e7f5ff;
  --color-brand-20: #bee2ff;
  --color-brand-30: #94d0ff;
  --color-brand-40: #6abdff;
  --color-brand-50: #40abff;
  --color-brand-60: #1698fd;
  --color-brand-70: #0077d4;
  --color-brand-80: #0060ab;
  --color-brand-90: #004982;
  --color-brand-100: #00325a;

  --color-red-10: #ffe5e5;
  --color-red-20: #ffb7b7;
  --color-red-30: #ff8a8a;
  --color-red-40: #ff5c5c;
  --color-red-50: #ff2e2e;
  --color-red-60: #f50000;
  --color-red-70: #d60000;
  --color-red-80: #ad0000;
  --color-red-90: #850000;
  --color-red-100: #5c0000;

  --color-orange-10: #fff1e5;
  --color-orange-20: #ffd9b7;
  --color-orange-30: #ffc08a;
  --color-orange-40: #ffa85c;
  --color-orange-50: #ff8f2e;
  --color-orange-60: #ff7700;
  --color-orange-70: #d66400;
  --color-orange-80: #ad5100;
  --color-orange-90: #853e00;
  --color-orange-100: #5c2b00;

  --color-yellow-10: #fffde5;
  --color-yellow-20: #fff9b7;
  --color-yellow-30: #fff58a;
  --color-yellow-40: #fff15c;
  --color-yellow-50: #ffed2e;
  --color-yellow-60: #ffea00;
  --color-yellow-65: #ebd700;
  --color-yellow-70: #d6c400;
  --color-yellow-80: #ad9f00;
  --color-yellow-90: #857a00;
  --color-yellow-100: #5c5400;

  --color-green-10: #e9ffe5;
  --color-green-20: #c1ffb7;
  --color-green-30: #99ff8a;
  --color-green-40: #71ff5c;
  --color-green-50: #4aff2e;
  --color-green-60: #22ff00;
  --color-green-70: #1dd600;
  --color-green-80: #17ad00;
  --color-green-90: #128500;
  --color-green-100: #0c5c00;

  --color-teal-10: #e5fff6;
  --color-teal-20: #b7ffe7;
  --color-teal-30: #8affd8;
  --color-teal-40: #5cffc8;
  --color-teal-50: #2effb9;
  --color-teal-60: #00f0a0;
  --color-teal-70: #00c785;
  --color-teal-80: #009e69;
  --color-teal-90: #00754e;
  --color-teal-100: #004c33;

  --color-acqua-10: #e5ffff;
  --color-acqua-20: #b7ffff;
  --color-acqua-30: #8affff;
  --color-acqua-40: #5cffff;
  --color-acqua-50: #2effff;
  --color-acqua-60: #00f0f0;
  --color-acqua-70: #00c7c7;
  --color-acqua-80: #009e9e;
  --color-acqua-90: #007575;
  --color-acqua-100: #004c4c;

  --color-indigo-10: #e5eaff;
  --color-indigo-20: #b7c6ff;
  --color-indigo-30: #8aa1ff;
  --color-indigo-40: #5c7cff;
  --color-indigo-50: #2e58ff;
  --color-indigo-60: #0030f0;
  --color-indigo-70: #0028c7;
  --color-indigo-80: #00209e;
  --color-indigo-90: #001875;
  --color-indigo-100: #000f4c;

  --color-purple-10: #f3e5ff;
  --color-purple-20: #ddb7ff;
  --color-purple-30: #c88aff;
  --color-purple-40: #b35cff;
  --color-purple-50: #9d2eff;
  --color-purple-60: #8000f0;
  --color-purple-70: #6a00c7;
  --color-purple-80: #54009e;
  --color-purple-90: #3f0075;
  --color-purple-100: #29004c;

  --color-pink-10: #ffe5f2;
  --color-pink-20: #ffb7db;
  --color-pink-30: #ff8ac4;
  --color-pink-40: #ff5cad;
  --color-pink-50: #ff2e96;
  --color-pink-60: #f00078;
  --color-pink-70: #c70064;
  --color-pink-80: #9e004f;
  --color-pink-90: #75003b;
  --color-pink-100: #4c0026;

  --bg-neutral-primary: var(--color-grey-10);
  --bg-neutral-secondary: var(--color-grey-20);
  --bg-neutral-tertiary: var(--color-grey-30);
  --bg-neutral-disabled: var(--color-grey-40);
  --bg-neutral-inverse-primary: var(--color-grey-100);
  --bg-neutral-inverse-secondary: var(--color-grey-90);
  --bg-neutral-inverse-tertiary: var(--color-grey-80);

  --bg-brand-lightest: var(--color-brand-50);
  --bg-brand-light: var(--color-brand-60);
  --bg-brand-default: var(--color-brand-70);
  --bg-brand-dark: var(--color-brand-80);
  --bg-brand-super-dark: var(--color-brand-90);
  --bg-brand-darkest: var(--color-brand-100);
  --bg-brand-superDark: var(--bg-brand-super-dark);

  --text-neutral-on-primary: var(--color-grey-100);
  --text-neutral-on-secondary: var(--color-grey-90);
  --text-neutral-on-tertiary: var(--color-grey-90);
  --text-neutral-on-disabled: var(--color-grey-80);
  --text-neutral-inverse-on-primary: var(--color-white);
  --text-neutral-inverse-on-secondary: var(--color-grey-10);
  --text-neutral-inverse-on-tertiary: var(--color-grey-10);

  --text-on-brand-primary: var(--color-white);
  --text-on-brand-secondary: var(--color-grey-10);
  --text-on-brand-tertiary: var(--color-grey-10);

  --text-neutral-onPrimary: var(--text-neutral-on-primary);
  --text-neutral-onSecondary: var(--text-neutral-on-secondary);
  --text-neutral-onTertiary: var(--text-neutral-on-tertiary);
  --text-neutral-onDisabled: var(--text-neutral-on-disabled);
  --text-neutral-inverse-onPrimary: var(--text-neutral-inverse-on-primary);
  --text-neutral-inverse-onSecondary: var(--text-neutral-inverse-on-secondary);
  --text-neutral-inverse-onTertiary: var(--text-neutral-inverse-on-tertiary);
  --text-onBrand-primary: var(--text-on-brand-primary);
  --text-onBrand-secondary: var(--text-on-brand-secondary);
  --text-onBrand-tertiary: var(--text-on-brand-tertiary);

  --text-brand-primary: var(--color-brand-90);
  --text-brand-secondary: var(--color-brand-80);
  --text-brand-tertiary: var(--color-brand-70);

  --border-neutral-primary: var(--color-grey-20);
  --border-neutral-secondary: var(--color-grey-30);
  --border-neutral-tertiary: var(--color-grey-50);
  --border-neutral-disabled: var(--color-grey-70);
  --border-neutral-inverse-primary: var(--color-grey-10);
  --border-neutral-inverse-secondary: var(--color-grey-20);
  --border-neutral-inverse-tertiary: var(--color-grey-30);
  --border-neutral-strong: var(--color-grey-60);
  --border-brand-dark: var(--color-brand-90);
  --border-brand-medium: var(--color-brand-80);
  --border-brand-light: var(--color-brand-70);

  --icon-neutral-primary: var(--color-grey-100);
  --icon-neutral-secondary: var(--color-grey-90);
  --icon-neutral-tertiary: var(--color-grey-80);
  --icon-neutral-disabled: var(--color-grey-80);
  --icon-neutral-inverse-primary: var(--color-grey-10);
  --icon-neutral-inverse-secondary: var(--color-grey-20);
  --icon-neutral-inverse-tertiary: var(--color-grey-30);
  --icon-brand-colored-primary: var(--color-brand-90);
  --icon-brand-colored-secondary: var(--color-brand-80);
  --icon-brand-colored-tertiary: var(--color-brand-70);

  --focus-ring: var(--color-brand-70);
  --focus-shadow: 0 0 0 3px rgba(0, 119, 212, 0.15);
  --hover-button: var(--color-grey-20);
  --hover-icon: var(--color-brand-70);
  --hover-text: var(--color-brand-80);

  --validation-input-destructive-border: var(--color-red-50);
  --validation-input-destructive-label: var(--color-red-70);
  --validation-input-destructive-helper-text: var(--color-red-70);
  --validation-input-warning-border: var(--color-orange-70);
  --validation-input-warning-label: var(--color-orange-80);
  --validation-input-warning-helper-text: var(--color-orange-80);
  --validation-input-success-border: var(--color-green-90);
  --validation-input-success-label: var(--color-green-90);
  --validation-input-success-helper-text: var(--color-green-90);
  --validation-input-share-border: var(--color-acqua-60);
  --validation-input-share-label: var(--color-acqua-70);
  --validation-input-share-helper-text: var(--color-acqua-80);
  --validation-field-message-destructive: var(--color-red-30);
  --validation-field-message-warning: var(--color-yellow-30);
  --validation-field-message-share: var(--color-acqua-30);
  --validation-field-message-success: var(--color-green-30);

  --validation-input-destructive-helperText: var(--validation-input-destructive-helper-text);
  --validation-input-warning-helperText: var(--validation-input-warning-helper-text);
  --validation-input-success-helperText: var(--validation-input-success-helper-text);
  --validation-input-share-helperText: var(--validation-input-share-helper-text);
  --validation-fieldMessage-destructive: var(--validation-field-message-destructive);
  --validation-fieldMessage-warning: var(--validation-field-message-warning);
  --validation-fieldMessage-share: var(--validation-field-message-share);
  --validation-fieldMessage-success: var(--validation-field-message-success);

  --navigation-bg-default: var(--color-white);
  --navigation-bg-hover: var(--color-grey-20);
  --navigation-bg-pressed: var(--color-grey-40);
  --create-bg-default: var(--color-brand-70);
  --create-bg-hover: var(--color-brand-80);
  --create-bg-pressed: var(--color-brand-90);
  --success-bg-default: var(--color-green-80);
  --success-bg-hover: var(--color-green-90);
  --success-bg-pressed: var(--color-green-100);
  --destructive-bg-default: var(--color-red-70);
  --destructive-bg-hover: var(--color-red-80);
  --destructive-bg-pressed: var(--color-red-90);
  --share-bg-default: var(--color-acqua-80);
  --share-bg-hover: var(--color-acqua-90);
  --share-bg-pressed: var(--color-acqua-100);

  --selected-bg: var(--color-brand-10);
  --selected-text: var(--text-neutral-on-primary);
  --selected-border: var(--border-brand-light);
  --selected-icon: var(--icon-brand-colored-primary);

  --navigation-bgDefault: var(--navigation-bg-default);
  --navigation-bgHover: var(--navigation-bg-hover);
  --navigation-bgPressed: var(--navigation-bg-pressed);
  --create-bgDefault: var(--create-bg-default);
  --create-bgHover: var(--create-bg-hover);
  --create-bgPressed: var(--create-bg-pressed);
  --success-bgDefault: var(--success-bg-default);
  --success-bgHover: var(--success-bg-hover);
  --success-bgPressed: var(--success-bg-pressed);
  --destructive-bgDefault: var(--destructive-bg-default);
  --destructive-bgHover: var(--destructive-bg-hover);
  --destructive-bgPressed: var(--destructive-bg-pressed);
  --share-bgDefault: var(--share-bg-default);
  --share-bgHover: var(--share-bg-hover);
  --share-bgPressed: var(--share-bg-pressed);

  --card-bg: var(--color-white);
  --card-border: var(--color-grey-60);
  --card-hover-bg: var(--color-grey-20);
  --card-hover-border: var(--color-grey-40);
  --card-hover-text: var(--color-grey-80);
  --card-hover-icon: var(--color-grey-80);
  --card-hover-selected-bg: var(--color-brand-10);
  --card-hover-selected-text: var(--color-brand-90);
  --card-hover-selected-border: var(--color-brand-80);
  --card-hover-selected-icon: var(--color-brand-70);
  --card-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  --ds-shadow: var(--card-shadow);
  --card-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.08);
  --modal-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);

  --border-radius: 10px;
  --border-radius-sm: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 20px;
  --border-radius-pill: 999px;
  --sidebar-w: 280px;
  --app-content-padding-x: 40px;
  --app-content-padding-y: 32px;

  /* --- App + mobile additions (single source for the legacy --m-* set) --- */
  --color-ink-900: #172033;        /* cool heading ink (was --m-ink) */
  --color-ink-600: #5a6475;        /* muted cool text (was --m-ink-soft) */
  --bg-app: #f6f8fb;               /* app canvas on mobile (was --m-bg) */
  --color-brand-tint: #e7f2fd;     /* light brand wash (was --m-brand-tint) */
  --shadow-soft-sm: 0 5px 16px rgba(19, 33, 68, 0.04);

  /* Aging / overdue financial ramp (0–5d teal → >120d red) */
  --color-age-1: #00c785;
  --color-age-2: #5bbf3a;
  --color-age-3: #b0bf2e;
  --color-age-4: #e0a008;
  --color-age-5: #e0660a;
  --color-age-6: #d60000;

  /* Operations board — cohesive status ramp (Importada → Finalizada) + per-track + per-state.
     Replaces the raw bootstrap hexes in OperationsView's inline <style>. */
  --op-status-importada: #64748b;   /* slate    */
  --op-status-analise:   #0077d4;   /* brand    */
  --op-status-assinatura:#d98212;   /* amber    */
  --op-status-assinada:  #16a34a;   /* green    */
  --op-status-aprovada:  #16a34a;   /* green    */
  --op-status-rejeitada: #dc2626;   /* red      */
  --op-status-finalizada:#7c3aed;   /* violet   */

  /* Review tracks (Operacional / Crédito / Checagem / Diretoria) */
  --op-track-operacional: #1d6fd0;
  --op-track-credito:     #2e9e57;
  --op-track-checagem:    #d98212;
  --op-track-diretoria:   #d83b3b;

  /* Per-track review state (the card "pipeline" segment fill) */
  --op-state-waiting:  #eef1f5; --op-state-waiting-ink:  #5a6475;  /* Aguardando */
  --op-state-progress: #fef3d8; --op-state-progress-ink: #9a6a00;  /* Em análise */
  --op-state-approved: #dcf5e4; --op-state-approved-ink: #11743b;  /* Aprovado   */
  --op-state-rejected: #fde3e3; --op-state-rejected-ink: #b21f1f;  /* Desaprovado*/
}