/* ==========================================================================
   KATJING FINANCE MONITOR — Design Tokens
   Single source of truth for all design values.
   Do not hardcode any of these values in component or page files.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Colours — Backgrounds
  -------------------------------------------------------------------------- */
  --color-bg:               #f7f7f5;   /* Page background */
  --color-surface:          #ffffff;   /* Cards, panels, inputs */
  --color-surface-2:        #f2f1ee;   /* Table headers, secondary bg */

  /* --------------------------------------------------------------------------
     Colours — Text
  -------------------------------------------------------------------------- */
  --color-text:             #1a1a18;   /* Primary text */
  --color-text-2:           #6b6b67;   /* Labels, secondary text */
  --color-text-3:           #a0a09b;   /* Hints, timestamps, disclaimers */

  /* --------------------------------------------------------------------------
     Colours — Borders
  -------------------------------------------------------------------------- */
  --color-border:           rgba(0, 0, 0, 0.08);   /* Default */
  --color-border-mid:       rgba(0, 0, 0, 0.13);   /* Inputs, stronger dividers */

  /* --------------------------------------------------------------------------
     Colours — Brand (Blue)
     Use only for: user's own loan/bank, actionable elements, active states.
     Never use as generic decoration.
  -------------------------------------------------------------------------- */
  --color-blue:             #185FA5;
  --color-blue-light:       #E6F1FB;   /* Active backgrounds, highlighted rows */
  --color-blue-mid:         #B5D4F4;   /* Borders on blue backgrounds */

  /* --------------------------------------------------------------------------
     Colours — Semantic
  -------------------------------------------------------------------------- */
  --color-green:            #3B6D11;   /* Positive verdict, favourable */
  --color-green-light:      #EAF3DE;   /* Green badge background */

  --color-amber:            #854F0B;   /* Warning, consider action */
  --color-amber-light:      #FAEEDA;   /* Amber badge background */

  --color-red:              #A32D2D;   /* Negative delta, cost increase */
  --color-red-light:        #FCEBEB;   /* Red badge background */

  --color-star:             #EF9F27;   /* Favourite star */

  /* --------------------------------------------------------------------------
     Typography
  -------------------------------------------------------------------------- */
  --font-sans:              system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:             'Georgia', serif;

  /* Scale */
  --text-xs:                10px;
  --text-sm:                11px;
  --text-base:              13px;
  --text-md:                14px;
  --text-lg:                15px;
  --text-xl:                18px;
  --text-2xl:               20px;
  --text-3xl:               24px;
  --text-4xl:               26px;

  /* Weight */
  --font-normal:            400;
  --font-medium:            500;
  --font-semibold:          600;

  /* --------------------------------------------------------------------------
     Spacing
  -------------------------------------------------------------------------- */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                10px;
  --space-4:                12px;
  --space-5:                14px;
  --space-6:                16px;
  --space-8:                20px;
  --space-10:               24px;
  --space-12:               28px;
  --space-16:               32px;

  /* Semantic spacing */
  --gap-card:               10px;      /* Between cards in a grid */
  --gap-section:            2rem;      /* Between page sections */
  --padding-card:           1rem;      /* Card internal padding (mobile) */
  --padding-card-desktop:   1.25rem;   /* Card internal padding (desktop) */
  --padding-page:           1rem;      /* Page horizontal padding (mobile) */
  --padding-page-desktop:   2rem;      /* Page horizontal padding (desktop) */
  --padding-cell:           10px 14px; /* Table cell padding */

  /* --------------------------------------------------------------------------
     Border Radius
  -------------------------------------------------------------------------- */
  --radius-xs:              4px;
  --radius-sm:              6px;
  --radius-md:              10px;
  --radius-lg:              14px;
  --radius-full:            999px;

  /* --------------------------------------------------------------------------
     Shadows
  -------------------------------------------------------------------------- */
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:              0 2px 8px rgba(0, 0, 0, 0.08);

  /* --------------------------------------------------------------------------
     Layout
  -------------------------------------------------------------------------- */
  --nav-height:             52px;      /* Desktop top nav */
  --nav-height-mobile:      44px;      /* Mobile top nav */
  --sidebar-width:          260px;     /* Desktop sidebar */
  --tab-bar-height:         80px;      /* Mobile bottom tab bar incl. safe area */
  --max-content-width:      900px;     /* Maximum content width */

  /* --------------------------------------------------------------------------
     Transitions
  -------------------------------------------------------------------------- */
  --transition-fast:        0.12s ease;
  --transition-base:        0.18s ease;

}