/* =========================================================
   RAIZE DESIGN SYSTEM — FRONTOFFICE TOKENS
   Source of truth: Claude Design project "Raize Design System"
   (tokens/colors.css, typography.css, spacing.css, effects.css).
   Frontoffice only — loaded right after the shared
   raize-tokens.css so the legacy variable names consumed by
   raize-components.css / raize-mudblazor.css / raize-client.css
   resolve to the new system. The Backoffice never loads this.
   ========================================================= */

/* Self-hosted fonts (SIL OFL 1.1 — licences in ../fonts/OFL-*.txt), variable weight,
   latin + latin-ext subsets from Fontsource 5.3.0. Served from 'self' so the CSP
   (font-src 'self') needs no third-party origins. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
    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: 'Montserrat';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');
    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: 'Montserrat';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/montserrat-latin-ext-wght-italic.woff2') format('woff2');
    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: 'Montserrat';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/montserrat-latin-wght-italic.woff2') format('woff2');
    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: 'Public Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/public-sans-latin-ext-wght-normal.woff2') format('woff2');
    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: 'Public Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/public-sans-latin-wght-normal.woff2') format('woff2');
    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: 'Public Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/public-sans-latin-ext-wght-italic.woff2') format('woff2');
    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: 'Public Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/public-sans-latin-wght-italic.woff2') format('woff2');
    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 {
    /* ---------- DS: BRAND YELLOW ---------- */
    --raize-yellow:      #FBCA13;
    --raize-yellow-deep: #E3B400;
    --raize-yellow-50:   #FFFCF0;
    --raize-yellow-100:  #FBF1CE;
    --raize-yellow-150:  #FFF3C4;
    --raize-yellow-200:  #F5E7B8;
    --raize-yellow-300:  #F0DC9A;
    --raize-yellow-400:  #E5C765;
    --raize-yellow-700:  #8A6D00;
    --raize-yellow-800:  #7A5F00;
    --raize-yellow-ink:  #8A5A00;

    /* ---------- DS: INK / NEUTRALS (cool) ---------- */
    --raize-ink:   #22221F;
    --raize-ink-2: #2D2E33;
    --grey-950: #181A1F;
    --grey-800: #3B4252;
    --grey-700: #4B515C;
    --grey-600: #5B616B;
    --grey-550: #6B7280;
    --grey-500: #8A9099;
    --grey-400: #A8AEB6;
    --grey-300: #C3C7CE;
    --grey-200: #D3D7DD;
    --grey-150: #E4E7EC;
    --grey-125: #E7E9ED;
    --grey-100: #EDEFF2;
    --grey-90:  #EEF0F3;
    --grey-80:  #F0F1F3;
    --grey-60:  #F1F2F5;
    --grey-50:  #F4F5F7;
    --grey-40:  #F7F8FA;
    --grey-20:  #FBFBFA;

    /* ---------- DS: BLUE / GREEN / AMBER / RED ---------- */
    --blue-600: #294D97;
    --blue-700: #1E3B76;
    --blue-300: #A9C0E8;
    --blue-150: #DCE7F9;
    --blue-100: #E7EEFB;
    --blue-50:  #F1F5FC;
    --green-500: #1EA672;
    --green-700: #126B47;
    --green-250: #BFE7D5;
    --green-150: #CFEDDF;
    --green-100: #E7F6EF;
    --green-50:  #EDF9F3;
    --amber-500: #E4A11B;
    --red-500: #E4572E;
    --red-150: #F6D2CB;
    --red-800: #8A2B18;

    /* ---------- DS: SEMANTIC ---------- */
    --text-heading: var(--grey-950);
    --text-strong:  var(--grey-800);
    --text-body:    var(--grey-700);
    --text-muted:   var(--grey-600);
    --text-subtle:  var(--grey-500);
    --text-link:    var(--blue-600);
    --text-link-hover: var(--blue-700);
    --border-card:    var(--grey-125);
    --border-input:   var(--grey-150);
    --border-strong:  var(--grey-200);
    --border-divider: var(--grey-80);
    --surface-soft:   var(--grey-20);
    --surface-track:  var(--grey-60);
    --success-dot: var(--green-500);
    --warning-dot: var(--amber-500);
    --danger-dot:  var(--red-500);

    /* ---------- DS: TYPE ---------- */
    --fs-h1-app: clamp(26px, 3vw, 34px);
    --ls-h1-app: -.8px;

    /* ---------- DS: LAYOUT / RADII ---------- */
    --container-app: 1180px;
    --gutter-app:    28px;
    --radius-input:  11px;
    --radius-btn:    12px;
    --radius-tile:   14px;
    --radius-16:     16px;
    --radius-card:   18px;
    --radius-pill:   100px;

    /* ---------- DS: EFFECTS ---------- */
    --shadow-hairline:   0 2px 4px rgba(24, 26, 31, .04);
    --shadow-card:       0 12px 34px -22px rgba(24, 26, 31, .28);
    --shadow-card-hover: 0 18px 40px -24px rgba(24, 26, 31, .3);
    --shadow-menu:       0 18px 40px -14px rgba(24, 26, 31, .35);
    --shadow-cta:        0 10px 24px -8px rgba(251, 202, 19, .55);
    --shadow-cta-nav:    0 6px 18px rgba(251, 202, 19, .35);
    --ring-live:         0 0 0 4px rgba(30, 166, 114, .16);
    --ease-out:  cubic-bezier(.16, .84, .44, 1);
    --dur-enter: .45s;
    --gradient-dark:   linear-gradient(135deg, #22221F, #2D2E33);
    --gradient-yellow: linear-gradient(90deg, #FBCA13, #E3B400);

    /* =====================================================
       LEGACY VARIABLE REMAP (raize-tokens.css names)
       ===================================================== */
    --brand:           var(--raize-yellow);
    --brand-hover:     var(--raize-yellow-deep);
    --brand-press:     var(--raize-yellow-deep);
    --brand-soft:      var(--raize-yellow-100);
    --brand-ink:       var(--raize-ink);

    --ink:             var(--grey-950);
    --ink-2:           var(--grey-800);
    --muted:           var(--grey-600);
    --muted-2:         var(--grey-500);
    --hairline:        var(--grey-125);
    --hairline-strong: var(--grey-200);
    --paper:           var(--grey-40);
    --paper-2:         var(--grey-60);

    --success:      var(--green-700);
    --success-soft: var(--green-50);
    --warning:      var(--raize-yellow-800);
    --warning-soft: var(--raize-yellow-50);
    --danger:       var(--red-800);
    --danger-soft:  var(--red-150);
    --info:         var(--blue-600);
    --info-soft:    var(--blue-100);
    --neutral-soft: var(--grey-60);

    --font-display: 'Montserrat', system-ui, sans-serif;
    --font-ui:      'Public Sans', system-ui, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-h1-size: 34px; --t-h1-lh: 38px; --t-h1-tr: -.8px;
    --t-h2-size: 24px; --t-h2-lh: 30px; --t-h2-tr: -.4px;
    --t-h3-size: 19px; --t-h3-lh: 26px;
    --t-body-size:  15px; --t-body-lh:  24px;
    --t-small-size: 14px; --t-small-lh: 21px;
    --t-micro-size: 12.5px; --t-micro-lh: 16px; --t-micro-tr: .6px;

    --r-sm:   8px;
    --r-md:   var(--radius-input);
    --r-lg:   var(--radius-card);
    --r-pill: var(--radius-pill);

    --shadow-1: var(--shadow-hairline);
    --shadow-2: var(--shadow-menu);

    --ease:   var(--ease-out);
    --d-fast: .2s;
    --d-base: .25s;
    --d-slow: .3s;

    --topbar-h: 72px;
}

/* ---------- TYPE CLASSES (DS: Montserrat 900/800 headings) ---------- */
.t-h1 { font-family: var(--font-display); font-weight: 900; color: var(--text-heading); }
.t-h2 { font-family: var(--font-display); font-weight: 800; color: var(--text-heading); }
.t-h3 { font-family: var(--font-display); font-weight: 800; color: var(--text-heading); }
.t-body { color: var(--text-body); }
.t-micro { font-weight: 700; }

/* Zero-specificity so .btn / .cnav-link etc. keep their own colours. */
:where(a) { color: var(--text-link); }
:where(a:hover) { color: var(--text-link-hover); }