/*
    Design tokens - the single source of truth for colour, spacing, type, radius,
    shadow and layout in this app (finding U6).

    Load order matters and is fixed in index.html:

        bootstrap.min.css  ->  tokens.css  ->  app.css  ->  scoped component css

    tokens.css comes AFTER Bootstrap so that the :root declarations below win over
    Bootstrap's own (identical specificity, later wins), and BEFORE app.css so that
    every app rule can read them.

    The rule for this file: do not build a parallel design system. Bootstrap 5.3
    already exposes its whole surface as --bs-* custom properties, so an app token
    is defined once as --app-* and then *assigned* to the matching --bs-* property.
    Overriding --bs-primary here re-colours every vendored Bootstrap rule that reads
    it - utilities, links, focus rings, form validation - without patching Bootstrap.

    Anything hardcoded in a component should be replaced by the token below, not by
    a new value.
*/

:root {
    /* ------------------------------------------------------------------
       Brand colour

       The app previously shipped five different "primary blues"
       (#1b6ec2, #0071c1, #0d6efd, #258cfb, #2563eb). There is now exactly
       one. #0d6efd was chosen because it is what the charts and Bootstrap
       itself already use, so collapsing onto it is the lowest-risk merge.
       Change these two lines to re-brand the entire application.
       ------------------------------------------------------------------ */
    --app-primary: #0d6efd;
    --app-primary-rgb: 13, 110, 253;
    --app-primary-hover: #0b5ed7;
    --app-primary-active: #0a58ca;
    --app-on-primary: #fff;

    /* ------------------------------------------------------------------
       Neutrals / surfaces
       ------------------------------------------------------------------ */
    --app-body-color: #212529;
    --app-body-bg: #fff;
    --app-secondary-color: rgba(33, 37, 41, 0.75);
    --app-muted-color: rgba(33, 37, 41, 0.5);
    --app-surface-bg: #f8f9fa;
    --app-border-color: #dee2e6;
    --app-border-color-strong: #ced4da;

    /* Status colours, kept in sync with Bootstrap's semantic palette. */
    --app-success: #198754;
    --app-warning: #ffc107;
    --app-danger: #dc3545;
    --app-info: #0dcaf0;

    /* ------------------------------------------------------------------
       Typography

       Root font-size is the browser default (16px) again - see app.css,
       finding L3. Every step below is therefore a true rem multiple of 16.
       ------------------------------------------------------------------ */
    --app-font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --app-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* 5-step type scale. Nothing in the app should invent a sixth size. */
    --app-font-size-sm: 0.875rem;   /* 14px - table cells, captions, badges */
    --app-font-size-base: 1rem;     /* 16px - body copy, form controls      */
    --app-font-size-lg: 1.25rem;    /* 20px - section headings (h3)         */
    --app-font-size-xl: 1.5rem;     /* 24px - page sub-headings (h2)        */
    --app-font-size-2xl: 2rem;      /* 32px - page title (h1)               */

    --app-line-height: 1.5;
    --app-line-height-tight: 1.2;
    --app-font-weight-normal: 400;
    --app-font-weight-medium: 500;
    --app-font-weight-bold: 600;

    /* ------------------------------------------------------------------
       Spacing - 6 steps. Steps 1-2-4-5-6 are Bootstrap's own spacer scale
       (.25 / .5 / 1 / 1.5 / 3rem), so `p-1 .. p-5` and these tokens agree.
       Step 3 (0.75rem) is the half-gutter Bootstrap uses inside rows.
       ------------------------------------------------------------------ */
    --app-space-1: 0.25rem;   /*  4px */
    --app-space-2: 0.5rem;    /*  8px */
    --app-space-3: 0.75rem;   /* 12px */
    --app-space-4: 1rem;      /* 16px */
    --app-space-5: 1.5rem;    /* 24px */
    --app-space-6: 3rem;      /* 48px */

    /* ------------------------------------------------------------------
       Radii - 3 steps only.
       ------------------------------------------------------------------ */
    --app-radius-sm: 0.25rem;
    --app-radius: 0.375rem;
    --app-radius-lg: 0.5rem;

    /* ------------------------------------------------------------------
       Elevation - 2 steps only.
       ------------------------------------------------------------------ */
    --app-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --app-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    /* ------------------------------------------------------------------
       Layout

       --app-max-width and --app-gutter are what make the navbar and the page
       content share a left edge (finding U2): both the navbar's inner element
       and the content wrapper use .app-container, which is built from these
       two tokens and nothing else. Change them in one place and both move
       together.
       ------------------------------------------------------------------ */
    --app-max-width: 1600px;
    --app-gutter: var(--app-space-5);   /* 24px inline padding  */
    --nav-height: 3.5rem;               /* 56px - the collapsed navbar row */
    --control-height: 2.375rem;         /* 38px - Bootstrap's default input/button height */

    /* ------------------------------------------------------------------
       Chart semantics

       Defined here so the SVG chart components stop hardcoding hex values.
       Applying them is a separate change in Components/Charts/*.
       ------------------------------------------------------------------ */
    --app-chart-1: var(--app-primary);    /* primary series  - balances, income  */
    --app-chart-2: var(--app-success);    /* secondary series - net worth, saldo */
    --app-chart-grid: #e5e5e5;            /* gridlines                           */
    --app-chart-axis: #666;               /* axis lines, tick labels             */

    /* ==================================================================
       Assignment into Bootstrap 5.3

       Everything below is plumbing: it hands the tokens above to vendored
       Bootstrap. No new values are introduced here.
       ================================================================== */
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-blue: var(--app-primary);

    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-focus-ring-color: rgba(var(--app-primary-rgb), var(--bs-focus-ring-opacity));

    --bs-body-color: var(--app-body-color);
    --bs-body-bg: var(--app-body-bg);
    --bs-secondary-color: var(--app-secondary-color);
    --bs-tertiary-color: var(--app-muted-color);
    --bs-border-color: var(--app-border-color);

    --bs-body-font-family: var(--app-font-sans);
    --bs-font-monospace: var(--app-font-mono);
    --bs-body-font-size: var(--app-font-size-base);
    --bs-body-line-height: var(--app-line-height);

    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius: var(--app-radius);
    --bs-border-radius-lg: var(--app-radius-lg);

    --bs-box-shadow-sm: var(--app-shadow-sm);
    --bs-box-shadow: var(--app-shadow);
}