/* RAS design tokens.
 *
 * These are not new colours: they are the palette the app already uses,
 * counted out of index.html and public/js/. The top of that count was
 * #005B3A (475 literals), #6E6E68 (367), #E2E2DC (165), #A32D2D (164),
 * #37352F (96) — the same eight or nine values re-typed everywhere.
 * Naming them once is what lets components exist at all.
 *
 * Load order: tokens.css, then components.css, then everything else.
 * See Specs/45_design-system.md.
 */

:root {
    /* ---- Brand ------------------------------------------------------ */
    --ras-green: #005B3A;          /* primary actions, active state, headers */
    --ras-green-hover: #0A7350;
    --ras-green-deep: #0F6E56;     /* text on soft green fills */
    --ras-green-soft: #E6F1ED;     /* soft fill: banners, active chips */
    --ras-green-softer: #F4FAF7;   /* hover fill on white */
    --ras-green-line: #BFDCCF;     /* border that pairs with the soft fill */

    /* ---- Text ------------------------------------------------------- */
    --ras-ink: #1F1F1C;            /* strongest text: titles, values */
    --ras-text: #37352F;           /* body copy */
    --ras-muted: #6E6E68;          /* secondary text, labels, meta */
    --ras-muted-soft: #9A9A92;     /* placeholders, disabled */
    --ras-on-dark: #FFFFFF;
    --ras-on-dark-muted: #CFEEDE;  /* subtitles on the green header */

    /* ---- Surfaces --------------------------------------------------- */
    --ras-surface: #FFFFFF;
    --ras-paper: #FAFAF7;          /* app background */
    --ras-paper-2: #F5F5F2;        /* modal body, inset panels */
    --ras-paper-3: #F1EFE8;        /* table header, striped rows */

    /* ---- Lines ------------------------------------------------------ */
    --ras-line: #E2E2DC;           /* default border */
    --ras-line-strong: #D5D5CE;    /* input border, button outline */
    --ras-line-soft: #E2E2E0;      /* hairline between rows */

    /* ---- Status ----------------------------------------------------- */
    --ras-danger: #A32D2D;
    --ras-danger-soft: #FBEDED;
    --ras-warn: #854F0B;
    --ras-warn-strong: #9A6700;
    --ras-warn-soft: #FDF6E7;
    --ras-ok: var(--ras-green);
    --ras-ok-soft: var(--ras-green-soft);
    --ras-info: #185FA5;
    --ras-info-soft: #EAF2FB;

    /* ---- Shape ------------------------------------------------------ */
    /* The app is square on purpose — 2px everywhere, never a pill except
       for status badges. Do not introduce a third radius. */
    --ras-radius: 2px;
    --ras-radius-pill: 999px;
    --ras-shadow-card: 0 1px 2px rgba(0,0,0,0.04);
    --ras-shadow-modal: 0 20px 60px rgba(0,0,0,0.4);
    --ras-shadow-drawer: -8px 0 30px rgba(0,0,0,0.18);

    /* ---- Type ------------------------------------------------------- */
    --ras-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ras-fs-micro: 9.5px;         /* uppercase section labels */
    --ras-fs-xs: 11px;             /* meta, counts, timestamps */
    --ras-fs-sm: 12px;             /* dense table cells, hints */
    --ras-fs-base: 13px;           /* default UI text */
    --ras-fs-md: 14px;             /* inputs, buttons */
    --ras-fs-lg: 16px;             /* modal titles */
    --ras-fs-xl: 17px;             /* panel headings */

    /* ---- Space ------------------------------------------------------ */
    --ras-space-1: 4px;
    --ras-space-2: 8px;
    --ras-space-3: 12px;
    --ras-space-4: 16px;
    --ras-space-5: 22px;
    --ras-space-6: 32px;

    /* ---- Controls --------------------------------------------------- */
    --ras-control-h: 38px;         /* desktop input/button height */
    --ras-control-h-touch: 44px;   /* shop-floor tablets: iOS tap target */
}