/* Opti-Q design tokens, vendored.
   ==========================================================================================

   Copied from the Opti-Q design system (installed as the `optiq-design` skill; source
   `tokens/colors.css` and `tokens/typography.css`). Vendored rather than referenced so a build has no
   dependency on a file outside this repository.

   Brand hex values are copied VERBATIM. Do not round them, and do not "tidy" a scale step to a nicer
   number -- these come from the marketing colour spec.

   Only what this app uses is here. The design system also ships a React component kit, a spacing and
   effects scale, Fachbereich (domain) accents for the inspection products, and marketing imagery, none
   of which a licensing admin has any use for. Refresh this file from the skill rather than editing it;
   the app's own semantic layer is the nine variables in app.css, which is where a re-skin is absorbed.

   Deliberately NOT copied: `tokens/fonts.css`, a single @import from fonts.googleapis.com. The two
   families are self-hosted instead -- see fonts.css. */

:root {
    /* --- Brand primaries ------------------------------------------------------------------- */
    --oq-purple: #662483;        /* Lila -- primary brand */
    --oq-green:  #72c02c;        /* Grün -- accent / the checkmark */

    /* Purple scale (tints & shades around #662483) */
    --oq-purple-50:  #f4eef7;
    --oq-purple-100: #e7d9ef;
    --oq-purple-200: #c9a6db;
    --oq-purple-300: #a870c4;
    --oq-purple-400: #854aa4;
    --oq-purple-500: #662483;    /* base */
    --oq-purple-600: #571e70;
    --oq-purple-700: #45185a;
    --oq-purple-800: #331142;
    --oq-purple-900: #220b2c;

    /* Green scale (tints & shades around #72c02c) */
    --oq-green-50:  #eff8e6;
    --oq-green-100: #dcefc7;
    --oq-green-200: #bce295;
    --oq-green-300: #9bd463;
    --oq-green-400: #83c942;
    --oq-green-500: #72c02c;     /* base */
    --oq-green-600: #5da023;
    --oq-green-700: #497d1c;
    --oq-green-800: #365d15;
    --oq-green-900: #23400e;

    /* --- Neutrals (cool grey) -------------------------------------------------------------- */
    --oq-white:    #ffffff;
    --oq-grey-25:  #fbfbfc;
    --oq-grey-50:  #f5f6f8;
    --oq-grey-100: #eceef1;
    --oq-grey-200: #dfe2e7;
    --oq-grey-300: #c6cbd3;
    --oq-grey-400: #9aa1ad;
    --oq-grey-500: #6f7783;
    --oq-grey-600: #545b66;
    --oq-grey-700: #3c414b;
    --oq-grey-800: #262a31;
    --oq-grey-900: #16181d;
    --oq-black:    #0e0f12;

    /* --- Semantic status ------------------------------------------------------------------- */
    --oq-success: #5da023;   /* ok / passed */
    --oq-warning: #f28e31;   /* hinweis / note */
    --oq-danger:  #cc326e;   /* mangel / defect */
    --oq-info:    #5584ff;   /* informational */

    /* One Fachbereich accent, used for nothing but its hue: --oq-danger is too dark to read on the
       dark surface, and this is the brand's own lighter value in the same family. See app.css. */
    --oq-fire: #d35083;

    /* --- Type ------------------------------------------------------------------------------- */
    /* Nunito for display, Open Sans for UI and body. Self-hosted; see fonts.css. */
    --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-extra:    800;
}