/* ════════════════════════════════════════════════════════════════════════════
   InterbankOS Terminal · design tokens
   ────────────────────────────────────────────────────────────────────────────
   The single source of truth for every visual value the terminal uses.
   Tokens are organized in layers: foundations (color primitives, type,
   spacing scale, motion curves) and semantic aliases (text-primary,
   surface-elevated, brand-accent, etc.). Surfaces compose from semantics;
   semantics compose from foundations; nothing composes from raw values.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Foundation: ink scale ─────────────────────────────────────────────
     True black softened to a deep navy that reads more institutional than
     stark on bright white. Eight steps from apex to faintest. */
  --ink-0: #0a1628;   /* apex — page titles, primary numbers */
  --ink-1: #1c2b3f;   /* primary body */
  --ink-2: #2e4156;   /* secondary body */
  --ink-3: #54677c;   /* tertiary, captions */
  --ink-4: #7a8b9e;   /* hints, placeholders */
  --ink-5: #a4b3c2;   /* dividers visible */
  --ink-6: #c8d3df;   /* dividers subtle */
  --ink-7: #e2e9f0;   /* surfaces */
  --ink-8: #f1f5f9;   /* canvas tints */

  /* ─── Foundation: paper scale ───────────────────────────────────────────
     Whites with the faintest cool undertone, so the page never feels
     surgical. */
  --paper:        #ffffff;
  --paper-warm:   #fdfdfc;
  --paper-cool:   #f8fafc;
  --paper-cooler: #eef4f8;
  --canvas:       #f4f7fa;

  /* ─── Foundation: brand palette ─────────────────────────────────────────
     Teal as the primary brand color, blue as the institutional secondary,
     mint as the positive-value semantic. Each color has bright, base, deep,
     soft (background tint), and rule (border tint) variants. */
  --teal:        #0d7377;
  --teal-bright: #14a098;
  --teal-deep:   #094a4d;
  --teal-soft:   rgba(13, 115, 119, 0.08);
  --teal-rule:   rgba(13, 115, 119, 0.20);

  --blue:        #0353a4;
  --blue-bright: #1e6dc3;
  --blue-deep:   #023e7d;
  --blue-soft:   rgba(3, 83, 164, 0.08);
  --blue-rule:   rgba(3, 83, 164, 0.20);

  --mint:        #1a936f;
  --mint-bright: #2eaa83;
  --mint-deep:   #126b50;
  --mint-soft:   rgba(26, 147, 111, 0.10);
  --mint-rule:   rgba(26, 147, 111, 0.24);

  --amber:       #d97706;
  --amber-soft:  rgba(217, 119, 6, 0.10);
  --amber-rule:  rgba(217, 119, 6, 0.24);

  --crimson:     #be1e2d;
  --crimson-soft:rgba(190, 30, 45, 0.08);
  --crimson-rule:rgba(190, 30, 45, 0.22);

  /* Iridescent tints for the plexiglass overlay */
  --tint-cyan:   rgba(13, 115, 119, 0.06);
  --tint-blue:   rgba(3, 83, 164, 0.05);
  --tint-mint:   rgba(26, 147, 111, 0.06);
  --tint-iris:   rgba(89, 200, 220, 0.07);

  /* Glass material */
  --glass-fill:        rgba(255, 255, 255, 0.62);
  --glass-fill-strong: rgba(255, 255, 255, 0.82);
  --glass-edge:        rgba(255, 255, 255, 0.92);
  --glass-edge-dim:    rgba(255, 255, 255, 0.62);

  /* Hairlines — divider weights from finest to most visible */
  --rule-1: rgba(10, 22, 40, 0.06);
  --rule-2: rgba(10, 22, 40, 0.10);
  --rule-3: rgba(10, 22, 40, 0.14);
  --rule-4: rgba(10, 22, 40, 0.20);

  /* ─── Semantic aliases ──────────────────────────────────────────────────
     Use these in components. They route through to the foundations and can
     be overridden for theming or accessibility variants without changing
     the components themselves. */
  --text-primary:   var(--ink-1);
  --text-strong:    var(--ink-0);
  --text-secondary: var(--ink-2);
  --text-tertiary:  var(--ink-3);
  --text-hint:      var(--ink-4);
  --text-disabled:  var(--ink-5);

  --brand:          var(--teal);
  --brand-bright:   var(--teal-bright);
  --brand-deep:     var(--teal-deep);
  --brand-soft:     var(--teal-soft);
  --brand-rule:     var(--teal-rule);

  --positive:       var(--mint);
  --negative:       var(--crimson);
  --caution:        var(--amber);
  --informational:  var(--blue);

  /* ─── Elevation ─────────────────────────────────────────────────────────
     Shadows are composed of two layers: a tight near-shadow that grounds
     the element on its surface, and a soft far-shadow that lifts it
     visually. Inner top-edge highlights complete the plexiglass illusion. */
  --shadow-rest:  0 4px 14px rgba(13, 30, 50, 0.06),  0 1px 3px rgba(13, 30, 50, 0.04);
  --shadow-lift:  0 12px 36px rgba(13, 30, 50, 0.10), 0 4px 10px rgba(13, 30, 50, 0.05);
  --shadow-deep:  0 24px 60px rgba(13, 30, 50, 0.14), 0 8px 18px rgba(13, 30, 50, 0.06);
  --shadow-brand: 0 8px 24px rgba(13, 115, 119, 0.18), 0 2px 6px rgba(13, 115, 119, 0.10);

  /* ─── Typography ────────────────────────────────────────────────────────
     IBM Plex is the entire family. Sans for body and labels, Mono for
     numerics and addresses, Serif for editorial moments. Loaded once
     via the entry HTML; no @font-face here so we do not duplicate. */
  --sans:  "IBM Plex Sans",  -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "IBM Plex Mono",  ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "IBM Plex Serif", Georgia, serif;

  /* ─── Spacing — 4px base ────────────────────────────────────────────────
     Constrained ladder. Components reach for tokens, never raw pixel
     values. The constraint is the discipline. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ─── Motion ────────────────────────────────────────────────────────────
     Fast enough to feel responsive, never so fast it loses craft. The
     iris-drift constant is for the plexiglass animation only. */
  --dur-press:  90ms;
  --dur-hover:  160ms;
  --dur-state:  240ms;
  --dur-arrive: 420ms;
  --dur-iris:   6s;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);

  /* ─── Radius ────────────────────────────────────────────────────────────
     Restrained corners. Tables are sharp; cards are softly rounded;
     pills are fully round. */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;
  --r-pill: 999px;

  /* ─── Layout ────────────────────────────────────────────────────────────
     Max-content width and responsive page gutters. */
  --max-w: 1320px;
  --gutter: clamp(16px, 4vw, 32px);

  /* ─── Component-specific tokens ─────────────────────────────────────────
     Concentrated here so they can be tuned without spelunking through
     component files. */
  --chrome-h-desktop: 64px;
  --chrome-h-mobile: 56px;
  --nav-h: 44px;
  --mobile-tabbar-h: 64px;

  /* ─── Iridescent gradient angle (animated property) ─────────────────────
     Declared as a registered custom property below so the @keyframes
     animation can interpolate it smoothly. */
}

