/* =============================================================================
   DEVAITO ADMIN — DESIGN TOKENS  (single source of truth)
   -----------------------------------------------------------------------------
   Charter: one accent (#472AF2), one neutral scale, semantic colors, one type
   family, 4px spacing, 3 radii, 3 shadows. Sober, professional, dense.

   HOW THIS FILE IS SAFE (zero light-mode regression):
   - This file only DECLARES custom properties. In light mode nothing here
     touches a real element, so light rendering is byte-identical until a
     component opts in with var(--dv-*). Migration happens in Phases 2-3.
   - Dark tokens are redefined ONLY under html.agent-dashboard-dark (the class
     head.blade.php already emits when session mood=dark). No component override
     lives here — dark is a pure token remap, per charter.
   - Every text/background pair below is WCAG AA in BOTH modes (see
     docs/admin-redesign/CONTRASTE.md for the measured ratios).

   Load once, globally, in head.blade.php. Additive & reversible.
   ========================================================================== */

:root {
  /* ======================================================================
     LAYER 1 — PRIMITIVES  (raw materials; components never consume these
     directly — they consume the semantic layer below)
     ====================================================================== */

  /* Brand accent ramp — anchored on the charter accent #472AF2 (=purple-600) */
  --dv-purple-50:  #ecebfe;
  --dv-purple-100: #dcd9fd;
  --dv-purple-200: #c1b9fb;
  --dv-purple-300: #9e90f8;
  --dv-purple-400: #7c62f7;
  --dv-purple-500: #5a3ff5;
  --dv-purple-600: #472AF2; /* ← CHARTER ACCENT */
  --dv-purple-700: #3a20d6;
  --dv-purple-800: #2f1aad;
  --dv-purple-900: #241573;

  /* Single neutral scale — the ONLY greys in the admin */
  --dv-gray-0:    #ffffff;
  --dv-gray-25:   #fbfbfc;
  --dv-gray-50:   #f6f7f9;
  --dv-gray-100:  #eceef2;
  --dv-gray-200:  #e2e5ea;
  --dv-gray-300:  #cbd0d9;
  --dv-gray-400:  #a7aebc;
  --dv-gray-500:  #7d8595;
  --dv-gray-600:  #5b6172;
  --dv-gray-700:  #434959;
  --dv-gray-800:  #2c313d;
  --dv-gray-900:  #1d2230;
  --dv-gray-950:  #14171f;
  --dv-gray-1000: #0d0f15;

  /* Semantic hues (fills + accessible foregrounds + tints, per mode) */
  --dv-green-fill:  #17a56b;
  --dv-amber-fill:  #f5a623;
  --dv-red-fill:    #e5484d;
  --dv-blue-fill:   #2f6fed;

  /* ======================================================================
     LAYER 3 — SCALES  (spacing / radius / shadow / type)
     ====================================================================== */

  /* Spacing — 4px scale ONLY */
  --dv-space-0:  0;
  --dv-space-1:  4px;
  --dv-space-2:  8px;
  --dv-space-3:  12px;
  --dv-space-4:  16px;
  --dv-space-5:  20px;
  --dv-space-6:  24px;
  --dv-space-8:  32px;
  --dv-space-10: 40px;
  --dv-space-12: 48px;
  --dv-space-16: 64px;

  /* Radii — 3 steps (+ full for circular avatars/switches only) */
  --dv-radius-sm:   6px;
  --dv-radius-md:   10px;
  --dv-radius-lg:   14px;
  --dv-radius-full: 999px;

  /* Shadows — 3 discrete elevations (light) */
  --dv-shadow-1: 0 1px 2px rgba(20, 23, 31, 0.06);
  --dv-shadow-2: 0 4px 12px rgba(20, 23, 31, 0.08);
  --dv-shadow-3: 0 12px 28px rgba(20, 23, 31, 0.14);

  /* Typography — ONE family, 6 sizes, 3 weights */
  --dv-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dv-font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --dv-text-xs:  12px;
  --dv-text-sm:  13px;
  --dv-text-md:  14px; /* base */
  --dv-text-lg:  16px;
  --dv-text-xl:  20px;
  --dv-text-2xl: 28px;
  --dv-weight-regular:  400;
  --dv-weight-medium:   500;
  --dv-weight-semibold: 600;
  --dv-leading-tight:  1.25;
  --dv-leading-normal: 1.5;

  /* ======================================================================
     LAYER 2 — SEMANTIC (LIGHT)  ← the only layer components consume
     ====================================================================== */

  /* Surfaces */
  --dv-bg:        var(--dv-gray-50);   /* app background          */
  --dv-surface:   var(--dv-gray-0);    /* cards / panels          */
  --dv-surface-2: var(--dv-gray-100);  /* inputs / subtle fills   */
  --dv-sunken:    #eceef2;             /* wells / track / upload  */

  /* Text */
  --dv-text:         var(--dv-gray-900); /* primary   */
  --dv-text-2:       var(--dv-gray-600); /* secondary */
  --dv-text-3:       #656c7d;            /* muted / hints (AA)     */
  --dv-text-inverse: var(--dv-gray-0);

  /* Borders */
  --dv-border:        var(--dv-gray-200); /* decorative dividers    */
  --dv-border-strong: #7d8595;            /* input outlines (UI 3:1)*/

  /* Accent (brand action) */
  --dv-accent:       var(--dv-purple-600); /* primary button fill    */
  --dv-accent-hover: var(--dv-purple-700);
  --dv-accent-fg:    #4326e6;              /* accent AS text / link  */
  --dv-accent-weak:  var(--dv-purple-50);  /* active tint background */
  --dv-on-accent:    #ffffff;              /* text on accent fill    */

  /* Semantic status (foreground text + weak tint background) */
  --dv-success:      #0f7350;  --dv-success-weak: #e6f5ee;
  --dv-warning:      #8a5f00;  --dv-warning-weak: #fbf0d9;
  --dv-danger:       #cc2f26;  --dv-danger-weak:  #fdecea;
  --dv-info:         #2159c5;  --dv-info-weak:    #e9f0fd;

  /* Solid semantic FILLS for buttons/counters — mode-independent (NOT overridden
     in dark) and dark enough that white text clears AA in BOTH modes:
     white/#cc2f26=5.25, white/#0f7350=5.85, white/#2159c5=6.36; warning is light
     so it pairs with dark text (--dv-on-warning): #1d2230/#f5a623=7.83. */
  --dv-danger-solid:  #cc2f26;
  --dv-success-solid: #0f7350;
  --dv-info-solid:    #2159c5;
  --dv-warning-solid: #f5a623;
  --dv-on-warning:    #1d2230;

  /* Data-viz categorical palette — the ONE sanctioned multi-hue set (charts,
     brand/category tints). Mode-independent for cross-mode chart consistency.
     Use ONLY for data visualization, never for chrome/semantic UI. */
  --dv-chart-1: #472af2; /* brand   */
  --dv-chart-2: #17a56b; /* green   */
  --dv-chart-3: #f5a623; /* amber   */
  --dv-chart-4: #2f6fed; /* blue    */
  --dv-chart-5: #e5484d; /* red     */
  --dv-chart-6: #8b5cf6; /* violet  */
  --dv-chart-7: #06b6a4; /* teal    */
  --dv-chart-8: #ec4899; /* pink    */

  /* ----------------------------------------------------------------------
     SALES CHANNELS — the ONE palette for Airbnb / Booking.com / Vrbo / Expedia
     / Agoda / direct. It lived COPIED in three admin views with three different
     answers for the same channel (Airbnb was #FF5A5F on one screen and #d93b60
     on another; Agoda was purple on two and grey on the third), and the rates
     calendar painted every channel the same generic amber. A colour that means
     "which network sold this night" is data, and data has one source.

     TWO ROLES, because the same hue cannot do both jobs:
       --dv-ch-<x>        line / dot / underline. Only has to be SEEN: >= 3.0
                          against BOTH surfaces (#ffffff and dark #1f1c2b).
       --dv-ch-<x>-solid  filled bar carrying WHITE text: white >= 4.5, the same
                          rule this file already applies to --dv-*-solid.
     Mode-independent (never redefined in dark), so the JS that stamps a channel
     class never has to know the theme.

     Measured (contrast vs white text / vs light surface / vs dark surface):
       airbnb  #ff5a5f  3.05 / 3.05 / 5.46   solid #d81b48  5.04
       booking #1268e0  5.14 / 5.14 / 3.24   solid #0f5bc4  6.34
       vrbo    #12808f  4.66 / 4.66 / 3.58   solid #0f6f7c  5.86
       expedia #c07c00  3.43 / 3.43 / 4.86   solid #9a6300  5.05
       agoda   #8a4bd0  5.25 / 5.25 / 3.17   solid #7a3fc4  6.30
       direct  #10804f  4.97 / 4.97 / 3.35   solid #0f7350  5.85
     Mutual separation (CIE76 dE on the accent role) >= 30.8 — no two channels
     read alike, which a per-channel derivation from brand colours does NOT give
     you for free: Booking.com and Vrbo are both blue, so Vrbo takes its teal.

     Airbnb keeps its true Rausch #FF5A5F for the accent role: it clears 3.0 as a
     line, and only fails as a text background — which is exactly why the solid
     role exists instead of darkening the brand everywhere.

     CAUTION — these hues deliberately sit near --dv-danger / --dv-info /
     --dv-warning / --dv-success (Airbnb dE 19.6 from danger, Booking 8.4 from
     info, Expedia 18.2 from warning, direct 9.7 from success). Brand colours ARE
     those hues; we do not get to pick. So a channel is drawn as a DOT, an
     UNDERLINE or a spanning BAR — never as a status-shaped pill, so shape tells
     the reader which alphabet they are in. */
  --dv-ch-airbnb:        #ff5a5f;  --dv-ch-airbnb-solid:  #d81b48;
  --dv-ch-booking:       #1268e0;  --dv-ch-booking-solid: #0f5bc4;
  --dv-ch-vrbo:          #12808f;  --dv-ch-vrbo-solid:    #0f6f7c;
  --dv-ch-expedia:       #c07c00;  --dv-ch-expedia-solid: #9a6300;
  --dv-ch-agoda:         #8a4bd0;  --dv-ch-agoda-solid:   #7a3fc4;
  --dv-ch-direct:        #10804f;  --dv-ch-direct-solid:  #0f7350;
  /* Un canal que nous ne connaissons pas encore garde une couleur neutre : lui
     en inventer une le ferait passer pour un réseau identifié. */
  --dv-ch-autre:         #6d7386;  --dv-ch-autre-solid:   #5b6172;

  /* Focus */
  --dv-focus:      var(--dv-accent);
  --dv-focus-ring: 0 0 0 3px rgba(71, 42, 242, 0.35);

  /* Order-status aliases (map the ad-hoc badge colors onto the semantic set) */
  --dv-status-pending:   var(--dv-warning);
  --dv-status-processing:var(--dv-info);
  --dv-status-shipped:   var(--dv-text-2);
  --dv-status-delivered: var(--dv-success);
  --dv-status-cancelled: var(--dv-danger);
  --dv-status-paid:      var(--dv-success);
  --dv-status-unpaid:    var(--dv-danger);
}

