/* ============================================================================
   SARP palettes
   ----------------------------------------------------------------------------
   A palette re-seeds only the brand and chrome families. Everything else in
   sarp-tokens.css already derives from those, so one class on the shell
   re-skins the whole application without touching a component.

   Load AFTER sarp-tokens.css.

   Default is Retail Orange, which matches the counter workspace today.
   ========================================================================== */

/* ── Retail Orange (default) ───────────────────────────────────────────────
   Also written onto :root so a page rendered before the shell class is applied
   (the login screen, an error page) still gets the brand rather than bare
   neutrals. */
:root,
.theme-retail-orange {
  --sarp-brand-tint:    #FFF1E7;
  --sarp-brand-tint-2:  #FFDFC9;
  --sarp-brand-edge:    #F59E5B;
  --sarp-brand:         #C2410C;
  --sarp-brand-on-tint: #9A3412;
  --sarp-brand-hover:   #9A3412;
  --sarp-brand-pressed: #7C2D12;

  --sarp-chrome:        #7C2D12;
  --sarp-chrome-hover:  #92351A;
  --sarp-chrome-text:   #FDF3EC;
  --sarp-chrome-faint:  #E8BFA4;
}

/* ── Ocean Blue ─────────────────────────────────────────────────────────── */
.theme-ocean-blue {
  --sarp-brand-tint:    #EAF3F8;
  --sarp-brand-tint-2:  #CFE3EF;
  --sarp-brand-edge:    #6BA6C9;
  --sarp-brand:         #1C5D80;
  --sarp-brand-on-tint: #164A66;
  --sarp-brand-hover:   #164A66;
  --sarp-brand-pressed: #113A51;

  --sarp-chrome:        #12354B;
  --sarp-chrome-hover:  #1B4763;
  --sarp-chrome-text:   #EDF5FA;
  --sarp-chrome-faint:  #A8C6D9;
}

/* ── Deep Teal ──────────────────────────────────────────────────────────── */
.theme-deep-teal {
  --sarp-brand-tint:    #E6F3F1;
  --sarp-brand-tint-2:  #C6E4E0;
  --sarp-brand-edge:    #58AFA6;
  --sarp-brand:         #0F6E66;
  --sarp-brand-on-tint: #0B564F;
  --sarp-brand-hover:   #0B564F;
  --sarp-brand-pressed: #08423D;

  --sarp-chrome:        #0F3D3A;
  --sarp-chrome-hover:  #17514D;
  --sarp-chrome-text:   #E9F5F3;
  --sarp-chrome-faint:  #9CC7C2;
}

/* ── Indigo ─────────────────────────────────────────────────────────────── */
.theme-indigo {
  --sarp-brand-tint:    #EEEFF9;
  --sarp-brand-tint-2:  #D6D9F0;
  --sarp-brand-edge:    #7C88D6;
  --sarp-brand:         #3B47A0;
  --sarp-brand-on-tint: #2F3980;
  --sarp-brand-hover:   #2F3980;
  --sarp-brand-pressed: #252C64;

  --sarp-chrome:        #232A55;
  --sarp-chrome-hover:  #2F386E;
  --sarp-chrome-text:   #EFF1FB;
  --sarp-chrome-faint:  #AFB6E0;
}

/* ── Forest ─────────────────────────────────────────────────────────────── */
.theme-forest {
  --sarp-brand-tint:    #E9F3EC;
  --sarp-brand-tint-2:  #CBE3D3;
  --sarp-brand-edge:    #5FAE7C;
  --sarp-brand:         #1F6B41;
  --sarp-brand-on-tint: #185534;
  --sarp-brand-hover:   #185534;
  --sarp-brand-pressed: #124228;

  --sarp-chrome:        #14361F;
  --sarp-chrome-hover:  #1D482C;
  --sarp-chrome-text:   #ECF5EF;
  --sarp-chrome-faint:  #9FC5AC;
}

