/*
 * Design tokens of G-WISS: the CreativeERP shell (Paces look) in the G-WISS colours of the logo (docs/adr/U-03) as CSS variables for light and dark mode.
 * --app-* are our own tokens; --bs-* re-tune Bootstrap 5.3 so its components follow them.
 * Font: Hanken Grotesk (SIL Open Font License 1.1, see lib/fonts/hanken-grotesk/OFL.txt), self-hosted.
 */

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/fonts/hanken-grotesk/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/fonts/hanken-grotesk/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/fonts/hanken-grotesk/hanken-grotesk-latin-ext-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/fonts/hanken-grotesk/hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
:root[data-bs-theme="light"] {
    /* Brand and state colours (the same in both modes) */
    --app-primary: #32475a;
    --app-primary-rgb: 50, 71, 90;
    --app-primary-hover: #263747;
    --app-secondary: #5f9796;
    --app-secondary-hover: #4d8180;
    --app-success: #02bc9c;
    --app-info: #5bc3e1;
    --app-warning: #f9bf59;
    --app-danger: #f7577e;
    --app-danger-hover: #d24a6b;

    /* Soft (subtle) variants for badges, alerts and soft buttons */
    --app-primary-subtle: #e2e8ee;
    --app-success-subtle: #d9f5f0;
    --app-info-subtle: #e6f6fb;
    --app-warning-subtle: #fef5e6;
    --app-danger-subtle: #fee6ec;
    --app-success-text: #01715e;
    --app-info-text: #377587;
    --app-warning-text: #957335;
    --app-danger-text: #94344c;
    --app-primary-text: #263747;

    /* Surfaces and text */
    --app-body-bg: #f6f7fb;
    --app-body-color: #4c4c5c;
    --app-heading-color: #313a46;
    --app-muted: #9ba6b7;
    --app-card-bg: #ffffff;
    /* Paper of printed documents, white in both themes (logo preview) */
    --app-paper: #fff;
    --app-hover-bg: #f6f7fb;
    --app-light: #eef2f7;
    --app-border: #e7e9eb;
    --app-border-strong: #a1a9b1;
    --app-shadow: 0 1px 4px 0 rgba(130, 143, 163, 0.15);
    --app-shadow-lg: 0 4px 16px rgba(76, 76, 92, 0.2);

    /* Sidebar: deep navy of the G-WISS logo */
    --app-sidenav-bg: #1f2c38;
    --app-sidenav-color: #93a8bb;
    --app-sidenav-hover: #dfe8ef;
    --app-sidenav-active: #ffffff;
    --app-sidenav-active-bg: #2b3c4b;
    --app-sidenav-border: #1f2c38;

    /* Top bar */
    --app-topbar-bg: #ffffff;
    --app-topbar-item: #6c757d;
    --app-topbar-item-hover: #32475a;
    --app-topbar-search-bg: transparent;
    --app-topbar-search-border: #e7e9eb;

    /* Type and shape */
    --app-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --app-font-size: 0.875rem;
    --app-radius: 0.3rem;
    --app-radius-sm: 0.25rem;
    --app-radius-lg: 0.4rem;
    --app-transition: 0.25s ease-in-out;

    /* Layout */
    --app-sidenav-width: 245px;
    --app-sidenav-width-condensed: 75px;
    --app-topbar-height: 65px;
    --app-gutter: 1.25rem;

    /* Bootstrap follows the tokens */
    --bs-body-font-family: var(--app-font);
    --bs-body-font-size: var(--app-font-size);
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--app-body-bg);
    --bs-body-color: var(--app-body-color);
    --bs-body-color-rgb: 76, 76, 92;
    --bs-heading-color: var(--app-heading-color);
    --bs-emphasis-color: #313a46;
    --bs-secondary-color: var(--app-muted);
    --bs-secondary-bg: var(--app-card-bg);
    --bs-tertiary-bg: var(--app-hover-bg);
    --bs-border-color: var(--app-border);
    --bs-border-color-translucent: var(--app-light);
    --bs-border-radius: var(--app-radius);
    --bs-border-radius-sm: var(--app-radius-sm);
    --bs-border-radius-lg: var(--app-radius-lg);
    --bs-box-shadow: var(--app-shadow);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: 50, 71, 90;
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-link-hover-color-rgb: 38, 55, 71;
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 50, 71, 90;
    --bs-secondary: var(--app-secondary);
    --bs-secondary-rgb: 95, 151, 150;
    --bs-success: var(--app-success);
    --bs-success-rgb: 2, 188, 156;
    --bs-info: var(--app-info);
    --bs-info-rgb: 91, 195, 225;
    --bs-warning: var(--app-warning);
    --bs-warning-rgb: 249, 191, 89;
    --bs-danger: var(--app-danger);
    --bs-danger-rgb: 247, 87, 126;
    --bs-light-rgb: 238, 242, 247;
    --bs-dark-rgb: 49, 58, 70;
    --bs-primary-bg-subtle: var(--app-primary-subtle);
    --bs-success-bg-subtle: var(--app-success-subtle);
    --bs-info-bg-subtle: var(--app-info-subtle);
    --bs-warning-bg-subtle: var(--app-warning-subtle);
    --bs-danger-bg-subtle: var(--app-danger-subtle);
    --bs-primary-text-emphasis: var(--app-primary-text);
    --bs-success-text-emphasis: var(--app-success-text);
    --bs-info-text-emphasis: var(--app-info-text);
    --bs-warning-text-emphasis: var(--app-warning-text);
    --bs-danger-text-emphasis: var(--app-danger-text);
    --bs-form-valid-color: var(--app-success);
    --bs-form-invalid-color: var(--app-danger);
    --bs-form-invalid-border-color: var(--app-danger);
}

