/* =========================================================
   RAIZE BACKOFFICE — DESIGN TOKENS
   Source of truth. Mirrors raize/project/colors_and_type.css.
   Load order: tokens → components → mudblazor → app.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* ---------- BRAND ---------- */
    --brand:            #FCC808;
    --brand-hover:      #E8B600;
    --brand-press:      #D6A600;
    --brand-soft:       #FFF3BC;
    --brand-ink:        #5C4500;

    /* ---------- NEUTRALS (warm) ---------- */
    --ink:              #1A1A17;
    --ink-2:            #3A3A33;
    --muted:            #76746B;
    --muted-2:          #A3A096;
    --hairline:         #E8E6DF;
    --hairline-strong:  #D2CFC4;
    --paper:            #FAFAF6;
    --paper-2:          #F3F1EA;
    --surface:          #FFFFFF;

    /* ---------- STATUS ---------- */
    --success:          #1F8A4C;
    --success-soft:     #E3F3E9;
    --warning:          #C67A05;
    --warning-soft:     #FBEFD9;
    --danger:           #C8392B;
    --danger-soft:      #FBE4E1;
    --info:             #2B6CB0;
    --info-soft:        #E1ECF8;
    --neutral-soft:     #EFEDE5;

    /* ---------- ENTITY MONOGRAMS ---------- */
    --mono-1: #DDD4BB;
    --mono-2: #C9D7C1;
    --mono-3: #C5D2DE;
    --mono-4: #E3CFC9;
    --mono-5: #D7CBDA;
    --mono-6: #DDD0B5;

    /* ---------- TYPE ---------- */
    --font-display:  'Outfit', system-ui, sans-serif;
    --font-ui:       'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

    --fnum: "tnum" 1, "lnum" 1;

    /* ---------- TYPE SCALE ---------- */
    --t-display-lg-size: 56px;  --t-display-lg-lh: 60px;  --t-display-lg-tr: -0.02em;
    --t-display-md-size: 40px;  --t-display-md-lh: 44px;  --t-display-md-tr: -0.015em;
    --t-h1-size:         28px;  --t-h1-lh:         32px;  --t-h1-tr:        -0.01em;
    --t-h2-size:         22px;  --t-h2-lh:         28px;  --t-h2-tr:        -0.005em;
    --t-h3-size:         17px;  --t-h3-lh:         24px;  --t-h3-tr:         0;
    --t-body-size:       14px;  --t-body-lh:       20px;
    --t-small-size:      13px;  --t-small-lh:      18px;
    --t-micro-size:      11px;  --t-micro-lh:      14px;  --t-micro-tr:      0.06em;

    /* ---------- SPACING (4-px base) ---------- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-7:  32px;
    --s-8:  40px;
    --s-9:  56px;
    --s-10: 72px;

    /* ---------- RADII ---------- */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* ---------- SHADOWS ---------- */
    --shadow-1: 0 1px 2px rgba(20, 18, 10, 0.06);
    --shadow-2: 0 12px 32px rgba(20, 18, 10, 0.10);

    /* ---------- MOTION ---------- */
    --ease:    cubic-bezier(0.2, 0, 0, 1);
    --d-fast:  120ms;
    --d-base:  180ms;
    --d-slow:  240ms;

    /* ---------- LAYOUT ---------- */
    --topbar-h: 56px;
    --sidenav-w: 240px;
    --container-pad: 32px;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   ========================================================= */

.t-display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-lg-size); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-tr); color: var(--ink); }
.t-display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display-md-size); line-height: var(--t-display-md-lh); letter-spacing: var(--t-display-md-tr); color: var(--ink); }
.t-h1         { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tr); color: var(--ink); }
.t-h2         { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tr); color: var(--ink); }
.t-h3         { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-h3-size); line-height: var(--t-h3-lh); color: var(--ink); }
.t-body       { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--ink); font-feature-settings: var(--fnum); }
.t-small      { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--muted); font-feature-settings: var(--fnum); }
.t-micro      { font-family: var(--font-ui); font-weight: 600; font-size: var(--t-micro-size); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-tr); text-transform: uppercase; color: var(--muted); }
.t-mono       { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink); font-feature-settings: var(--fnum); }
.t-num        { font-family: var(--font-ui); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--fnum); }

/* =========================================================
   APP BASE
   ========================================================= */

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: var(--fnum);
}

* { box-sizing: border-box; }