/*
 * Design tokens. Every colour, radius and timing used in the panel lives here.
 *
 * The greys are NEUTRAL, and neutral means neutral: every surface, ink and
 * hairline below has R = G = B exactly. Not the warm paper-and-sand cast this
 * palette used to carry, and not the cool slate cast that a "neutral grey"
 * picked from a stock ramp almost always turns out to be - #f5f6f8 and #1b1f24
 * both read blue next to a white card. If you add a grey here, check the three
 * channels are the same number before you check anything else.
 *
 * The canvas is a grey step below the surfaces, and that step is load-bearing.
 * Cards, inputs and the top bar are all #ffffff, so on a white canvas there
 * would be nothing separating a surface from the ground, and the structure
 * would have to be bought back with borders and shadows on everything - which
 * is the decoration this design removed. One step of grey buys it for free.
 *
 * Saturated colour is spent on information only - a state, a badge, a
 * destructive action, the active tool - never on decoration.
 */
:root {
    /* ---- type -------------------------------------------------------------
       The stack itself lives in fonts.css, the only sheet the print popup also
       loads; the literal here is the fallback for a page that somehow ships
       without it, and must stay identical to that one. */
    --font-ui: var(--font-stack, 'KookFaNum', 'Vazirmatn', 'IRANSans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif);
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    /* 13px is the workhorse: it is what .input, .btn and body text inherit.
       14px left too little on screen once tables got their compact rows. */
    --fs-md: 13px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    /* Persian needs more leading than Latin at the same size. */
    --lh: 1.75;

    /* ---- surfaces ---------------------------------------------------------
       A single neutral ramp. The canvas is never #ffffff, so a white card
       reads as lifted without needing a shadow to say so. */
    --canvas: #f4f4f4;      /* page behind everything */
    --surface: #ffffff;     /* cards, top bar, popovers */
    --surface-2: #fafafa;   /* a hair off the surface, for banded rows */
    --panel: #eaeaea;       /* muted fill: table heads, .result, readonly */
    --field: #ffffff;       /* input interiors */
    --sidebar: #efefef;     /* one step down from the canvas */
    --topbar: #ffffff;
    --hover: #e6e6e6;       /* the darkest ground any text sits on - see --ink-3 */
    --hover-soft: #f2f2f2;  /* table row hover, quiet enough to scan past */

    /* Kept because tools/crm pins its sticky card head to it. It described
       window chrome that no longer exists, so it is re-valued rather than
       dropped: any surface that has to sit still while content scrolls. */
    --win-bar: #eaeaea;

    /* ---- ink --------------------------------------------------------------
       Neutral near-black plus two muted steps. --ink-3 carries every hint and
       caption in the panel (42 uses across the tools), so it is held at AA
       against EVERY ground it can land on, not just white:

         on --surface  5.74   on --canvas   5.22   on --sidebar  4.99
         on --panel    4.77   on --hover    4.60

       That last one is the tightest and it is the one the warm palette missed:
       #736a60 on #ede6da measured 4.28 and failed on a hovered table row. */
    --ink: #1c1c1c;
    --ink-2: #565656;
    --ink-3: #666666;

    /* ---- lines ------------------------------------------------------------
       Two weights on purpose. --line is the decorative hairline that draws
       structure (cards, dividers, table rules) and stays quiet. --line-2 is
       the border of an interactive control, where WCAG 1.4.11 asks for 3:1
       against the surface behind it: #868686 measures 3.64 on white, 3.31 on
       the canvas and 3.03 on the panel fill, so it holds on all three rather
       than only on white. #9e9081 held 3.11 on white but fell to 2.71 on the
       panel fill and 2.50 on a hovered row - it only ever passed against the
       one ground anybody measured it on. */
    --line: #e0e0e0;
    --line-2: #7e7e7e;

    /* ---- accent -----------------------------------------------------------
       Deep navy. One value serves both roles: 11.04:1 as text on white AND
       11.04:1 as the ground under white text, so it never needs a second
       weight the way a mid-tone brand colour would.

       It also has to stay TELLABLE APART from the eighteen tool accents, or
       the shell's own colour reads as just another tool's. Measured as OKLab
       dE against all eighteen darkened accents, the closest is crm at 20.3 and
       the furthest is 34.8. The bar is 10, and the reason the bar exists is
       the terracotta that came before: it sat 1.7 from darkened datetools -
       indistinguishable - which made that tool's primary buttons look like the
       brand mark. If you re-value this, re-run that measurement.

       --accent is always the contrast-safe value. --tool-accent is the raw hue
       from a tool's manifest and is for decoration only (the sliding rail bar,
       an icon tint, a stripe). view.js overwrites all of these on the content
       root when a tool mounts - and REMOVES them for a tool that declares no
       accent, which is how the two system tools inherit exactly what is
       written here. So these are not just the login page's defaults; they are
       what settings and backup actually render. */
    --accent: #1b3b6f;
    --accent-ink: #ffffff;
    --accent-soft: rgba(27, 59, 111, 0.10);
    --tool-accent: #1b3b6f;
    --tool-accent-ink: #1b3b6f;
    --tool-accent-soft: rgba(27, 59, 111, 0.10);
    /* The fourth of the --tool-accent* family. It was read at shell.css:475
       but never declared, which went unnoticed only because view.js wrote it
       at runtime for every tool. A tool that declares no accent now leaves it
       unset on purpose, so the default has to exist here. */
    --tool-ring: rgba(27, 59, 111, 0.30);
    --focus-ring: rgba(27, 59, 111, 0.30);

    /* ---- semantic ---------------------------------------------------------
       Never inherited from the accent: "this is overdue" must not change
       meaning because the operator opened a different tool.

       These VALUES are unchanged by the de-warming, and that is deliberate:
       they were never really warm - the old comment here claimed they were
       "nudged warm to sit in the same family as the canvas", but #2e9e5b,
       #c8402a and #c57f16 are an ordinary green, red and amber, and a red that
       means "danger" should not drift because the page behind it did.

       The plain token is the FILL (a stripe, a dot, a meter bar) and clears
       3:1. The -ink variant is the same colour weighted for TEXT and clears
       4.5:1. Six tools had hard-coded these exact roles before they existed. */
    --green: #2e9e5b;
    /* The one -ink that DID move, and not because the page got neutral: at
       #1b7a43 it measured 4.33 on the old warm hover and 4.68 on the old panel,
       so the "clears 4.5:1" contract above was already untrue for it wherever a
       green label sat on anything but a white card. #187038 holds 6.15 on
       white, 5.11 on the panel and 4.93 on a hovered row. */
    --green-ink: #187038;
    --green-soft: rgba(46, 158, 91, 0.13);
    --amber: #c57f16;
    --amber-ink: #8a5a0b;
    --amber-soft: rgba(197, 127, 22, 0.15);
    --red: #c8402a;
    --red-ink: #a8321c;
    --red-soft: rgba(200, 64, 42, 0.12);
    --violet: #7c5ce0;
    /* Decorative only: a yellow dark enough for 3:1 stops being yellow. Every
       place it appears (the due-card stripe) also states the same thing in
       words, so the colour is never the only channel. */
    --yellow: #ce9a24;
    --neutral-soft: rgba(0, 0, 0, 0.06);

    /* ---- geometry ---------------------------------------------------------
       4px spacing scale, used everywhere instead of ad-hoc numbers. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --radius-sm: 6px;   /* controls */
    --radius-md: 9px;   /* cards, panels */
    --radius-lg: 12px;  /* overlays */
    --radius-xl: 16px;  /* the largest surfaces */
    --radius-pill: 999px;

    /* ---- elevation --------------------------------------------------------
       Two levels, neutral black at low alpha, and for OVERLAYS ONLY - a
       dropdown, a popover, a drawer, a toast. A card gets a hairline and no
       shadow: structure comes from borders and whitespace, not from stacked
       blur. Untinted on purpose: a tinted shadow over a neutral canvas is a
       colour cast nobody asked for, and these sit over white as often as not. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.07);
    --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.20);

    /* ---- motion -----------------------------------------------------------
       Names kept: four tool stylesheets reference --ease-mac by name. */
    --ease-mac: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-mid: 180ms;
    --dur-slow: 260ms;

    color-scheme: light;
}