:root[data-bs-theme="dark"] {
    /* Navy buttons vanish on dark surfaces: teal of the logo is the primary colour in dark mode */
    --app-primary: #5f9796;
    --app-primary-rgb: 95, 151, 150;
    --app-primary-hover: #74abaa;
    --bs-primary-rgb: 95, 151, 150;
    --app-primary-subtle: rgba(95, 151, 150, 0.2);
    --app-success-subtle: rgba(2, 188, 156, 0.2);
    --app-info-subtle: rgba(91, 195, 225, 0.2);
    --app-warning-subtle: rgba(249, 191, 89, 0.2);
    --app-danger-subtle: rgba(247, 87, 126, 0.2);
    --app-primary-text: #8cc1bf;
    --app-success-text: #67d7c4;
    --app-info-text: #9ddbed;
    --app-warning-text: #fbd99b;
    --app-danger-text: #fa9ab2;

    --app-body-bg: #141c24;
    --app-body-color: #aab8c5;
    --app-heading-color: #ced6df;
    --app-muted: #8391a2;
    --app-card-bg: #1b2530;
    --app-hover-bg: #233140;
    --app-light: #212d39;
    --app-border: #2a3744;
    --app-border-strong: #4b4d5c;
    --app-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    --app-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.45);

    --app-sidenav-bg: #111921;
    --app-sidenav-active-bg: #1f2c38;
    --app-sidenav-color: #8a9fb2;
    --app-sidenav-border: #1f2c38;

    --app-topbar-bg: #1b2530;
    --app-topbar-item: #adb5bf;
    --app-topbar-item-hover: #e3f1f0;
    --app-topbar-search-bg: #233140;
    --app-topbar-search-border: #233140;

    --bs-body-color-rgb: 170, 184, 197;
    --bs-emphasis-color: #dce0fb;
    --bs-link-color: #8cc1bf;
    --bs-link-color-rgb: 140, 193, 191;
    --bs-link-hover-color: #a6d0ce;
    --bs-link-hover-color-rgb: 166, 208, 206;
    --bs-light-rgb: 37, 38, 48;
    --bs-dark-rgb: 75, 77, 92;
    --bs-form-valid-color: #67d7c4;
    --bs-form-invalid-color: #fa9ab2;
}