/* layout_variables.css */
/* Centralise ici toutes les couleurs (textes, backgrounds, borders, shadows, gradients) */

:root{
  /* Brand */
  --color-brand: #009b7d;
  --color-brand-dark: #009b7c;
  --color-brand-accent: #158c71;
  --color-brand-soft: #75dec0;

  /* Neutrals */
  --color-black: #000;
  --color-white: #fff;

  --color-text-primary: #333333;
  --color-text-on-dark: #ffffff;

  --color-text-strong: rgba(0, 0, 0, 0.80);
  --color-text-strong-70: rgba(0, 0, 0, 0.70);
  --color-text-muted: #7c7c7c;
  --color-text-muted-2: #464646;
  --color-text-note: #555;
  --color-text-grey: grey;
  --color-text-lightslategray: lightslategray;
  --color-text-darkslategrey: darkslategrey;

  /* Page backgrounds */
  --color-bg-body: #000;
  --color-bg-main: #eef2f7;
  --color-bg-surface: #ffffff;
  --color-bg-soft: #f5f6f8;
  --color-bg-soft-2: #f2f2f2;
  --color-bg-soft-3: #f2f4f7;
  --color-bg-soft-4: #f0f0f0;
  --color-bg-soft-5: #e4e6eb;
  --color-bg-soft-6: #d8dadf;
  --color-bg-dark-1: #262626;
  --color-bg-dark-2: #393a3a;

  /* Borders */
  --color-border: #d3d3d3;
  --color-border-soft: rgba(15, 23, 42, .18);
  --color-border-ui: #dddfe3;

  /* Status */
  --color-success: #04AA6D;
  --color-connected: #28a745;
  --color-disconnected: #6c757d;
  --color-warning: orange;
  --color-danger: #d9343b;

  /* Effects */
  --color-shadow: rgba(74, 85, 95, 0.10);
  --color-shadow-hover: rgba(74, 85, 95, 0.30);
  --color-shadow-header: rgba(100, 100, 100, 1);
  --color-shadow-soft: rgba(0, 0, 0, 0.08);
  --color-shadow-inset: rgba(0, 0, 0, 0.10);
  --color-shadow-strong: rgba(0, 0, 0, 0.8);
  --color-shadow-brand-25: rgba(13, 161, 146, 0.25);
  --color-shadow-brand-35: rgba(13, 161, 146, 0.35);

  /* Text shadow */
  --shadow-text-on-brand: 1px 1px 1px rgba(0, 0, 0, 0.40);

  /* UI specific */
  --color-header-link-bg: var(--color-bg-dark-2);
  --color-button-bg: var(--color-black);
  --color-button-text: var(--color-white);

  /* Offer banner */
  --gradient-offer: linear-gradient(135deg, #E9FFF7 0%, #D8F7EC 100%);
  --color-offer-text: #135642;
  --color-offer-border: var(--color-brand-soft);
  --color-offer-shadow: rgba(19, 86, 66, .10);

  /* Pricing palette */
  --pricing-color1-bg: #000;
  --pricing-color1-text: #fff;

  --pricing-color2-bg: #add7f0;
  --pricing-color2-text: #014F86;

  --pricing-color3-bg: #ffd098;
  --pricing-color3-text: #7A4A1D;

  --pricing-color4-bg: #75dec0;
  --pricing-color4-text: #135642;

  /* Usage bar */
  --usage-gradient: linear-gradient(to right, #76c7c0, #34a79f);

  /* Misc */
  --color-hover-brand-soft: #75ddc0;
  --color-row-title-bg: rgba(100, 100, 100, .1);
  --color-highlight-bg: rgba(245, 246, 248, 0.7);
  --color-step-line: #edf3f3;
  --color-step-active: #009b7d;

  /* Links */
  --color-link: var(--color-brand-accent);
  --color-link-hover: var(--color-black);

  /* Shadows (composées) */
  --shadow-card: 0 0 24px var(--color-shadow);
  --shadow-card-hover: 0 0 24px var(--color-shadow-hover);
  --shadow-header: 0 20px 20px -20px var(--color-shadow-header);
  --shadow-header-link: 0 0px 32px -8px var(--color-shadow-header);
  --shadow-support: 0 10px 25px var(--color-shadow-brand-25);
  --shadow-support-hover: 0 14px 32px var(--color-shadow-brand-35);
  --shadow-soft: 0 8px 24px var(--color-shadow-soft);
  --shadow-inset: inset 0 2px 4px var(--color-shadow-inset);
}