/* ===========================================================================
   FinLens — Design Tokens
   ---------------------------------------------------------------------------
   THIS IS THE ONLY FILE WHERE RAW HEX COLOURS, FONT-SIZES, SPACING UNITS,
   AND COMPONENT MEASUREMENTS ARE DEFINED. Everything else uses var(--*).
   ===========================================================================
   Acceptance test:
     1. Change --table-header-bg to red, save, reload — every table on every
        page should show red headers.
     2. Change --btn-bg-primary to blue — every primary button across the app
        becomes blue.
   If either test fails, the CSS architecture is broken. Fix first.
   =========================================================================== */

:root {
  /* --- Colours ----------------------------------------------------------- */
  --color-bg:           #ffffff;
  --color-bg-subtle:    #f8f8f8;
  --color-bg-muted:     #f0f0f0;
  --color-bg-overlay:   rgba(0, 0, 0, 0.5);
  --color-text:         #1a1a1a;
  --color-text-muted:   #707070;
  --color-text-subtle:  #a0a0a0;
  --color-text-inverse: #ffffff;
  --color-border:       #e0e0e0;
  --color-border-strong:#1a1a1a;
  --color-link:         #1a1a1a;
  --color-link-hover:   #000000;

  /* Semantic */
  --color-accent:       #1b8a2a;
  --color-accent-bg:    #e8f5e9;
  --color-warn:         #c77d00;
  --color-warn-bg:      #fff4e0;
  --color-danger:       #c62828;
  --color-danger-bg:    #ffebee;
  --color-info:         #1565c0;
  --color-info-bg:      #e3f2fd;

  /* --- Typography -------------------------------------------------------- */
  --font-ui:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.8;

  /* --- Spacing (4-px grid) ----------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Borders ----------------------------------------------------------- */
  --br-none: 0;
  --br-sm:   2px;
  --br-md:   3px;
  --br-lg:   6px;
  --br-pill: 999px;

  --bw-thin:  1px;
  --bw-thick: 2px;

  /* --- Layout ------------------------------------------------------------ */
  --sidebar-w:     230px;
  --header-h:      48px;
  --content-max-w: 100%;
  --auth-card-w:   400px;

  /* --- Tables ------------------------------------------------------------ */
  --table-row-h:        32px;
  --table-cell-py:      var(--sp-2);
  --table-cell-px:      var(--sp-3);
  --table-header-bg:    #1a1a1a;
  --table-header-fg:    #ffffff;
  --table-header-fs:    var(--fs-xs);
  --table-header-weight:var(--fw-bold);
  --table-header-tt:    uppercase;
  --table-header-ls:    0.5px;
  --table-row-border:   var(--color-border);
  --table-row-hover:    var(--color-bg-subtle);
  --table-row-zebra:    #fafafa;
  --table-num-font:     var(--font-mono);
  --table-empty-fg:     var(--color-text-subtle);

  /* --- Cards ------------------------------------------------------------- */
  --card-bg:      var(--color-bg);
  --card-border:  var(--color-border);
  --card-padding: var(--sp-4);
  --card-radius:  var(--br-md);

  /* --- Forms ------------------------------------------------------------- */
  --input-h:            30px;
  --input-px:           var(--sp-3);
  --input-border:       var(--color-border);
  --input-border-focus: var(--color-border-strong);
  --input-bg:           var(--color-bg);
  --input-bg-disabled:  var(--color-bg-muted);
  --input-fs:           var(--fs-sm);
  --input-radius:       var(--br-sm);

  --label-fs:    var(--fs-xs);
  --label-tt:    uppercase;
  --label-ls:    0.5px;
  --label-color: var(--color-text-muted);
  --label-weight:var(--fw-bold);

  --form-help-fs:    var(--fs-xs);
  --form-help-color: var(--color-text-muted);
  --form-error-color:var(--color-danger);

  /* --- Buttons ----------------------------------------------------------- */
  --btn-py:     6px;
  --btn-px:     var(--sp-5);
  --btn-fs:     var(--fs-xs);
  --btn-weight: var(--fw-bold);
  --btn-tt:     uppercase;
  --btn-ls:     0.5px;
  --btn-radius: var(--br-sm);

  --btn-bg-primary:        #000000;
  --btn-fg-primary:        #ffffff;
  --btn-bg-primary-hover:  #333333;

  --btn-bg-secondary:       #ffffff;
  --btn-fg-secondary:       #1a1a1a;
  --btn-border-secondary:   var(--color-border-strong);
  --btn-bg-secondary-hover: var(--color-bg-subtle);

  --btn-bg-danger:        var(--color-danger);
  --btn-fg-danger:        #ffffff;
  --btn-bg-danger-hover:  #a02020;

  --btn-bg-ghost-hover: var(--color-bg-subtle);

  /* --- Badges ------------------------------------------------------------ */
  --badge-py:     2px;
  --badge-px:     var(--sp-2);
  --badge-fs:     var(--fs-xs);
  --badge-weight: var(--fw-bold);
  --badge-tt:     uppercase;
  --badge-ls:     0.4px;
  --badge-radius: var(--br-sm);

  --badge-bg-default: var(--color-bg-muted);
  --badge-fg-default: var(--color-text);
  --badge-bg-success: var(--color-accent-bg);
  --badge-fg-success: var(--color-accent);
  --badge-bg-warn:    var(--color-warn-bg);
  --badge-fg-warn:    var(--color-warn);
  --badge-bg-danger:  var(--color-danger-bg);
  --badge-fg-danger:  var(--color-danger);
  --badge-bg-info:    var(--color-info-bg);
  --badge-fg-info:    var(--color-info);

  /* --- Modals & toasts --------------------------------------------------- */
  --modal-bg:        var(--color-bg);
  --modal-overlay:   var(--color-bg-overlay);
  --modal-padding:   var(--sp-6);
  --modal-max-w:     480px;
  --modal-radius:    var(--br-md);

  --toast-bg:      #1a1a1a;
  --toast-fg:      #ffffff;
  --toast-padding: var(--sp-3) var(--sp-4);
  --toast-radius:  var(--br-sm);

  --alert-padding: var(--sp-3) var(--sp-4);
  --alert-radius:  var(--br-sm);

  /* --- Sidebar ----------------------------------------------------------- */
  --sidebar-bg:           var(--color-bg);
  --sidebar-border:       var(--color-border);
  --sidebar-fs:           var(--fs-sm);
  --sidebar-item-py:      var(--sp-2);
  --sidebar-item-px:      var(--sp-4);
  --sidebar-section-fs:   var(--fs-xs);
  --sidebar-section-fg:   var(--color-text-subtle);
  --sidebar-item-hover:   var(--color-bg-subtle);
  --sidebar-item-active:  var(--color-bg-muted);
  --sidebar-item-fg:      var(--color-text);

  /* --- Header ------------------------------------------------------------ */
  --header-bg:     var(--color-bg);
  --header-border: var(--color-border);
  --header-fs:     var(--fs-sm);

  /* --- Icons ------------------------------------------------------------- */
  --icon-stroke: 1.5;
}