/* ==========================================================================
   DxP theme — Data Experience Platform brand programme applied to Causeway.

   Loaded after causeway-tokens.css on every shell. Nothing here applies
   unless <html data-theme="dxp"> is set; see apps/causeway-server-web/
   src/theme.rs for how the attribute is chosen (CAUSEWAY_THEME default,
   ?theme= query override, cw_theme cookie).

   Two layers:
     1. Semantic tokens (--bg-*, --fg-*, --border-*, --brand-*, --state-*,
        fonts, radii, shadows). These are the contract; views should only
        reach for these.
     2. Bridge aliases for the Causeway raw ramps (--tide-*, --lamp-*,
        --stone-*, --mist-*, --rose-*, --amber-*, --emerald-*). Views still
        reference these directly in ~880 places; the bridge maps each to
        its DxP equivalent so the theme is complete on day one. Retire the
        bridge when scripts/check-raw-palette.sh reports zero uses.

   Source: DxP Brand Guideline V5 as packaged in the DXP design system
   (docs/design/DXP-BRAND.md records the extraction and the decisions).
   ========================================================================== */

/* Poppins is the substitute display face (self-hosted, latin subset,
   OFL). Swap the files and keep the family name when the licensed face
   arrives. Declared unconditionally so the browser can preload it; it is
   only *used* under [data-theme="dxp"]. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-700.woff2') format('woff2');
}

html[data-theme="dxp"] {
  color-scheme: light;

  /* ---- DxP primary: Dark Sapphire carries chrome and text, Sapphire
          carries actions and links, white is the ground. ---- */
  --sapphire-50:  #e8f1f8;
  --sapphire-100: #cbe0ef;
  --sapphire-200: #9cc4e0;
  --sapphire-300: #66a4cd;
  --sapphire-400: #3384b8;
  --sapphire-500: #005F9E;
  --sapphire-600: #005186;
  --sapphire-700: #00426d;
  --sapphire-800: #003559;
  --sapphire-900: #00294B;
  --sapphire-950: #001c34;

  /* ---- DxP neutrals: cool greys tuned to sit beside sapphire ---- */
  --grey-0:   #ffffff;
  --grey-50:  #f6f8fa;
  --grey-100: #eef1f5;
  --grey-200: #e0e5ec;
  --grey-300: #c8d1dc;
  --grey-400: #97a3b3;
  --grey-500: #68758a;
  --grey-600: #4a566a;
  --grey-700: #323c4c;
  --grey-800: #1f2734;
  --grey-900: #0e131c;

  /* ---- Four roles, one colour each. Use on identity elements only
          (role chips, accountability cards, decision-bar stripes, role
          home pages); never on status or on primary actions. ---- */
  --owner-50:  #eafaf0;  --owner-100: #cbf2da;  --owner-500: #26B258;  --owner-800: #145e30;
  --consumer-50: #e7f5fb; --consumer-100: #c6e7f5; --consumer-500: #0A9AD7; --consumer-800: #055374;
  --creator-50: #e4f8f7; --creator-100: #bfeeec; --creator-500: #00ADA8; --creator-800: #005e5a;
  --provider-50: #fbe9f2; --provider-100: #f5cbe0; --provider-500: #B32573; --provider-800: #4d1236;
  --role-owner:    var(--owner-500);
  --role-consumer: var(--consumer-500);
  --role-creator:  var(--creator-500);
  --role-provider: var(--provider-500);
  /* Stewards act for owners and have no DxP colour of their own: outline
     treatment in owner green. */
  --role-steward:  var(--owner-500);

  /* ---- Status. Success and info reuse the owner and consumer hues so
          the palette stays tight; warning and danger are the only
          additions. ---- */
  --success-50:  var(--owner-50);   --success-100: var(--owner-100);
  --success-500: var(--owner-500);  --success-700: #18763b; --success-800: var(--owner-800);
  --info-50:  var(--consumer-50);   --info-100: var(--consumer-100);
  --info-500: var(--consumer-500);  --info-700: #06678f; --info-800: var(--consumer-800);
  --warning-50: #fff7e8; --warning-100: #ffe9c2; --warning-500: #E08700; --warning-700: #8f5500; --warning-800: #6d4100;
  --danger-50:  #fdecef; --danger-100: #fbd0d8; --danger-500: #D62B4E; --danger-700: #92122c; --danger-800: #740e23;

  /* ---- Semantic tokens (the contract) ---- */
  --bg-page:    var(--grey-50);
  --bg-surface: var(--grey-0);
  --bg-sunken:  var(--grey-100);
  --bg-brand:   var(--sapphire-900);
  --bg-brand-2: var(--sapphire-500);
  --bg-chrome:  var(--sapphire-900);
  --bg-hover:   rgba(0, 41, 75, 0.04);
  --bg-press:   rgba(0, 41, 75, 0.08);
  --bg-nav:     var(--grey-0);
  --bg-overlay: rgba(0, 41, 75, 0.48);

  --fg-1: var(--sapphire-900);
  --fg-2: var(--grey-700);
  --fg-3: var(--grey-500);
  --fg-4: var(--grey-400);
  --fg-inverse: #ffffff;
  --fg-brand:   var(--sapphire-500);
  --fg-link:    var(--sapphire-600);

  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);
  --border-focus:   var(--sapphire-500);

  --brand-bg:       var(--sapphire-500);
  --brand-bg-hover: var(--sapphire-600);
  --brand-bg-press: var(--sapphire-700);
  --brand-fg:       #ffffff;
  --primary:   var(--sapphire-500);
  --primary-h: var(--sapphire-600);
  --primary-p: var(--sapphire-700);

  --state-danger-bg: var(--danger-100);   --state-danger-fg: var(--danger-800);
  --state-warn-bg:   var(--warning-100);  --state-warn-fg:   var(--warning-800);
  --state-ok-bg:     var(--success-100);  --state-ok-fg:     var(--success-800);
  --state-info-bg:   var(--info-100);     --state-info-fg:   var(--info-800);
  --state-neutral-bg: var(--grey-100);    --state-neutral-fg: var(--grey-700);
  --state-ai-bg:     var(--provider-100); --state-ai-fg:     var(--provider-800);

  /* ---- Type: Poppins display, Inter UI, JetBrains Mono ---- */
  --font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   var(--font-display);
  --tracking-caps: 0.10em;

  /* ---- Shape: DxP is squarer; panels crisp, only atoms soften ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* ---- Elevation: sapphire-tinted, never black ---- */
  --shadow-xs: 0 1px 0 rgba(0, 41, 75, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 41, 75, 0.07), 0 1px 1px rgba(0, 41, 75, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 41, 75, 0.09), 0 1px 2px rgba(0, 41, 75, 0.05);
  --shadow-lg: 0 8px 24px rgba(0, 41, 75, 0.12), 0 2px 6px rgba(0, 41, 75, 0.06);
  --shadow-xl: 0 18px 48px rgba(0, 41, 75, 0.16), 0 4px 12px rgba(0, 41, 75, 0.07);
  --shadow-focus: 0 0 0 3px rgba(0, 95, 158, 0.32);

  /* ---- Dot grid: brand background pattern, 10–20 % opacity ---- */
  --dot-size: 3px;
  --dot-gap: 32px;
  --dot-color: rgba(255, 255, 255, 0.16);
  --dot-color-dark: rgba(0, 41, 75, 0.14);

  /* ======================================================================
     Bridge: Causeway raw ramps → DxP values. Views that still reference
     these render correctly under DxP. Do not add new references; see
     scripts/check-raw-palette.sh.
     ====================================================================== */
  --tide-50:  var(--sapphire-50);  --tide-100: var(--sapphire-100); --tide-200: var(--sapphire-200);
  --tide-300: var(--sapphire-300); --tide-400: var(--sapphire-400); --tide-500: var(--sapphire-500);
  --tide-600: var(--sapphire-600); --tide-700: var(--sapphire-700); --tide-800: var(--sapphire-800);
  --tide-900: var(--sapphire-800); --tide-950: var(--sapphire-900);

  --lamp-50:  var(--sapphire-50);  --lamp-100: var(--sapphire-100); --lamp-200: var(--sapphire-200);
  --lamp-300: var(--sapphire-300); --lamp-400: var(--sapphire-400); --lamp-500: var(--sapphire-400);
  --lamp-600: var(--sapphire-500); --lamp-700: var(--sapphire-600); --lamp-800: var(--sapphire-700);
  --lamp-900: var(--sapphire-800);

  /* Stone was the warm accent (top-bar CTA, "accent" buttons). DxP has no
     warm accent; the accent becomes sapphire. */
  --stone-50:  var(--sapphire-50);  --stone-100: var(--sapphire-100); --stone-200: var(--sapphire-200);
  --stone-300: var(--sapphire-300); --stone-400: var(--sapphire-400); --stone-500: var(--sapphire-500);
  --stone-600: var(--sapphire-600); --stone-700: var(--sapphire-700); --stone-800: var(--sapphire-800);
  --stone-900: var(--sapphire-900);

  --mist-0:   var(--grey-0);   --mist-50:  var(--grey-50);  --mist-100: var(--grey-100);
  --mist-200: var(--grey-200); --mist-300: var(--grey-300); --mist-400: var(--grey-400);
  --mist-500: var(--grey-500); --mist-600: var(--grey-600); --mist-700: var(--grey-700);
  --mist-800: var(--grey-800); --mist-900: var(--grey-900);

  --rose-50:  var(--danger-50);  --rose-100: var(--danger-100); --rose-500: var(--danger-500);
  --rose-600: #b8213f;           --rose-700: var(--danger-700); --rose-800: var(--danger-800);

  --amber-50:  var(--warning-50);  --amber-100: var(--warning-100); --amber-500: var(--warning-500);
  --amber-600: #b86f00;            --amber-700: var(--warning-700); --amber-800: var(--warning-800);

  --emerald-50:  var(--success-50);  --emerald-100: var(--success-100); --emerald-500: var(--success-500);
  --emerald-600: #1e9349;            --emerald-700: var(--success-700); --emerald-800: var(--success-800);

  /* ---- DaisyUI / Tailwind theme variables (mirror of the causeway block
          in views/layouts/platform.rs, in DxP hues) ---- */
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(98% 0.004 240);
  --color-base-300: oklch(95% 0.008 235);
  --color-base-content: oklch(28% 0.07 250);
  --color-primary: oklch(45% 0.12 245);
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(64% 0.14 230);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(28% 0.07 250);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(28% 0.07 250);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(64% 0.14 230);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(68% 0.18 150);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(68% 0.16 65);
  --color-warning-content: oklch(28% 0.07 250);
  --color-error: oklch(58% 0.21 15);
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 4px;
  --radius-field: 6px;
  --radius-box: 8px;
}

