html, body, #app { height: 100%; }

:root {
    /* Primary (Orange) */
    --color-primary-900: #7a3e00;
    --color-primary-700: #b6570f;
    --color-primary-500: #F68A1F; /* base */
    --color-primary-300: #f9ab62;
    --color-primary-100: #fde0c6;

    /* Secondary (Dark Gray) */
    --color-secondary-900: #0d0d0d;
    --color-secondary-700: #1a1a1a;
    --color-secondary-500: #262626; /* base */
    --color-secondary-300: #4d4d4d;
    --color-secondary-100: #b3b3b3;

    /* Tertiary (Yellow) */
    --color-tertiary-900: #857c00;
    --color-tertiary-700: #c2b600;
    --color-tertiary-500: #F5DF4D; /* base */
    --color-tertiary-300: #f8e97e;
    --color-tertiary-100: #fcf7d3;
}


/* site.css — loaded AFTER ant-design-blazor.variable.css */
html {
    /* === Primary (your orange) === */
    --ant-primary-color: #F68A1F;          /* base */
    --ant-primary-color-hover: #f9ab62;    /* lighter on hover */
    --ant-primary-color-active: #b6570f;   /* darker on active */
    --ant-primary-color-outline: rgba(246, 138, 31, 0.20);

    /* Optional: fill the Ant palette steps (Ant uses -6 as the base) */
    --ant-primary-1:  #fff3e4;  /* very light */
    --ant-primary-2:  #ffe6c7;
    --ant-primary-3:  #ffd7ae;
    --ant-primary-4:  #ffc78d;
    --ant-primary-5:  #f9ab62;  /* light (hover) */
    --ant-primary-6:  #F68A1F;  /* base */
    --ant-primary-7:  #b6570f;  /* dark (active) */

    /* === Warning -> use your Tertiary (brand accent) === */
    --ant-warning-color: #F5DF4D;
    --ant-warning-color-hover: #f8e97e;
    --ant-warning-color-active: #c2b600;
    --ant-warning-color-outline: rgba(245, 223, 77, 0.20);

    /* === Info (optional): point “info” to your primary instead of blue === */
    --ant-info-color: #F68A1F;
    --ant-info-color-deprecated-bg: #fff3e4;
    --ant-info-color-deprecated-border: #ffd7ae;

    /* === Success / Error (leave defaults or customize as you like) === */
    /* --ant-success-color: #52c41a; ... */
    /* --ant-error-color:   #ff4d4f; ... */
}

/* If you want your Secondary applied to typography & subtle UI: */
:root {
    --ant-text-color: black;           /* body text */
    --ant-text-color-secondary: #4d4d4d; /* secondary text */
    /* Optional surface tweaks */
    /* --ant-border-color-base: #eaeaea; */
}