/* ==========================================================================
   LAYER 2 — SEMANTIC (DARK)   redefine ONLY semantic tokens, nothing else.
   Scoped to html.agent-dashboard-dark (emitted by head.blade.php on mood=dark).
   ========================================================================== */
html.agent-dashboard-dark {
  /* Surfaces (subtle brand-tinted neutrals) */
  --dv-bg:        #16141f;
  --dv-surface:   #1f1c2b;
  --dv-surface-2: #2a2739;
  --dv-sunken:    #17151f;

  /* Text */
  --dv-text:         #ecebf5;
  --dv-text-2:       #b3add0;
  --dv-text-3:       #918bab;
  --dv-text-inverse: var(--dv-gray-900);

  /* Borders */
  --dv-border:        #35304a;
  --dv-border-strong: #6d6690;

  /* Accent (lightened for dark surfaces while staying the SAME brand hue) */
  --dv-accent:       #6a51f6; /* fill (white text passes AA)        */
  --dv-accent-hover: #5e46ec;
  --dv-accent-fg:    #ab9bff; /* accent AS text / link on dark      */
  --dv-accent-weak:  #241d40;
  --dv-on-accent:    #ffffff;

  /* Semantic status (brightened foregrounds + deep tints) */
  --dv-success:      #3ccf8e;  --dv-success-weak: #123026;
  --dv-warning:      #f2b53d;  --dv-warning-weak: #322612;
  --dv-danger:       #f4726b;  --dv-danger-weak:  #3a1e1d;
  --dv-info:         #69a4f2;  --dv-info-weak:    #17233d;

  /* Focus */
  --dv-focus:      var(--dv-accent-fg);
  --dv-focus-ring: 0 0 0 3px rgba(171, 155, 255, 0.35);

  /* Shadows — deeper on dark */
  --dv-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --dv-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --dv-shadow-3: 0 12px 28px rgba(0, 0, 0, 0.55);

  /* Status aliases inherit the redefined semantic tokens above automatically. */
}

/* ==========================================================================
   BRIDGE — retrofit the already-shipped legacy dark layer (--dm-*) onto the
   charter tokens so darkmode-rtl-fixes.css inherits the corrected, on-charter
   accent (was off-charter #8b6dff). var() resolves regardless of load order.
   ========================================================================== */
html.agent-dashboard-dark {
  --dm-bg:          var(--dv-bg);
  --dm-surface:     var(--dv-surface);
  --dm-surface-2:   var(--dv-surface-2);
  --dm-surface-3:   var(--dv-sunken);
  --dm-border:      var(--dv-border);
  --dm-border-soft: var(--dv-border);
  --dm-text:        var(--dv-text);
  --dm-text-2:      var(--dv-text-2);
  --dm-text-3:      var(--dv-text-3);
  --dm-accent:      var(--dv-accent-fg);
  --dm-accent-weak: var(--dv-accent-weak);
  --dm-shadow:      var(--dv-shadow-2);
}