/* ============================================================
   OptoBizz design tokens.

   The audit found 165 distinct colours, 45 font sizes, 36 shadow definitions and
   5px/6px radii living side by side. This file is the whole vocabulary; everything
   else in the app refers to it. If a value is not here, it should not be used.

   ONE theme. The dark tree that used to ship (193 stylesheets, 1.65 MB) was never
   served - the toggle set a cookie nothing read - and has been removed. The colour
   tokens are grouped so a second theme can later be added by redefining this block
   alone, not by maintaining a parallel stylesheet.

   Loaded BEFORE app-refresh.css, which is where the tokens are applied.
   ============================================================ */

:root {
    /* ---- Type scale -------------------------------------------------------
       Base 16px with a 1.5 line-height: the readability complaint was real, and
       the old base was 14px (theme) nudged to 15px. Five steps, no more. Sizes
       are rem so the whole scale moves together if the base ever changes again. */
    --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-caption: 0.8125rem;   /* 13px - table meta, helper text, timestamps */
    --text-body: 1rem;           /* 16px - the default for everything readable */
    --text-subhead: 1.125rem;    /* 18px - card titles, section leads */
    --text-heading: 1.375rem;    /* 22px - page and panel headings */
    --text-display: 1.75rem;     /* 28px - page title, the single biggest thing */

    --leading-tight: 1.3;        /* headings */
    --leading-body: 1.5;         /* everything else */

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- Spacing ----------------------------------------------------------
       One geometric scale. Every margin and padding we author picks from it. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    /* Used by five cashflow rules that were silently collapsing to no margin at all: an
       undefined custom property is not an error, it is just nothing. */
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* ---- Colour -----------------------------------------------------------
       Five hues plus one grey ramp, which is what the theme's 111 colours were
       underneath. Each hue has a soft (background) and a strong (text/icon)
       member so pills, banners and states never invent their own pair. */

    /* Grey ramp: surfaces and text */
    --grey-0: #ffffff;
    --grey-50: #f7f9fc;    /* page background, zebra, hover */
    --grey-100: #eef1f6;   /* quiet fills */
    --grey-200: #e6e8ee;   /* borders and rules */
    --grey-400: #9aa3b2;   /* disabled, placeholder */
    --grey-600: #6b7280;   /* secondary text */
    --grey-900: #1f2937;   /* primary text */

    /* Brand / informational */
    --blue-soft: #e8edfe;
    --blue: #4361ee;
    --blue-strong: #3550c9;

    /* Success / done */
    --green-soft: #e7f8f0;
    --green: #12b981;
    --green-strong: #0f9d64;

    /* Attention - lateness lives HERE, never in red (see the design brief) */
    --amber-soft: #fdf3e2;
    --amber: #e2a03f;
    --amber-strong: #c07d18;

    /* Danger - destructive confirmation and genuine errors ONLY */
    --red-soft: #fdeaea;
    --red: #e7515a;
    --red-strong: #d9403f;

    /* Accent for time / in-progress */
    --teal-soft: #e2f7f5;
    --teal: #14b8a6;
    --teal-strong: #0e9488;

    /* Semantic aliases: views name the ROLE, not the hue. */
    --ink: var(--grey-900);
    --ink-muted: var(--grey-600);
    --ink-faint: var(--grey-400);
    --surface: var(--grey-0);
    --surface-sunken: var(--grey-50);
    --line: var(--grey-200);
    --accent: var(--blue);
    --accent-ink: var(--blue-strong);
    --focus-ring: rgba(67, 97, 238, 0.15);

    /* ---- Shell ------------------------------------------------------------
       The app is a reading surface, not a wall chart. Beyond this width the eye
       has to travel further than the content is worth: a task title and its
       ticket ended up a full screen apart. Margins above it. */
    --shell-max: 1560px;

    /* ---- Radii ------------------------------------------------------------
       One for controls, one for cards. The theme had 5px and 6px coexisting. */
    --radius-control: 8px;
    --radius-card: 12px;
    /* A panel rounds like a card. The day pane on the Tasks board used this name from v6.4.0
       and it was defined nowhere, so it had square corners beside rounded neighbours for two
       days; decided as --radius-card on 2026-08-26. */
    --radius-panel: var(--radius-card);
    --radius-pill: 999px;

    /* ---- Elevation --------------------------------------------------------
       Three levels instead of 36. Level 1 for resting cards, 2 for raised
       surfaces, 3 for things floating over the page. */
    --shadow-1: 0 1px 2px rgba(31, 41, 55, 0.06), 0 1px 3px rgba(31, 41, 55, 0.04);
    --shadow-2: 0 4px 12px rgba(31, 41, 55, 0.08);
    --shadow-3: 0 12px 32px rgba(31, 41, 55, 0.14);

    /* ---- Telling one account from another ---------------------------------
       OptoBizz's own palette, never a bank's brand colour: reproducing ING
       orange or ABN green as an identifier carries the trademark problem that
       kept card logos out, and two banks in similar greens would be
       indistinguishable anyway. The user is telling THEIR accounts apart, not
       recognising a bank they already know.

       Eight hues spread around the wheel with nothing adjacent, so any two are
       visibly different rather than merely different.

       Colour is never the only signal wherever these are used: the account
       name stays present and readable beside it. */
    --account-slate: #64748b;
    --account-blue: #2563eb;
    --account-teal: #0d9488;
    --account-green: #16a34a;
    --account-amber: #d97706;
    --account-orange: #ea580c;
    --account-rose: #e11d48;
    --account-purple: #7c3aed;

    /* ---- Motion ----------------------------------------------------------- */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --duration-fast: 120ms;
    --duration: 200ms;
}