/* =====================================================================
   Transaction Intelligence — Design Tokens
   Equity & Concourse via local @font-face (WOFF2). See bottom of file.
   ===================================================================== */

/* =====================================================================
   Tokens — Light
   ===================================================================== */
:root {
  /* Brand — Indigo-leaning purple, more confident than washed-out plum */
  --brand: #4B2E83;
  --brand-ink: #2D1B52;          /* darker, for headlines */
  --brand-tint: #F1ECF9;         /* very pale wash for backgrounds */
  --brand-line: #E1D8F0;

  /* Refined Jewel category palette */
  --cat-ai:         #6E5B8E;  /* Amethyst */
  --cat-ux:         #B0884E;  /* Topaz   */
  --cat-payments:   #A1506B;  /* Garnet  */
  --cat-behaviour:  #4E7A94;  /* Sapphire*/
  --cat-banking:    #3E5568;  /* Onyx    */
  --cat-regulatory: #3D8B7A;  /* Emerald */

  /* Surface — warm off-whites */
  --bg:        #FBF9F5;
  --paper:     #FFFFFF;
  --surface-2: #F4F0E9;
  --rule:      #E5DFD4;
  --rule-soft: #EFEAE0;

  /* Ink */
  --ink:        #1A1814;
  --ink-2:      #45413B;
  --ink-3:      #6B665C;
  --ink-4:      #94908A;

  /* Type stacks */
  --serif:      "Equity", "Charter", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
  --serif-caps: "Equity Caps", "Equity", "Charter", "Iowan Old Style", Georgia, serif;
  --sans:       "Concourse", "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif;
  --mono:       ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Radii */
  --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px;

  /* Editorial measure */
  --measure: 64ch;
  --measure-narrow: 56ch;

  /* Misc */
  --header-height: 60px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* Brand colour for OS-level chrome (mobile address bar, etc.) */
  color-scheme: light;
}

[data-theme="dark"] { color-scheme: dark; }

/* Logo: pre-tinted SVGs — show the right one based on resolved [data-theme]. */
.logo-mark .logo-light { display: inline-block; }
.logo-mark .logo-dark  { display: none; }
[data-theme="dark"] .logo-mark .logo-light { display: none; }
[data-theme="dark"] .logo-mark .logo-dark  { display: inline-block; }

/* Theme toggle icons — show only the icon matching the user's preference,
   not the resolved theme. Lets the user see whether they're on Auto. */
[data-action="toggle-theme"] .icon-auto,
[data-action="toggle-theme"] .icon-light,
[data-action="toggle-theme"] .icon-dark { display: none; }
[data-theme-pref="auto"]  [data-action="toggle-theme"] .icon-auto  { display: inline-block; }
[data-theme-pref="light"] [data-action="toggle-theme"] .icon-light { display: inline-block; }
[data-theme-pref="dark"]  [data-action="toggle-theme"] .icon-dark  { display: inline-block; }

/* =====================================================================
   Tokens — Dark
   ===================================================================== */
[data-theme="dark"] {
  --brand: #A188E8;
  --brand-ink: #C7B5F2;
  --brand-tint: #1F1A2E;
  --brand-line: #2E2645;

  --cat-ai:         #9B86C4;
  --cat-ux:         #D6AC74;
  --cat-payments:   #C8788F;
  --cat-behaviour:  #7DA8C2;
  --cat-banking:    #8AA0BA;
  --cat-regulatory: #6FB7A4;

  --bg:        #0E0D14;
  --paper:     #15141C;
  --surface-2: #1B1A24;
  --rule:      #28263A;
  --rule-soft: #1F1E2A;

  --ink:   #ECE7DD;
  --ink-2: #C2BCAF;
  --ink-3: #908A7E;
  --ink-4: #6A6557;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --brand: #A188E8;
    --brand-ink: #C7B5F2;
    --brand-tint: #1F1A2E;
    --brand-line: #2E2645;

    --cat-ai:         #9B86C4;
    --cat-ux:         #D6AC74;
    --cat-payments:   #C8788F;
    --cat-behaviour:  #7DA8C2;
    --cat-banking:    #8AA0BA;
    --cat-regulatory: #6FB7A4;

    --bg:        #0E0D14;
    --paper:     #15141C;
    --surface-2: #1B1A24;
    --rule:      #28263A;
    --rule-soft: #1F1E2A;

    --ink:   #ECE7DD;
    --ink-2: #C2BCAF;
    --ink-3: #908A7E;
    --ink-4: #6A6557;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}

/* =====================================================================
   Web fonts — Equity & Concourse
   ===================================================================== */
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity_ot_a_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity_ot_a_italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity_ot_a_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Equity";
  src: url("../fonts/equity_ot_a_bold_italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Equity Caps";
  src: url("../fonts/equity_a_caps_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Equity Caps";
  src: url("../fonts/equity_a_caps_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse_ot_3_book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse_ot_3_book_italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse_ot_4_medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse_ot_6_semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Concourse";
  src: url("../fonts/concourse_ot_7_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}