/* ==========================================================================
   Component adjustments that tokens alone cannot express.
   ========================================================================== */

/* Headings and display moments take the display face. */
html[data-theme="dxp"] .type-display-xl,
html[data-theme="dxp"] .type-display-lg,
html[data-theme="dxp"] .type-display-md,
html[data-theme="dxp"] .type-h1,
html[data-theme="dxp"] .type-h2,
html[data-theme="dxp"] .type-h3,
html[data-theme="dxp"] .page-header .lede {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
}
html[data-theme="dxp"] .page-header .lede em {
  color: var(--fg-brand);
  font-style: normal;
}

/* Role-name treatment: Poppins 700, uppercase, wide tracking, over a rule. */
html[data-theme="dxp"] .type-role {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: 1.1;
  color: var(--fg-1);
}

/* Primary actions are uppercase and tracked; secondary and ghost stay
   sentence case so cards do not shout. */
html[data-theme="dxp"] .btn-primary,
html[data-theme="dxp"] .btn.btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* Role identity chips (model C). Apply `pill pill-role-<role>` to any
   chip that names an accountable role; never to a status. */
html[data-theme="dxp"] .pill-role-owner    { background: var(--owner-100);    color: var(--owner-800); }
html[data-theme="dxp"] .pill-role-consumer { background: var(--consumer-100); color: var(--consumer-800); }
html[data-theme="dxp"] .pill-role-creator  { background: var(--creator-100);  color: var(--creator-800); }
html[data-theme="dxp"] .pill-role-provider { background: var(--provider-100); color: var(--provider-800); }
html[data-theme="dxp"] .pill-role-steward  { background: transparent; color: var(--owner-800); box-shadow: inset 0 0 0 1px var(--owner-500); }

