/*
 * Design tokens shared by every brand.
 *
 * Source: Finrelay brand book, finrelay-product-design-system.md — roles §6.1, radius §6.4,
 * elevation §6.5, motion §6.6, code panel §8.11, status §7.1. Sizes are rem against Material's
 * 20px root, so 1rem = 20px at the design's 1440px width.
 *
 * Brand contract. A brand sheet (assets/brands/<brand>/brand.css) sets only these primitives on :root:
 *   --brand-50 … --brand-950   primary ramp; 500 is the anchor, 700 the button fill
 *   --brand-accent              decorative accent (logo mark, focus ring on dark surfaces)
 *   --brand-dark                page colour in dark mode; --brand-dark-1…4 are the raised layers
 *   --brand-code                code panel ground, in both schemes
 *   --md-text-font / --md-code-font  only when the brand self-hosts its fonts
 *   --pv-brand-from/-to/-accent  the customer previews' default colours (components.css)
 * and, where a brand departs from the shared defaults, individual --ds-* roles per scheme.
 * Everything else — Material's --md-* variables, Mermaid, the OpenAPI blocks — reads the roles.
 */

/* Fira Code (SIL OFL) is the code face for every brand (brand book §5). */
@font-face { font-family: "Fira Code"; src: url("../fonts/fira-code/fira-code-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../fonts/fira-code/fira-code-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../fonts/fira-code/fira-code-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --md-code-font: "Fira Code";

  /* Neutral ramp (Cape Cod). Brands may override. */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F4F7F7;
  --neutral-100: #E3EAEA;
  --neutral-200: #CBD6D5;
  --neutral-300: #A7B9B8;
  --neutral-400: #7B9594;
  --neutral-500: #607A7A;
  --neutral-600: #526768;
  --neutral-700: #445354;
  --neutral-800: #3F4A4B;
  --neutral-900: #384041;
  --neutral-950: #22292A;
  --neutral-surface-2: #F4F7FA;

  /* Status ramps: 50 background, 500 badge tint, 700 badge text, 900 callout text. */
  --green-50:  #F4FAF3;
  --green-300: #A1D5A0;
  --green-500: #51A951;
  --green-700: #306530;
  --yellow-50:  #FFFBEB;
  --yellow-300: #FFD54A;
  --yellow-500: #F99F07;
  --yellow-700: #B75306;
  --yellow-900: #7A340D;
  --red-50:  #FDF3F3;
  --red-300: #F3AEAE;
  --red-500: #DD5656;
  --red-700: #A82D2D;
  --red-900: #752727;

  /* Raised layers in dark mode, derived from the brand dark unless the brand sets them. */
  --brand-dark-1: color-mix(in srgb, var(--brand-dark), #FFFFFF 5%);
  --brand-dark-2: color-mix(in srgb, var(--brand-dark), #FFFFFF 10%);
  --brand-dark-3: color-mix(in srgb, var(--brand-dark), #FFFFFF 17%);
  --brand-dark-4: color-mix(in srgb, var(--brand-dark), #FFFFFF 26%);

  /* Radius (§6.4) */
  --ds-radius-xs:   .3rem;    /* 6px  code pills, icon buttons */
  --ds-radius-sm:   .4rem;    /* 8px  inputs, small buttons */
  --ds-radius-md:   .6rem;    /* 12px cards, callouts */
  --ds-radius-lg:   .7rem;    /* 14px panels, code panels */
  --ds-radius-xl:   .8rem;    /* 16px large buttons */
  --ds-radius-xxl:  1.6rem;   /* 32px search, segmented controls */
  --ds-radius-pill: 999rem;

  /* Motion (§6.6) */
  --ds-dur-instant:   120ms;
  --ds-dur-fast:      180ms;
  --ds-dur-base:      220ms;
  --ds-dur-enter:     320ms;
  --ds-dur-exit:      240ms;
  --ds-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-exit:     cubic-bezier(0.4, 0, 0.6, 1);
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --ds-header-height: 3.4rem;   /* 68px */
  --ds-hero-panel:    22rem;    /* 440px */

  /* Elevation (§6.5) */
  --ds-shadow-card:  0 8px 24px rgb(34 41 42 / 6%);
  --ds-shadow-menu:  0 .5rem 2rem rgb(124 129 135 / 26%);
  --ds-shadow-float: 0 16px 70px rgb(0 0 0 / 12%);

  /* Code panel (§8.11) — dark in both schemes */
  --ds-code-bg:          var(--brand-code);
  --ds-code-bar:         color-mix(in srgb, var(--brand-code), #FFFFFF 4%);
  --ds-code-rule:        rgb(255 255 255 / 8%);
  --ds-code-title:       #F4F7FB;
  --ds-code-fg:          #CBD6D5;
  --ds-code-muted:       #8FA3C8;
  --ds-code-keyword:     var(--brand-300);
  --ds-code-string:      #A1D5A0;
  --ds-code-number:      #FFD54A;
  --ds-code-accent:      var(--brand-300);
  --ds-code-accent-tint: color-mix(in srgb, var(--brand-300) 16%, transparent);

  /* Brand-neutral defaults a brand sheet may replace */
  --ds-on-brand: #FFFFFF;
  /* Solid ground behind --ds-on-brand text in both schemes: number badges, sequence numbers. */
  --ds-brand-fill: var(--brand-500);
}

/* ─── Roles: light ───────────────────────────────────────────────────────── */
:root,
[data-md-color-scheme="default"] {
  --ds-surface:       var(--neutral-0);
  --ds-surface-2:     var(--neutral-surface-2);
  --ds-subtle:        var(--neutral-50);
  --ds-border:        var(--neutral-100);
  --ds-border-strong: var(--neutral-200);
  --ds-dash:          var(--neutral-300);
  --ds-heading:       var(--neutral-950);
  --ds-text-strong:   var(--neutral-900);
  --ds-body:          var(--neutral-700);
  --ds-muted:         var(--neutral-500);
  /* Muted text on a --ds-subtle ground; plain muted falls just short of 4.5:1 there. */
  --ds-muted-on-subtle: color-mix(in srgb, var(--ds-muted), var(--ds-text-strong) 20%);

  --ds-brand:         var(--brand-500);
  --ds-brand-strong:  var(--brand-700);
  --ds-brand-hover:   var(--brand-800);
  --ds-button-hover:  var(--ds-brand-hover);
  --ds-brand-tint:    var(--brand-50);
  --ds-brand-text:    var(--brand-700);
  --ds-brand-deep:    var(--brand-900);
  --ds-focus:         var(--brand-500);

  --ds-success-bg: var(--green-50);
  --ds-success-fg: var(--green-700);
  --ds-warn-bg:    var(--yellow-50);
  --ds-warn-fg:    var(--yellow-900);
  --ds-danger-bg:  var(--red-50);
  --ds-danger-fg:  var(--red-900);

  --ds-badge-success: color-mix(in srgb, var(--green-500) 18%, transparent);
  --ds-badge-warn:    color-mix(in srgb, var(--yellow-500) 18%, transparent);
  --ds-badge-danger:  color-mix(in srgb, var(--red-500) 18%, transparent);
  --ds-badge-success-fg: var(--green-700);
  --ds-badge-warn-fg:    color-mix(in srgb, var(--yellow-700), var(--yellow-900) 25%);   /* 700 alone is 4.3:1 */
  --ds-badge-danger-fg:  var(--red-700);

  --ds-card-shadow: var(--ds-shadow-card);

  /* HTTP method labels in the OpenAPI blocks (brand book §9.4 default) */
  --ds-method-get:    var(--green-700);
  --ds-method-post:   var(--ds-brand-text);
  --ds-method-put:    var(--yellow-700);
  --ds-method-delete: var(--red-700);
}

/* ─── Roles: dark ────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  /* The hero band and the page share one ground in dark mode; a border separates them. */
  --ds-surface:       var(--brand-dark);
  --ds-surface-2:     var(--brand-dark);
  --ds-subtle:        var(--brand-dark-1);
  --ds-border:        var(--brand-dark-2);
  --ds-border-strong: var(--brand-dark-3);
  --ds-dash:          var(--brand-dark-4);
  --ds-heading:       var(--neutral-50);
  --ds-text-strong:   var(--neutral-100);
  --ds-body:          var(--neutral-200);
  --ds-muted:         var(--neutral-300);
  --ds-muted-on-subtle: var(--ds-muted);

  --ds-brand:         var(--brand-400);
  --ds-brand-strong:  var(--brand-500);
  --ds-brand-hover:   var(--brand-400);
  --ds-button-hover:  var(--brand-600);   /* 400 under white text is 3.6:1 */
  --ds-brand-tint:    color-mix(in srgb, var(--brand-500) 18%, transparent);
  --ds-brand-text:    var(--brand-300);
  --ds-brand-deep:    var(--brand-200);
  --ds-focus:         var(--brand-accent);

  --ds-success-bg: rgb(48 101 48 / 28%);
  --ds-success-fg: var(--green-300);
  --ds-warn-bg:    rgb(249 159 7 / 16%);
  --ds-warn-fg:    var(--yellow-300);
  --ds-danger-bg:  rgb(221 86 86 / 18%);
  --ds-danger-fg:  var(--red-300);

  --ds-badge-success-fg: var(--green-300);
  --ds-badge-warn-fg:    var(--yellow-300);
  --ds-badge-danger-fg:  var(--red-300);

  --ds-card-shadow: none;   /* dark mode uses borders, not shadows (§6.5) */

  --ds-method-get:    var(--green-300);
  --ds-method-post:   var(--ds-brand-text);
  --ds-method-put:    var(--yellow-300);
  --ds-method-delete: var(--red-300);
}

/* ─── Material, Mermaid and OpenAPI read the roles ───────────────────────── */
:root,
[data-md-color-scheme] {
  --md-default-bg-color:             var(--ds-surface);
  --md-default-fg-color:             var(--ds-heading);
  --md-default-fg-color--light:      var(--ds-muted);
  --md-default-fg-color--lighter:    var(--ds-dash);
  --md-default-fg-color--lightest:   var(--ds-border);
  --md-typeset-color:                var(--ds-body);
  --md-typeset-a-color:              var(--ds-brand-text);
  --md-typeset-mark-color:           var(--ds-brand-tint);
  --md-typeset-table-color:          var(--ds-border);
  --md-typeset-table-color--light:   var(--ds-subtle);

  --md-primary-fg-color:             var(--ds-brand);
  --md-primary-fg-color--light:      var(--ds-brand-hover);
  --md-primary-fg-color--dark:       var(--ds-brand-strong);
  --md-primary-bg-color:             var(--ds-on-brand);
  --md-primary-bg-color--light:      color-mix(in srgb, var(--ds-on-brand) 70%, transparent);
  --md-accent-fg-color:              var(--ds-brand-hover);
  --md-accent-fg-color--transparent: var(--ds-brand-tint);
  --md-accent-bg-color:              var(--ds-on-brand);

  --md-code-bg-color:                var(--ds-subtle);
  --md-code-fg-color:                var(--ds-text-strong);

  --md-footer-bg-color:              var(--ds-surface);
  --md-footer-bg-color--dark:        var(--ds-surface-2);
  --md-footer-fg-color:              var(--ds-heading);
  --md-footer-fg-color--light:       var(--ds-muted);
  --md-footer-fg-color--lighter:     var(--ds-dash);

  --md-shadow-z1: none;
  --md-shadow-z2: var(--ds-shadow-menu);
  --md-shadow-z3: var(--ds-shadow-float);

  /* Mermaid — Material maps these inside each diagram (docs.js adds the owner colours). */
  --md-mermaid-font-family:                 var(--md-text-font-family);
  --md-mermaid-edge-color:                  var(--ds-muted);
  --md-mermaid-node-bg-color:               var(--ds-brand-tint);
  --md-mermaid-node-fg-color:               var(--ds-heading);
  --md-mermaid-label-bg-color:              var(--ds-surface);
  --md-mermaid-label-fg-color:              var(--ds-body);
  --md-mermaid-sequence-actor-bg-color:     var(--ds-surface);
  --md-mermaid-sequence-actor-fg-color:     var(--ds-heading);
  --md-mermaid-sequence-actor-border-color: var(--ds-border-strong);
  --md-mermaid-sequence-actor-line-color:   var(--ds-dash);
  --md-mermaid-sequence-actorman-bg-color:  var(--ds-surface);
  --md-mermaid-sequence-actorman-line-color: var(--ds-border-strong);
  --md-mermaid-sequence-box-bg-color:       var(--ds-brand-tint);
  --md-mermaid-sequence-box-fg-color:       var(--ds-brand-text);
  --md-mermaid-sequence-label-bg-color:     var(--ds-brand-tint);
  --md-mermaid-sequence-label-fg-color:     var(--ds-brand-text);
  --md-mermaid-sequence-loop-bg-color:      transparent;
  --md-mermaid-sequence-loop-border-color:  var(--ds-brand);
  --md-mermaid-sequence-loop-fg-color:      var(--ds-brand-text);
  --md-mermaid-sequence-message-fg-color:   var(--ds-text-strong);
  --md-mermaid-sequence-message-line-color: var(--ds-body);
  --md-mermaid-sequence-note-bg-color:      var(--ds-warn-bg);
  --md-mermaid-sequence-note-border-color:  color-mix(in srgb, var(--yellow-500) 45%, transparent);
  --md-mermaid-sequence-note-fg-color:      var(--ds-warn-fg);
  --md-mermaid-sequence-number-bg-color:    var(--ds-brand-fill);
  --md-mermaid-sequence-number-fg-color:    var(--ds-on-brand);

  --oad-block-border-color:              var(--ds-border);
  --oad-indent-border-color:             var(--ds-border);
  --oad-operation-separator-border-color: var(--ds-border);
  --oad-small-note-color:                var(--ds-muted);
  --http-get-color:                      var(--ds-method-get);
  --http-post-color:                     var(--ds-method-post);
  --http-put-color:                      var(--ds-method-put);
  --http-patch-color:                    var(--ds-method-put);
  --http-delete-color:                   var(--ds-method-delete);
  --http-head-color:                     var(--ds-muted);
  --http-options-color:                  var(--ds-muted);
  --http-trace-color:                    var(--ds-muted);
  --http-route-param-color:              var(--ds-brand-text);
}