/* ==========================================================================
   E-deal 2025 Design System - CSS Tokens
   Source: Figma "Design system | E-deal 2025"
   Extracted: 2026-04-03 via Figma MCP
   ========================================================================== */

:root {

  /* ── Layout: sticky header ──────────────────────────────────────────── */
  /* Single source of truth for the sticky #headerContainer height. Consumed by
     the header height rules in navigation.css and by any element that must sit
     below the header (e.g. sticky sidebar sections). Change here only. */
  --topbar-height: 56px;                       /* #infoBarContainer */
  --menubar-height: 50px;                      /* #mainMenu */
  --header-height: calc(var(--topbar-height) + var(--menubar-height));

  /* Width of the left rail the secondary bar becomes at tablet width on design2027 pages. */
  --nav-rail-width: 240px;

  /* Max height for scrollable overlay bodies (column-picker body, list-switcher
     dropdown) so long content scrolls instead of overflowing the viewport. */
  --overlay-max-height: 60vh;

  /* ── Typography ─────────────────────────────────────────────────────── */

  --font-family-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-icon: 'Font Awesome 6 Pro';

  /* Font sizes */
  --text-size-kpi: 10px;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --text-size-p3: 12px;
  --text-size-p2: 14px;
  --text-size-p1: 16px;
  --text-size-h3: 18px;
  --text-size-h2: 20px;
  --text-size-h1: 24px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line heights */
  --line-height-tight: 18px;   /* P3, badges, pills */
  --line-height-snug: 20px;    /* P2, field labels */
  --line-height-normal: 24px;  /* P1, H3, body, buttons */
  --line-height-100: 100%;     /* H1, H2, icons */
  --line-height-15: 15px;      /* Icons in buttons */

  /* ── Blue palette ───────────────────────────────────────────────────── */

  --color-blue-100: #F2F6FA;
  --color-blue-200: #E3F1FC;
  --color-blue-300: #C5E3FC;
  --color-blue-400: #92CBFC;
  --color-blue-500: #5FB2FA;
  --color-blue-600: #4294DB;
  --color-blue-700: #1C72BD;
  --color-blue-800: #0A477D;
  --color-blue-900: #00274A;
  --color-blue-1000: #001E38;

  /* ── Brand (green) palette ──────────────────────────────────────────── */

  --color-brand-100: #EDFAF4;
  --color-brand-200: #BBF0D6;
  --color-brand-300: #8ADEB5;
  --color-brand-400: #53CF93;
  --color-brand-500: #37B879;

  /* ── Pink / CTA palette ─────────────────────────────────────────────── */

  --color-pink-100: #FFF2F7;
  --color-pink-150: #FFD9E9;
  --color-pink-200: #FCB1D0;
  --color-pink-300: #FA7AB0;
  --color-pink-400: #F2468F;
  --color-pink-500: #E2136A;
  --color-pink-600: #BF0D58;
  --color-pink-700: #930340;
  --color-pink-800: #780636;
  --color-pink-900: #540325;

  /* ── Gray palette ───────────────────────────────────────────────────── */

  --color-white: #FFFFFF;
  --color-gray-25: #FAFBFC;
  --color-gray-50: #F5F7FA;
  --color-gray-100: #E9EDF2;
  --color-gray-150: #E0E8F3;
  --color-gray-200: #CAD3DB;
  --color-gray-300: #AFBDCC;
  --color-gray-400: #8799AB;
  --color-gray-500: #65788A;
  --color-gray-600: #4B5E70;
  --color-gray-700: #2F475E;
  --color-gray-800: #1B3752;
  --color-gray-900: #092642;

  /* ── Status colors ──────────────────────────────────────────────────── */

  --color-success-100: #EBF7F3;
  --color-success-300: #96EBCD;
  --color-success-500: #36AD83;
  --color-success-700: #178A61;

  --color-warning-100: #FFF6EB;
  --color-warning-300: #F5CD9F;
  --color-warning-500: #FFA238;
  --color-warning-700: #E88413;

  --color-error-100: #FAEBEF;
  --color-error-300: #F288A1;
  --color-error-500: #D4244E;
  --color-error-700: #BA0B35;

  /* ── Semantic aliases ───────────────────────────────────────────────── */

  --color-text: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-placeholder: var(--color-gray-500);
  /* Placeholder text inside a form field, whether native ::placeholder or the legacy
     span.placeholder overlay. Separate from --color-text-placeholder, which also colours muted
     non-placeholder text (field helper text, panel hints) that must stay readable at gray-500. */
  --color-text-input-placeholder: var(--color-gray-300);
  --color-text-disabled: var(--color-gray-400);
  /* Being required is a different state from being wrong, so it keeps its own name - but it
     carries the error red, because the marker and a validation message sit on the same field and
     read as one thing. Split the values here if design ever wants the two states told apart. */
  --color-text-required: var(--color-error-700);

  --color-bg-page: var(--color-white);
  --color-bg-input: var(--color-gray-50);
  /* The paint a field carries while focused, whatever its widget: text input, textarea, select
     and dropdown all read this one token, so the states cannot drift apart per field type. */
  --color-bg-input-focus: var(--color-white);
  /* A step darker than the gray-50 an enabled field carries, so a disabled field stays
     distinguishable from an editable one. Designer-confirmed value. */
  --color-bg-input-disabled: var(--color-gray-200);
  --color-bg-chip: var(--color-gray-50);
  /* Diagonal white hatching laid over a warning-100 cream tint — used for the
     archived header banner (organisms/headers.css) and archived table rows
     (organisms/tables.css) so both surfaces share the same visual language. */
  --bg-hatched-warning: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      var(--color-white) 14px,
      var(--color-white) 16px
  );

  --color-border-input: transparent;
  --color-border-input-focus: #03569F;  /* blue-750 from components */
  --color-border-secondary: var(--color-gray-300);
  --color-border-chip: var(--color-gray-100);

  /* ── Pill colours (Figma: Colours/Pills) ───────────────────────────── */
  --color-pill-red: #F9DDDC;
  --color-pill-green: #D1EEE0;

  --color-primary: var(--color-pink-500);
  --color-primary-hover: var(--color-pink-600);

  --color-link: #03569F;
  --color-link-hover: #013D7A;

  --color-icon-default: var(--color-gray-600);
  --color-icon-placeholder: var(--color-gray-400);

  /* ── Extra / Pill colors (from components) ──────────────────────────── */

  --color-extra-blue: #2E90FA;
  --color-pill-deep-blue: #CDDCFD;
  --color-pill-deep-blue-text: #2047C4;
  --color-pill-grey: #D5DADF;

  /* ── Spacing ────────────────────────────────────────────────────────── */

  --space-tiny: 2px;   /* 3x-small: gap between icon and text in badges, pills, chips */
  --space-1: 4px;    /* 2x-small: pill gap, label gap */
  --space-2: 8px;    /* x-small: pill padding, chip padding, input gap */
  --space-3: 12px;   /* button padding-y, button gap, input padding-x */
  --space-4: 16px;   /* button padding-x */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Semantic: vertical gap between page sections (record-layout / notes / tabs) and between the
     tab bar and its content. One knob to retune all section spacing without touching --space-3. */
  --section-gap: var(--space-3);   /* 12px */

  /* Semantic: gap between a field's trailing action icons (cross / chevron / magnifying glass /
     help "?"). Designer-confirmed 16px (Figma "fonction" field). One knob for all field types. */
  --icon-gap: var(--space-4);      /* 16px */

  /* Semantic: box size of a field's trailing action-icon buttons (clear, magnifier, chevron)
     so they are visually equal across field types (EDSELECT, autocomplete, date...). */
  --field-icon-btn-size: 20px;

  /* ── Border radius ──────────────────────────────────────────────────── */

  --radius-sm: 4px;    /* checkbox */
  --radius-md: 8px;    /* buttons, inputs, cards */
  --radius-lg: 12px;   /* toggle */
  --radius-xl: 20px;   /* pills, badges, chips */
  --radius-full: 64px; /* avatars */

  /* ── Borders ────────────────────────────────────────────────────────── */

  --border-width-sm: 1px;

  /* ── Shadows ────────────────────────────────────────────────────────── */

  --shadow-sm:
    0px 0px 4px rgba(0, 0, 0, 0.06),
    0px 4px 4px rgba(0, 0, 0, 0.05);

  --shadow-md:
    0px 0px 8px rgba(0, 0, 0, 0.08),
    0px 8px 8px rgba(0, 0, 0, 0.08);

  --shadow-lg:
    0px 4px 16px rgba(31, 51, 91, 0.08),
    0px 12px 16px -2px rgba(31, 51, 91, 0.06);

  --shadow-btn-primary:
    0px 2px 8px rgba(226, 19, 106, 0.15);

  --shadow-toggle:
    0px 1px 2px #1018280F,
    0px 1px 3px #1018281A;

  /* ── Z-index ────────────────────────────────────────────────────────── */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-popover: 300;
  --z-modal: 1100;
  --z-popover-above-modal: calc(var(--z-modal) + 50); /* popovers/tooltips anchored inside a modal — must layer above modal but below toast */
  --z-toast: 1200;

  /* ── Component sizes ────────────────────────────────────────────────── */

  --btn-height-sm: 36px;
  --btn-height-md: 38px;
  --btn-height-lg: 44px;

  --badge-height: 16px;
  --badge-min-width: 20px;

  --pill-status-height: 24px;
  --pill-tag-height-xs: 20px;
  --pill-tag-height-sm: 24px;
  --pill-tag-height-md: 28px;
  --pill-tag-height-lg: 32px;

  --chip-height: 32px;

  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-width-lg: 44px;
  --toggle-height-lg: 24px;

  --checkbox-size: 16px;

  --icon-size-xs: 8px;
  --icon-size-sm: 12px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-size-2xl: 32px;

  /* ── Wall card geometry ─────────────────────────────────────────────── */
  /* Shared by wall-cards.css, organisms/notifications.css, organisms/dashboard.css.
     Kept in tokens.css (always loaded) so the notifications popup can pick them
     up on non-migrated pages where skin.css is not loaded.
     Keep in sync with the .ed-card avatar (20px) + gap (8px) = 28px indent
     and the action area reservation (bubble 24 + gap 8 + check 24 + 16 margin, rounded). */
  --wall-card-body-indent: 28px;
  --wall-card-actions-width: 80px;
}

/* At tablet width the design2027 secondary bar leaves the header flow and becomes the left rail,
   so the sticky header is the topbar alone. --header-height is declared again so it resolves with
   the tablet --menubar-height. Legacy pages also get the rail from navigation.css, but keep the
   :root values, because this block targets .skin-design2027 only. */
@media (max-width: 1023px) {
  .skin-design2027 {
    --menubar-height: 0px;
    --header-height: calc(var(--topbar-height) + var(--menubar-height));
  }
}