/* Banner 2 design tokens, from the approved Figma file (page "Bundleware 2027 · Final", 230:2).
   One sheet for three places: the toolbar host's shadow root (:host), extension pages and the docs
   site (:root). Every Banner 2 rule elsewhere reads only var(--b2-*) and var(--ink-*). An element
   takes an ink with data-ink="<ink>"; the --ink-<ink>-* values equal src/lib/b2/inks.ts (unit test). */
:host, :root {
  /* Type. The system sans everywhere (Inter is only Figma's stand-in). The serif is for wordmarks and
     printed matter inside toolbars; the host registers Bundleware Tinos (src/lib/fonts.ts). Courier New
     is Cousine's metric twin. Bundleware Nunito draws poster-glass watermark letters on pages only. */
  --b2-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --b2-serif: "Bundleware Tinos", Tinos, "Times New Roman", Times, "Liberation Serif", serif;
  --b2-mono: Cousine, "Courier New", "Liberation Mono", monospace;
  --b2-display: "Bundleware Nunito", system-ui, sans-serif;

  /* Text styles (Figma B2/* and B2 Serif/*). Caps and Caption are set in capitals with their tracking. */
  --b2-font-heading: 600 20px/26px var(--b2-sans);
  --b2-font-title: 600 15px/20px var(--b2-sans);
  --b2-font-label: 600 11px/14px var(--b2-sans);
  --b2-font-note: 400 11px/15px var(--b2-sans);
  --b2-font-caps: 700 8px/10px var(--b2-sans);
  --b2-caps-tracking: .1em;
  --b2-font-caption: 600 10px/14px var(--b2-sans);
  --b2-caption-tracking: .08em;
  --b2-font-wordmark: italic 700 17px/21px var(--b2-serif);
  --b2-font-wordmark-small: italic 700 15px/19px var(--b2-serif);
  --b2-font-wordmark-panel: italic 700 22px/26px var(--b2-serif);
  --b2-font-wordmark-banner: italic 700 24px/28px var(--b2-serif);
  --b2-font-wordmark-masthead: italic 700 30px/36px var(--b2-serif);
  --b2-font-serif-body: 400 15px/19px var(--b2-serif);
  --b2-font-serif-lead-in: 700 15px/19px var(--b2-serif);
  --b2-font-serif-quote: italic 400 14px/18px var(--b2-serif);
  --b2-font-code: 400 12px/18px var(--b2-mono);

  /* Text colours. */
  --b2-text: #223366;
  --b2-text-2: #6B6B9A;
  --b2-text-3: #8A8FB0;
  --b2-title: #993333;
  --b2-tone-dark-text: #F6ECD0;

  /* Grounds, tables and lines. */
  --b2-window: #FFFFFF;
  --b2-page: linear-gradient(#EEF0FA, #DCE0F1);
  --b2-hairline: #CCCCFF;
  --b2-cell-head: #E6E6FF;
  --b2-cell-label: #F6F3FC;
  --b2-cell-value: #FFFFFF;
  --b2-readout-label: linear-gradient(#F3F5FC, #E6EAF6);
  --b2-separator: #E6E6FF;
  --b2-window-border: #A9AFD6;
  --b2-button-area: #F3F3F8;
  --b2-etch: #A9AFD6;
  --b2-etch-light: #FFFFFF;
  --b2-etch-label: #9A9FC4;

  /* Selection: the navy box of menus, index rows, choices and the docs tree. */
  --b2-select: #224488;
  --b2-select-text: #FFFFFF;
  --b2-select-detail: rgba(255, 255, 255, .82);
  --b2-select-border: #0D3F75;
  --b2-guide: #A3A8D6;

  /* Bars, the shelf line and the window strip that an open part joins. */
  --b2-bar: linear-gradient(#F7F7FD, #ECECF8);
  --b2-bar-highlight: inset 0 1px 0 #FFFFFF;
  --b2-shelf: #CCCCFF;
  --b2-strip: linear-gradient(#DDDDEE, #E9E9F5);
  --b2-dashboard-shelf: linear-gradient(#E9EBF7, #D9DCEE);
  --b2-shelf-highlight: inset 0 1px 0 rgba(255, 255, 255, .55);

  /* Part faces: tabs, modules and the pressed icon button. */
  --b2-part: linear-gradient(#FFFFFF, #E9E9F5);
  --b2-part-hover: linear-gradient(#FFFFFF, #F1F1FA);
  --b2-part-open: linear-gradient(#FFFFFF, #DDDDEE);
  --b2-part-border: #C3C3E0;
  --b2-part-border-hover: #9C9CD0;

  /* Push buttons (installation wizard): never inked. Hover, Pressed and Busy are the D14 defaults. */
  --b2-button-face: #F6F6FA;
  --b2-button-face-pressed: #E1E4F1;
  --b2-button-face-disabled: #F3F3F8;
  --b2-button-border: #8C92B8;
  --b2-button-border-hover: #9C9CD0;
  --b2-button-border-default: #223366;
  --b2-button-border-disabled: #C9CBE0;
  --b2-button-text-disabled: #A9AFD6;
  --b2-button-bevel: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(34, 51, 102, .12);
  --b2-button-ring: inset 0 0 0 2px #BFD0EE;
  --b2-busy-opacity: .7;
  --b2-disabled-opacity: .45;

  /* Fields, selects and checks. Focus is the classic dotted rectangle; a focused field's border is Steel. */
  --b2-field: #FFFFFF;
  --b2-field-border: #A9AFD6;
  --b2-field-border-focus: #4677AA;
  --b2-focus: #223366;
  --b2-focus-offset: -4px;
  --b2-check-locked-face: #E6E6F3;
  --b2-check-locked-border: #C3C3E0;
  --b2-check-locked-mark: #8A8AB8;
  --b2-progress-track: linear-gradient(#E3E6F3, #FFFFFF);

  /* The docs tree index. */
  --b2-tree-path: #13569A;
  --b2-tree-box: linear-gradient(#FFFFFF, #E4E8F6);
  --b2-tree-box-border: #9A9AC8;
  --b2-tree-guide: #EEDDDD;

  /* Hairline diffs. */
  --b2-diff-ground: #E2E2F4;
  --b2-diff-gutter: #F6F6FC;
  --b2-diff-added-gutter: #D9F0C8;
  --b2-diff-added: #EDF8E4;
  --b2-diff-removed-gutter: #F8D5DC;
  --b2-diff-removed: #FDECEF;
  --b2-diff-fold: #F2F2FB;

  /* The sunken LCD of toolbars that play sound. */
  --b2-lcd: linear-gradient(#0E0A22, #1A1442);
  --b2-lcd-edge: #0E0B25;
  --b2-lcd-text: #FFD24A;
  --b2-lcd-track: rgba(255, 210, 74, .14);
  --b2-lcd-fade: #140F33;
  --b2-lcd-glass: linear-gradient(rgba(255, 255, 255, .11), rgba(255, 255, 255, .02));
  --b2-lcd-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .55);

  /* Bundleware's own brand: poster glass and the logotype. Each surface sets its own wash alpha. */
  --b2-brand-azure: #2A9CFF;
  --b2-brand-periwinkle: #5D5DBB;
  --b2-glass-cyan: #00B2FF;
  --b2-glass-teal: #00567B;
  --b2-ice-wash: #E3EEF9;
  --b2-logotype-fill: linear-gradient(#2A9CFF, #5D5DBB);

  /* Code (Figma Code/*, the same as src/lib/b2/code-colors.ts). */
  --b2-code-plain: #223366;
  --b2-code-keyword: #13569A;
  --b2-code-string: #921126;
  --b2-code-comment: #236B23;
  --b2-code-tag: #993333;
  --b2-code-attribute: #08635E;
  --b2-code-number: #C4520A;
  --b2-code-line-number: #8A8FB0;

  /* Effects. B2/Type shadow goes on wordmarks and dark inks' labels, B2/Type engrave on Gold and Paper. */
  --b2-type-shadow: 1px 1px 0 rgba(5, 10, 41, .7);
  --b2-type-engrave: 0 1px 0 rgba(255, 255, 255, .8);
  --b2-mark-shadow: drop-shadow(1px 1px 0 rgba(5, 10, 41, .7));
  --b2-ink-highlight: inset 0 1px 0 rgba(255, 255, 255, .55);
  --b2-badge-highlight: inset 0 1px 0 rgba(255, 255, 255, .6);
  --b2-plate-highlight: inset 0 1px 0 rgba(255, 255, 255, .35);
  --b2-plate-sheen: linear-gradient(172deg, rgba(255, 255, 255, 0) 45.5%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 54.5%);
  --b2-sunken: inset 0 1px 2px rgba(34, 51, 102, .18);
  --b2-window-shadow: 0 6px 18px rgba(33, 51, 102, .22);
  --b2-dialog-shadow: 0 10px 30px rgba(33, 51, 102, .25);
  --b2-tooltip-shadow: 0 2px 6px rgba(33, 51, 102, .18);
  --b2-step-shadow: 0 1px 2px rgba(5, 10, 41, .35);
  --b2-glass-shadow: 0 3.5px 3.5px rgba(0, 0, 0, .25);
  --b2-scrim: rgba(34, 51, 102, .35);

  /* Radii: bars, plates, windows, strips and tables are square; 4px is the system's maximum. */
  --b2-radius-0: 0;
  --b2-radius-2: 2px;
  --b2-radius-3: 3px;
  --b2-radius-tab: 3px 3px 0 0;

  /* Metrics. Tabs and modules stand on the shelf; fields, buttons and status sit centred. */
  --b2-bar-height: 32px;
  --b2-gap: 4px;
  --b2-tab-height: 25px;
  --b2-module-height: 30px;
  --b2-field-height: 24px;
  --b2-field-height-flagship: 28px;
  --b2-button-height: 24px;
  --b2-segmented-height: 22px;
  --b2-readout-height: 24px;
  --b2-badge-height: 14px;
  --b2-icon-size: 16px;
  --b2-cap: 2px;
  --b2-cap-open: 3px;
  --b2-strip-height: 8px;
  --b2-row-height: 24px;
  --b2-tree-row-height: 18px;
  --b2-tree-indent: 13px;
  --b2-index-row-height: 40px;
  --b2-window-padding: 14px 18px;
  --b2-window-gap: 12px;
  --b2-window-header-gap: 8px;

  /* The nine inks. Fill runs top to bottom, Plate left to right. */
  --ink-steel-fill: linear-gradient(180deg, #A9C4E2 0%, #4677AA 50%, #13569A 100%);
  --ink-steel-plate: linear-gradient(90deg, #7799BB 0%, #4677AA 50%, #13569A 100%);
  --ink-steel-deep: #13569A; --ink-steel-edge: #0D3F75; --ink-steel-label: #FFFFFF;
  --ink-tangerine-fill: linear-gradient(180deg, #FFD08A 0%, #FF9A2E 50%, #E8620C 100%);
  --ink-tangerine-plate: linear-gradient(90deg, #FFA04A 0%, #F07C12 50%, #C4520A 100%);
  --ink-tangerine-deep: #C4520A; --ink-tangerine-edge: #B44C08; --ink-tangerine-label: #FFFFFF;
  --ink-leaf-fill: linear-gradient(180deg, #BDE88F 0%, #6CC04A 50%, #2E8B2E 100%);
  --ink-leaf-plate: linear-gradient(90deg, #7DC45A 0%, #3E9A2F 50%, #236B23 100%);
  --ink-leaf-deep: #236B23; --ink-leaf-edge: #236B23; --ink-leaf-label: #FFFFFF;
  --ink-grape-fill: linear-gradient(180deg, #D5BDFF 0%, #8E5BEA 50%, #5A2DB3 100%);
  --ink-grape-plate: linear-gradient(90deg, #9E7BE8 0%, #6A3BC8 50%, #45208C 100%);
  --ink-grape-deep: #45208C; --ink-grape-edge: #45208C; --ink-grape-label: #FFFFFF;
  --ink-cherry-fill: linear-gradient(180deg, #FFB0B8 0%, #F0485F 50%, #C0182F 100%);
  --ink-cherry-plate: linear-gradient(90deg, #F06A7C 0%, #D21F3C 50%, #921126 100%);
  --ink-cherry-deep: #921126; --ink-cherry-edge: #921126; --ink-cherry-label: #FFFFFF;
  --ink-teal-fill: linear-gradient(180deg, #9BEDE3 0%, #23B5A8 50%, #0B7F78 100%);
  --ink-teal-plate: linear-gradient(90deg, #3FC4B8 0%, #11928A 50%, #08635E 100%);
  --ink-teal-deep: #08635E; --ink-teal-edge: #08635E; --ink-teal-label: #FFFFFF;
  --ink-gold-fill: linear-gradient(180deg, #FFF1B8 0%, #FFD24A 50%, #E0A10B 100%);
  --ink-gold-plate: linear-gradient(90deg, #FFD866 0%, #E8B21C 50%, #B98A0C 100%);
  --ink-gold-deep: #B98A0C; --ink-gold-edge: #A87608; --ink-gold-label: #3D2A00;
  --ink-night-fill: linear-gradient(180deg, #5C4AA8 0%, #2F2470 50%, #17123A 100%);
  --ink-night-plate: linear-gradient(90deg, #4B3C8F 0%, #2F2470 50%, #1B1640 100%);
  --ink-night-deep: #1B1640; --ink-night-edge: #0E0B25; --ink-night-label: #FFFFFF;
  --ink-paper-fill: linear-gradient(180deg, #FFFFFF 0%, #F3F3FA 50%, #E6E6F3 100%);
  --ink-paper-plate: linear-gradient(90deg, #FFFFFF 0%, #F6F6FC 50%, #E6E6F3 100%);
  --ink-paper-deep: #E6E6F3; --ink-paper-edge: #C3C3E0; --ink-paper-label: #223366;

  /* A part outside any inked element takes Steel, the neutral ink. */
  --ink-fill: var(--ink-steel-fill); --ink-plate: var(--ink-steel-plate); --ink-deep: var(--ink-steel-deep); --ink-edge: var(--ink-steel-edge); --ink-label: var(--ink-steel-label);
}

/* Swap one attribute, recolour the part. */
[data-ink='steel'] { --ink-fill: var(--ink-steel-fill); --ink-plate: var(--ink-steel-plate); --ink-deep: var(--ink-steel-deep); --ink-edge: var(--ink-steel-edge); --ink-label: var(--ink-steel-label); }
[data-ink='tangerine'] { --ink-fill: var(--ink-tangerine-fill); --ink-plate: var(--ink-tangerine-plate); --ink-deep: var(--ink-tangerine-deep); --ink-edge: var(--ink-tangerine-edge); --ink-label: var(--ink-tangerine-label); }
[data-ink='leaf'] { --ink-fill: var(--ink-leaf-fill); --ink-plate: var(--ink-leaf-plate); --ink-deep: var(--ink-leaf-deep); --ink-edge: var(--ink-leaf-edge); --ink-label: var(--ink-leaf-label); }
[data-ink='grape'] { --ink-fill: var(--ink-grape-fill); --ink-plate: var(--ink-grape-plate); --ink-deep: var(--ink-grape-deep); --ink-edge: var(--ink-grape-edge); --ink-label: var(--ink-grape-label); }
[data-ink='cherry'] { --ink-fill: var(--ink-cherry-fill); --ink-plate: var(--ink-cherry-plate); --ink-deep: var(--ink-cherry-deep); --ink-edge: var(--ink-cherry-edge); --ink-label: var(--ink-cherry-label); }
[data-ink='teal'] { --ink-fill: var(--ink-teal-fill); --ink-plate: var(--ink-teal-plate); --ink-deep: var(--ink-teal-deep); --ink-edge: var(--ink-teal-edge); --ink-label: var(--ink-teal-label); }
[data-ink='gold'] { --ink-fill: var(--ink-gold-fill); --ink-plate: var(--ink-gold-plate); --ink-deep: var(--ink-gold-deep); --ink-edge: var(--ink-gold-edge); --ink-label: var(--ink-gold-label); }
[data-ink='night'] { --ink-fill: var(--ink-night-fill); --ink-plate: var(--ink-night-plate); --ink-deep: var(--ink-night-deep); --ink-edge: var(--ink-night-edge); --ink-label: var(--ink-night-label); }
[data-ink='paper'] { --ink-fill: var(--ink-paper-fill); --ink-plate: var(--ink-paper-plate); --ink-deep: var(--ink-paper-deep); --ink-edge: var(--ink-paper-edge); --ink-label: var(--ink-paper-label); }