/* The iris-angle custom property must be registered for it to animate.
   Without @property, browsers treat custom properties as strings and
   cannot interpolate them. */
@property --iris-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

/* ════════════════════════════════════════════════════════════════════════
   Quantum Field institutional dark override — Tezos X / Community Bank
   Preserves the existing component API while translating the surface to
   the Fraunces / Geist / JetBrains Mono language and the v3 palette.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --void: #050811;
  --abyss: #070b16;
  --indigo: #0a0e1a;
  --indigo-2: #0c1224;
  --indigo-3: #11182d;
  --indigo-4: #161e37;

  --slime: #6ef097;
  --slime-deep: #34c66b;
  --azure: #5b8def;
  --azure-soft: #93afff;
  --violet: #b78cff;
  --violet-soft: #d4baff;
  --gilt: #c9a574;
  --pqc-cyan: #8be0ff;
  --rust: #d97757;

  --ink-0: #f2f5ff;
  --ink-1: #dfe7ff;
  --ink-2: #c5cfeb;
  --ink-3: #8896c4;
  --ink-4: #5a6797;
  --ink-5: #364068;
  --ink-6: rgba(255, 255, 255, 0.14);
  --ink-7: rgba(255, 255, 255, 0.08);
  --ink-8: rgba(255, 255, 255, 0.04);

  --paper: var(--void);
  --paper-warm: var(--abyss);
  --paper-cool: var(--indigo);
  --paper-cooler: var(--indigo-2);
  --canvas: var(--void);

  --teal: var(--azure);
  --teal-bright: var(--azure-soft);
  --teal-deep: #2c6dd8;
  --teal-soft: rgba(91, 141, 239, 0.12);
  --teal-rule: rgba(91, 141, 239, 0.28);

  --blue: var(--violet);
  --blue-bright: var(--violet-soft);
  --blue-deep: #8c5fd9;
  --blue-soft: rgba(183, 140, 255, 0.12);
  --blue-rule: rgba(183, 140, 255, 0.28);

  --mint: var(--slime);
  --mint-bright: #a8ffc8;
  --mint-deep: var(--slime-deep);
  --mint-soft: rgba(110, 240, 151, 0.12);
  --mint-rule: rgba(110, 240, 151, 0.28);

  --amber: var(--gilt);
  --amber-soft: rgba(201, 165, 116, 0.14);
  --amber-rule: rgba(201, 165, 116, 0.32);

  --crimson: #ff7a8a;
  --crimson-soft: rgba(255, 122, 138, 0.12);
  --crimson-rule: rgba(255, 122, 138, 0.28);

  --tint-cyan: rgba(139, 224, 255, 0.08);
  --tint-blue: rgba(91, 141, 239, 0.08);
  --tint-mint: rgba(110, 240, 151, 0.08);
  --tint-iris: rgba(183, 140, 255, 0.09);

  --glass-fill: rgba(22, 30, 55, 0.42);
  --glass-fill-strong: rgba(28, 38, 68, 0.58);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-edge-dim: rgba(255, 255, 255, 0.10);

  --rule-1: rgba(255, 255, 255, 0.06);
  --rule-2: rgba(255, 255, 255, 0.10);
  --rule-3: rgba(255, 255, 255, 0.16);
  --rule-4: rgba(255, 255, 255, 0.22);

  --text-primary: var(--ink-1);
  --text-strong: var(--ink-0);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-hint: var(--ink-4);
  --text-disabled: var(--ink-5);

  --brand: var(--azure);
  --brand-bright: var(--azure-soft);
  --brand-deep: #2c6dd8;
  --brand-soft: rgba(91, 141, 239, 0.12);
  --brand-rule: rgba(91, 141, 239, 0.30);

  --positive: var(--slime);
  --negative: #ff7a8a;
  --caution: var(--rust);
  --informational: var(--violet);

  --shadow-rest: 0 24px 60px rgba(0, 0, 0, 0.26), 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-lift: 0 32px 86px rgba(0, 0, 0, 0.36), 0 4px 14px rgba(0, 0, 0, 0.42);
  --shadow-deep: 0 40px 110px rgba(0, 0, 0, 0.44), 0 10px 24px rgba(0, 0, 0, 0.46);
  --shadow-brand: 0 0 36px rgba(91, 141, 239, 0.28), 0 8px 22px rgba(0, 0, 0, 0.36);

  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Fraunces", Georgia, serif;

  --r-1: 8px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 22px;
  --r-5: 30px;
}