/* ==========================================================================
 OXFORD TRAVELS - selectable brand ramps
 sites/travels/assets/css/themes.css

 Loaded AFTER oxford.css so these blocks win on the brand ramp.

 Each block redefines ONLY --brand-50..900. Ink, lines, surfaces and the
 signal colours (success, warning, danger, star) are deliberately not themed:
 a visitor who picks Claret still needs "confirmed" to read green and body
 text to stay legible, and a theme that recoloured the neutrals would need its
 own contrast audit every time.

 HOW THE RAMPS WERE BUILT
 Every one keeps the lightness curve of the original blue, which is tuned for
 hierarchy, and takes its hue from the matching panel theme in
 sites/desk/assets/css/themes.css so the two products stay recognisably one
 family. Saturation is the desk value lifted for a consumer site, then clamped:
 the floor stops Graphite and Aubergine reading as grey, the ceiling stops
 anything going neon.

 Steps 600-900 carry white text, so each has a contrast floor of its own
 (4.5 / 6 / 8.5 / 11 against white) and was darkened until it cleared it. A
 single 4.5 floor was tried first and collapsed the ramp on green and teal,
 which cannot be both saturated and dark at 40%% lightness - 600 was pushed
 down until it WAS 700 and the primary button lost its hover state.

 THE MODULE ACCENTS
 oxford.css gives each product its own accent - flights blue, hotels teal,
 holidays coral - through [data-module]. Under the default theme that stands,
 because it is the designed palette. Under any OTHER theme it is overridden:
 choosing Claret means "make the site claret", and a claret site with teal
 hotel pages reads as a mistake rather than a choice.

 Adding a theme is one ramp block, one accent block, and one entry in
 travels_themes() in core/travels/app/support/themes.php. Nothing else.
 ========================================================================== */


/* --------------------------------------------------------------------------
   Oxford Blue - The house colour
   -------------------------------------------------------------------------- */
/* THE HOUSE COLOUR, MATCHED TO THE PARTNER PANEL.
   Steps 600-900 are the panel's own tokens verbatim - --ag-accent,
   --ag-brand and --ag-brand-deep from sites/desk/assets/css/themes.css - so a
   button here and a button there are the same navy, not two blues that nearly
   match. The light steps are interpolated at the panel's saturation rather
   than a lifted one: the point is to look like the desk, not like a brighter
   cousin of it. */
