/* ============================================================
   LINE Bank Internal Portal — Design Tokens
   Shared across bank-portal, future pages, and style-guide.
   Palette: Blue + Indigo + Green, tech-minimal.
   Source of truth: design-recommendations.html
   ============================================================ */

:root {
  /* ---------- Brand: BLUE (cyan/sky) — sampled #0389E5 ---------- */
  --blue-50:  #E6F4FC;
  --blue-100: #CCE9FA;
  --blue-200: #99D3F5;
  --blue-300: #5CB8EF;
  --blue-500: #0389E5;    /* brand */
  --blue-600: #0270C2;
  --blue-700: #025A9E;
  --blue-800: #023E6E;
  --blue-900: #012742;

  /* ---------- Brand: INDIGO (deeper tone) — sampled #284EDB ---------- */
  --indigo-50:  #EEF0FB;
  --indigo-500: #284EDB;   /* brand */
  --indigo-700: #1A36A8;
  --indigo-900: #0E1F66;

  /* ---------- Brand: GREEN — vivid ---------- */
  /* Kept LINE-green (#06C755) as primary brand; design-rec #13CF36 tracked as green-500-alt */
  --green-50:  #E7FBEB;
  --green-100: #CFF7D7;
  --green-400: #4DDB63;
  --green-500: #06C755;    /* LINE brand green (retained) */
  --green-500-alt: #13CF36;
  --green-600: #05A847;
  --green-700: #0C8C25;    /* AA-safe for text on light bg */

  /* ---------- Neutrals: cool-tinted whites, near-black ---------- */
  --ink-0:   #ffffff;
  --ink-50:  #f7f8fa;
  --ink-100: #f1f3f7;
  --ink-150: #e9ecf2;
  --ink-200: #dde1ea;
  --ink-300: #c2c8d4;
  --ink-400: #8f96a5;
  --ink-500: #6b7280;
  --ink-600: #4b5465;
  --ink-700: #353c4a;
  --ink-800: #222733;
  --ink-900: #13161d;

  /* ---------- Semantic ---------- */
  --amber:   #f59e0b;
  --amber-light: #fef3c7;
  --red:     #dc2626;
  --red-light:   #fee2e2;

  /* ---------- Radii ---------- */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* ---------- Lines / Shadows ---------- */
  --hairline: 1px solid var(--ink-200);
  --shadow-sm: 0 1px 0 rgba(16,24,40,.02), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 16px -6px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px -8px rgba(16,24,40,.12);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo,
               Consolas, monospace;

  /* ---------- Layout constants ---------- */
  --page-max: 1280px;
  --sidebar-w: 260px;
  --topbar-h:  60px;

  /* ---------- Motion ---------- */
  --ease: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     COMPATIBILITY ALIASES — map legacy variable names used in
     bank-portal to the new token palette. Lets us refactor in
     place without search-and-replacing every rule.
     ============================================================ */

  /* Primary brand surface */
  --line-green:       var(--green-500);
  --line-green-dark:  var(--green-600);
  --line-green-light: var(--green-50);

  /* NOTE: #2E8BFF and #1a6fdd were unregistered intermediate blues that
     leaked in before the design QA. They are retired — --line-blue now
     maps to the single canonical --blue-500. Any CSS still hard-coding
     the old hex values should be swapped for var(--line-blue). */
  --line-blue:        var(--blue-500);
  --line-blue-dark:   var(--blue-700);
  --line-blue-light:  var(--blue-50);

  /* Legacy "primary" (was navy #1b2a4a) — remapped to deep indigo */
  --primary:          var(--indigo-900);
  --primary-light:    var(--indigo-700);

  --accent:           var(--green-500);
  --accent-hover:     var(--green-600);

  --success:          var(--green-600);
  --warning:          var(--amber);
  --danger:           var(--red);
  --info:             var(--blue-500);
  --purple:           #8b5cf6;

  /* Surfaces */
  --bg:               var(--ink-50);
  --bg-card:          var(--ink-0);
  --bg-sidebar:       var(--ink-0);   /* ← was dark navy; now white */

  /* Text */
  --text:             var(--ink-800);
  --text-secondary:   var(--ink-500);
  --text-sidebar:     var(--ink-600); /* ← darker ink now that sidebar is white */

  /* Borders */
  --border:           var(--ink-200);

  /* Legacy shadow aliases */
  --shadow:           var(--shadow-sm);
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.mono,
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Any numeric cell (amounts, IDs, dates, counts) renders in
   tabular-nums so columns align even with proportional fonts.
   Explicit opt-out: add .no-tabular to a cell. */
.table td:not(.no-tabular),
td.num,
.amt,
.money,
.doc-id,
.contract-no {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}