/* Decision bars carry the deciding role's colour as a left stripe and tint. */
html[data-theme="dxp"] .decision-bar[data-role="owner"]    { border-left: 4px solid var(--owner-500);    background: var(--owner-50); }
html[data-theme="dxp"] .decision-bar[data-role="steward"]  { border-left: 4px solid var(--owner-500);    background: #f4fbf6; }
html[data-theme="dxp"] .decision-bar[data-role="creator"]  { border-left: 4px solid var(--creator-500);  background: var(--creator-50); }
html[data-theme="dxp"] .decision-bar[data-role="consumer"] { border-left: 4px solid var(--consumer-500); background: var(--consumer-50); }
html[data-theme="dxp"] .decision-bar[data-role="provider"] { border-left: 4px solid var(--provider-500); background: var(--provider-50); }
html[data-theme="dxp"] .decision-bar                        { border-left: 4px solid var(--sapphire-500); background: var(--sapphire-50); }

/* Role home pages (model A): the shell sets data-role-accent on <body>
   for the four role landing pages; the header rule and active nav item
   take the role colour. */
html[data-theme="dxp"] [data-role-accent="owner"]    { --accent-role: var(--owner-500);    --accent-role-soft: var(--owner-100);    --accent-role-ink: var(--owner-800); }
html[data-theme="dxp"] [data-role-accent="consumer"] { --accent-role: var(--consumer-500); --accent-role-soft: var(--consumer-100); --accent-role-ink: var(--consumer-800); }
html[data-theme="dxp"] [data-role-accent="creator"]  { --accent-role: var(--creator-500);  --accent-role-soft: var(--creator-100);  --accent-role-ink: var(--creator-800); }
html[data-theme="dxp"] [data-role-accent="provider"] { --accent-role: var(--provider-500); --accent-role-soft: var(--provider-100); --accent-role-ink: var(--provider-800); }
html[data-theme="dxp"] [data-role-accent] .page-header { box-shadow: inset 0 3px 0 var(--accent-role); }
/* #sidenav rules in platform.rs carry an id, so match specificity here. */
html[data-theme="dxp"] [data-role-accent] #sidenav .nav-item.active { background: var(--accent-role-soft); color: var(--accent-role-ink); }
html[data-theme="dxp"] [data-role-accent] #sidenav .nav-item.active .nav-icon { color: var(--accent-role); }

/* Dot grid utilities (brand pattern; never over photography). */
html[data-theme="dxp"] .dot-grid {
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
}
html[data-theme="dxp"] .dot-grid-dark {
  background-image: radial-gradient(var(--dot-color-dark) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
}
html[data-theme="dxp"] .dot-grid-half {
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 50%);
  mask-image: linear-gradient(90deg, transparent 50%, #000 50%);
}
html[data-theme="dxp"] .dot-grid-triangle {
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-mask-image: linear-gradient(135deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 40%, #000 100%);
}

/* Top chrome keeps the Causeway wordmark; only the surface changes. The
   inline background in platform_nav.rs references --tide-950, which the
   bridge resolves to Dark Sapphire, so no markup change is needed. */
html[data-theme="dxp"] .top-chrome-dark { border-bottom-color: var(--sapphire-950); }