[data-theme="oxford"] {
    --brand-50:  #f5f7fa;
    --brand-100: #e7ecf4;
    --brand-200: #d1dbeb;
    --brand-300: #afc1df;
    --brand-400: #7f9fd2;
    --brand-500: #4b7bc8;
    --brand-600: #2f5d96;
    --brand-700: #24497f;
    --brand-800: #1b3a6b;
    --brand-900: #13294b;

    /* THE HERO GRADIENT RUNS DARK, LIKE THE PANEL'S RAIL.
       oxford.css builds it 600 -> 500 -> 400, which LIGHTENS towards the far
       corner - right for a bright consumer blue, wrong here: it faded the navy
       out to a pale wash and lost exactly the depth that makes the desk look
       like the desk. These are the rail's own three stops and its 168deg. */
    --accent-grad: linear-gradient(168deg, #496189 0%, #1b3a6b 38%, #13294b 100%);
}


/* --------------------------------------------------------------------------
   Harbour Blue - Muted maritime blue
   -------------------------------------------------------------------------- */
[data-theme="azure"] {
    --brand-50:  #f1f8fd;
    --brand-100: #ddeffa;
    --brand-200: #c3e2f7;
    --brand-300: #9acdf1;
    --brand-400: #66b3e7;
    --brand-500: #409cda;
    --brand-600: #1e76b2;
    --brand-700: #196091;
    --brand-800: #164a6e;
    --brand-900: #143b56;
}



/* --------------------------------------------------------------------------
   Ink - Cool and deep
   -------------------------------------------------------------------------- */
[data-theme="indigo"] {
    --brand-50:  #f4f4fb;
    --brand-100: #e4e5f4;
    --brand-200: #cfd2eb;
    --brand-300: #adb2dd;
    --brand-400: #848ac9;
    --brand-500: #636bb7;
    --brand-600: #404790;
    --brand-700: #343a76;
    --brand-800: #2a2e59;
    --brand-900: #232647;
}



/* --------------------------------------------------------------------------
   Teal - Calm, low glare
   -------------------------------------------------------------------------- */
[data-theme="teal"] {
    --brand-50:  #f2fdfc;
    --brand-100: #dff9f8;
    --brand-200: #c7f4f2;
    --brand-300: #9febe9;
    --brand-400: #6fdedb;
    --brand-500: #4ad0cc;
    --brand-600: #0a837f;
    --brand-700: #096e6b;
    --brand-800: #095553;
    --brand-900: #094240;
}



/* --------------------------------------------------------------------------
   Forest - Quiet green
   -------------------------------------------------------------------------- */
[data-theme="emerald"] {
    --brand-50:  #f1fdf8;
    --brand-100: #defaee;
    --brand-200: #c5f6e0;
    --brand-300: #9cefcb;
    --brand-400: #69e4af;
    --brand-500: #44d697;
    --brand-600: #1a8758;
    --brand-700: #16714a;
    --brand-800: #13573a;
    --brand-900: #11442e;
}



/* --------------------------------------------------------------------------
   Aubergine - Soft, warm violet
   -------------------------------------------------------------------------- */
[data-theme="plum"] {
    --brand-50:  #f8f5fa;
    --brand-100: #eee6f2;
    --brand-200: #e1d3e7;
    --brand-300: #ccb4d7;
    --brand-400: #b18dc0;
    --brand-500: #996eac;
    --brand-600: #744a86;
    --brand-700: #5f3c6d;
    --brand-800: #493053;
    --brand-900: #3a2842;
}



/* --------------------------------------------------------------------------
   Claret - Deep, sober red
   -------------------------------------------------------------------------- */
[data-theme="crimson"] {
    --brand-50:  #fcf2f4;
    --brand-100: #f8e0e5;
    --brand-200: #f2c9d1;
    --brand-300: #e8a2b1;
    --brand-400: #da7388;
    --brand-500: #ca5069;
    --brand-600: #a32d45;
    --brand-700: #852538;
    --brand-800: #651e2d;
    --brand-900: #4f1b25;
}



/* --------------------------------------------------------------------------
   Graphite - Neutral, all day
   -------------------------------------------------------------------------- */
[data-theme="slate"] {
    --brand-50:  #f5f7fa;
    --brand-100: #e6ebf2;
    --brand-200: #d3dce7;
    --brand-300: #b4c3d6;
    --brand-400: #8da3c0;
    --brand-500: #6f89ab;
    --brand-600: #4b6585;
    --brand-700: #3d526d;
    --brand-800: #303f53;
    --brand-900: #283342;
}



/* --------------------------------------------------------------------------
   Sand - Warm light brown
   -------------------------------------------------------------------------- */
[data-theme="sand"] {
    --brand-50:  #fbf8f3;
    --brand-100: #f6ede2;
    --brand-200: #efdfcc;
    --brand-300: #e3c9a7;
    --brand-400: #d2ac7b;
    --brand-500: #c19459;
    --brand-600: #996d35;
    --brand-700: #7e5a2c;
    --brand-800: #604524;
    --brand-900: #4c381e;
}

/* ==========================================================================
   ONE COLOUR ACROSS THE WHOLE SITE

   oxford.css ships a per-product palette — flights blue, hotels teal, holidays
   coral, visas violet — keyed on [data-module] and [data-accent]. It is a real
   design idea, but it means a visitor walking Home -> Hotels -> Holidays sees
   three different sites, and it fights a chosen theme outright: picking Claret
   and landing on an orange Holidays page reads as a bug.

   So the product palette is overridden here and every page wears the brand
   ramp. The blocks in oxford.css are left intact rather than deleted — they
   are the original design, and going back to it is deleting this one section.

   THREE CHANNELS carry the product colour, and missing one leaves a stray
   orange underline or a teal tab on an otherwise navy page:

     [data-module]               the --accent set: hero, buttons, prices, chips
     [data-accent]               --nav-accent / --nav-soft: nav + drawer links
     .searchbar-tab[data-accent] --tab-accent: the active search tab

   AND IT IS NOT ONLY ON <body>. The home page puts data-module on individual
   <section> elements and on each product card, so a body-only override left
   every card wearing its own colour - a blue Flights card, a coral Holidays
   one - on an otherwise navy page. The selector is the bare attribute so it
   catches all three: body, section and card.

   Specificity: [data-module] matches oxford.css's [data-module="teal"]
   exactly, and wins on order because this file is loaded after it. Same for
   the other two.
   ========================================================================== */

[data-module] {
    --accent:        var(--brand-600);
    --accent-deep:   var(--brand-700);
    --accent-bright: var(--brand-500);
    --accent-soft:   var(--brand-50);
    --accent-line:   var(--brand-200);
    --accent-ink:    var(--brand-800);
    --accent-grad:   linear-gradient(168deg, var(--brand-700) 0%, var(--brand-800) 38%, var(--brand-900) 100%);
}

[data-accent] {
    --nav-accent: var(--brand-700);
    --nav-soft:   var(--brand-50);
}

/* On the dark header the nav tints come from the chrome rules in oxford.css,
   which use a white wash. --nav-accent is left carrying the current-page
   underline only, and a light step is what reads there against the brand. */
.site-header [data-accent] { --nav-accent: var(--brand-300); }

.searchbar-tab[data-accent] { --tab-accent: var(--brand-700); }