/* ── Slate Navy ─────────────────────────────────────────────────────────── */
.theme-slate-navy {
  --sarp-brand-tint:    #EDF1F4;
  --sarp-brand-tint-2:  #D3DCE4;
  --sarp-brand-edge:    #7591AB;
  --sarp-brand:         #34506B;
  --sarp-brand-on-tint: #2A4157;
  --sarp-brand-hover:   #2A4157;
  --sarp-brand-pressed: #203243;

  --sarp-chrome:        #1B2733;
  --sarp-chrome-hover:  #263646;
  --sarp-chrome-text:   #EEF2F6;
  --sarp-chrome-faint:  #A3B4C4;
}

/* ── Custom ────────────────────────────────────────────────────────────────
   Seeded from --sarp-brand-seed, set inline on the shell by the appearance
   drawer. Every other value is mixed from it, so one hex drives the workspace.
   The seed is validated for contrast before it is stored. */
.theme-custom {
  --sarp-brand-seed:    #C2410C;

  --sarp-brand:         var(--sarp-brand-seed);
  --sarp-brand-hover:   color-mix(in srgb, var(--sarp-brand-seed) 82%, #10161C);
  --sarp-brand-pressed: color-mix(in srgb, var(--sarp-brand-seed) 66%, #10161C);
  --sarp-brand-on-tint: color-mix(in srgb, var(--sarp-brand-seed) 84%, #10161C);
  --sarp-brand-edge:    color-mix(in srgb, var(--sarp-brand-seed) 58%, #FFFFFF);
  --sarp-brand-tint:    color-mix(in srgb, var(--sarp-brand-seed) 10%, #FFFFFF);
  --sarp-brand-tint-2:  color-mix(in srgb, var(--sarp-brand-seed) 22%, #FFFFFF);

  --sarp-chrome:        color-mix(in srgb, var(--sarp-brand-seed) 48%, #10161C);
  --sarp-chrome-hover:  color-mix(in srgb, var(--sarp-brand-seed) 60%, #10161C);
  --sarp-chrome-text:   #FFFFFF;
  --sarp-chrome-faint:  color-mix(in srgb, var(--sarp-brand-seed) 34%, #FFFFFF);
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Neutrals invert; the brand family lightens so it still reads as an accent on
   a dark ground. Guarded with :not([data-theme="light"]) so an explicit light
   choice beats a dark operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sarp-n-0:    #131A20;
    --sarp-n-25:   #172029;
    --sarp-n-50:   #10161C;
    --sarp-n-100:  #1C2731;
    --sarp-n-200:  #26333E;
    --sarp-n-300:  #33434F;
    --sarp-n-500:  #7C8B98;
    --sarp-n-600:  #98A6B2;
    --sarp-n-700:  #B6C2CC;
    --sarp-n-850:  #0C1116;
    --sarp-n-900:  #E4EBF1;

    --sarp-surface-dark: #0C1116;
    --sarp-shadow:       rgba(0, 0, 0, .40);
    --sarp-scrim:        rgba(4, 8, 11, .62);

    /* the grid header keeps its own foreground: --sarp-action-text is white on
       a light accent and would vanish on the dark bar */
    --sarp-grid-head:      #232F3A;
    --sarp-grid-head-text: #DCE5EC;

    /* Status families invert too. Without these the semantic colours keep their
       light-mode values: a dark green on a dark card (2.06:1 measured) and a
       near-white tint that reads as a glaring chip on the dark ground. */
    --sarp-ok:            #5FBF85;
    --sarp-ok-tint:       #12241A;
    --sarp-ok-border:     #2C5C40;
    --sarp-warn:          #E0A54A;
    --sarp-warn-tint:     #2A2010;
    --sarp-warn-border:   #5C4A22;
    --sarp-warn-mark:     #E0A54A;
    --sarp-danger:        #E8827A;
    --sarp-danger-tint:   #2A1614;
    --sarp-danger-border: #5E2E2A;
    --sarp-info:          #6FB4D8;
    --sarp-info-tint:     #101F28;
    --sarp-info-border:   #2B4A5C;
  }

  /* brand families lighten so buttons stay legible on the dark ground */
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) .theme-retail-orange {
    --sarp-brand: #E2793C; --sarp-brand-hover: #EE8B51; --sarp-brand-pressed: #C8642C;
    --sarp-brand-tint: #2A1B12; --sarp-brand-tint-2: #3A2517;
    --sarp-brand-on-tint: #F0A87A; --sarp-brand-edge: #F2A470;
    --sarp-action-text: #16100A;
  }
  :root:not([data-theme="light"]) .theme-ocean-blue {
    --sarp-brand: #4E9BC4; --sarp-brand-hover: #62ACD3; --sarp-brand-pressed: #3E82A6;
    --sarp-brand-tint: #12212B; --sarp-brand-tint-2: #182F3D;
    --sarp-brand-on-tint: #93C6E0; --sarp-brand-edge: #7FB8D6; --sarp-action-text: #08131A;
  }
  :root:not([data-theme="light"]) .theme-deep-teal {
    --sarp-brand: #3FA69C; --sarp-brand-hover: #52B8AE; --sarp-brand-pressed: #338B83;
    --sarp-brand-tint: #10221F; --sarp-brand-tint-2: #163029;
    --sarp-brand-on-tint: #86CCC4; --sarp-brand-edge: #6FC0B7; --sarp-action-text: #061412;
  }
  :root:not([data-theme="light"]) .theme-indigo {
    --sarp-brand: #7581D6; --sarp-brand-hover: #8994E2; --sarp-brand-pressed: #5F6BBA;
    --sarp-brand-tint: #1A1D33; --sarp-brand-tint-2: #242946;
    --sarp-brand-on-tint: #AEB6EC; --sarp-brand-edge: #9AA3E4; --sarp-action-text: #0B0D18;
  }
  :root:not([data-theme="light"]) .theme-forest {
    --sarp-brand: #4FA873; --sarp-brand-hover: #61B884; --sarp-brand-pressed: #3F8C5E;
    --sarp-brand-tint: #12241A; --sarp-brand-tint-2: #183023;
    --sarp-brand-on-tint: #8ECCA5; --sarp-brand-edge: #79C193; --sarp-action-text: #06140C;
  }
  :root:not([data-theme="light"]) .theme-slate-navy {
    --sarp-brand: #6E8DA8; --sarp-brand-hover: #7F9EB8; --sarp-brand-pressed: #5A768E;
    --sarp-brand-tint: #171F27; --sarp-brand-tint-2: #202C36;
    --sarp-brand-on-tint: #A6BDD0; --sarp-brand-edge: #95AFC4; --sarp-action-text: #0A1016;
  }
  :root:not([data-theme="light"]) .theme-custom {
    --sarp-brand:         color-mix(in srgb, var(--sarp-brand-seed) 76%, #FFFFFF);
    --sarp-brand-hover:   color-mix(in srgb, var(--sarp-brand-seed) 86%, #FFFFFF);
    --sarp-brand-pressed: var(--sarp-brand-seed);
    --sarp-brand-tint:    color-mix(in srgb, var(--sarp-brand-seed) 20%, #10161C);
    --sarp-brand-tint-2:  color-mix(in srgb, var(--sarp-brand-seed) 32%, #10161C);
    --sarp-brand-on-tint: color-mix(in srgb, var(--sarp-brand-seed) 66%, #FFFFFF);
    --sarp-brand-edge:    color-mix(in srgb, var(--sarp-brand-seed) 60%, #FFFFFF);
    --sarp-action-text:   #10161C;
  }
}

/* ── Re-derive the action family per palette ───────────────────────────────
   sarp-tokens.css sets --sarp-action: var(--sarp-brand) on :root, so it is
   substituted once in :root context and inherits down already resolved --
   redefining --sarp-brand in a palette does not reach it. Restating the
   derivation on the theme element re-resolves it against that palette. */
.theme-retail-orange, .theme-ocean-blue, .theme-deep-teal,
.theme-indigo, .theme-forest, .theme-slate-navy, .theme-custom {
  --sarp-action:         var(--sarp-brand);
  --sarp-action-hover:   var(--sarp-brand-hover);
  --sarp-action-pressed: var(--sarp-brand-pressed);
  --sarp-action-tint:    var(--sarp-brand-tint);
  --sarp-action-on-tint: var(--sarp-brand-on-tint);
}