/* ============================================================================
   Umbiko Design System — Tokens
   Source of truth: soratus/umbiko @ main, Umbiko.AI.Proc/wwwroot/app.css
   ========================================================================= */

/* ---------- Fonts ---------- */

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Quicksand-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Quicksand-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
}

/* Legacy family names the product's CSS still references. */
@font-face {
    font-family: 'quicksand-regular';
    src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'quicksand-bold';
    src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
    font-weight: 700;
}

:root {
    /* ---------- Brand palette ---------- */
    --umbiko-darkblue:  #28309d; /* primary */
    --umbiko-lightblue: #5fa6f0; /* secondary / info */
    --umbiko-green:     #0dc19d;
    --umbiko-red:       #ff3d3b;
    --umbiko-orange:    #f7931a;
    --umbiko-yellow:    #ffdb04;

    /* Dark-mode accent (tinted blue, reads on panels) */
    --umbiko-accent:    #8fa8ff;

    /* Neutrals */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Panel / background scale (dark theme) */
    --umbiko-dark-bg:      #1a1a2e;
    --umbiko-panel-dark:   #16162b;
    --umbiko-panel-bg-2:   #1e1e36;
    --umbiko-panel-bg:     #252540;
    --umbiko-panel-bg-4:   #2a2a48;
    --umbiko-panel-bg-5:   #2a2a58;
    --umbiko-panel-bg-3:   #32325a;

    /* Borders */
    --umbiko-border-dark:   #3a3a5c;
    --umbiko-border-strong: #4a4a7c;

    /* Light-theme surfaces (Teams-inspired neutrals still in product) */
    --teams-lightgray:   #f9f8f7;
    --teams-mediumgray:  #e9e9e9;
    --teams-darkergray:  #c1c1c1;
    --umbiko-backcolor:  rgb(249 250 251);

    /* Text (light theme) */
    --umbiko-textcolor:   #808080;

    /* Text (dark theme) */
    --umbiko-text-muted:  #6a6a8a;
    --umbiko-text-light:  #d0d0d0;
    --umbiko-text-strong: #e0e0e0;

    /* Opacity ramps for each accent colour (10 / 20 / 50). Used
       everywhere for soft backgrounds, borders, hover fills, etc. */
    --umbiko-darkblue-opacity10:  rgba(40, 48, 157, .1);
    --umbiko-darkblue-opacity20:  rgba(40, 48, 157, .2);
    --umbiko-darkblue-opacity50:  rgba(40, 48, 157, .5);
    --umbiko-lightblue-opacity10: rgba(13, 110, 253, .1);
    --umbiko-lightblue-opacity20: rgba(13, 110, 253, .2);
    --umbiko-lightblue-opacity50: rgba(13, 110, 253, .5);
    --umbiko-green-opacity10:     rgba(25, 135, 84, .1);
    --umbiko-green-opacity20:     rgba(25, 135, 84, .2);
    --umbiko-green-opacity50:     rgba(25, 135, 84, .5);
    --umbiko-red-opacity10:       rgba(255, 61, 59, .1);
    --umbiko-red-opacity20:       rgba(255, 61, 59, .2);
    --umbiko-red-opacity50:       rgba(255, 61, 59, .5);
    --umbiko-orange-opacity10:    rgba(254, 196, 23, .1);
    --umbiko-orange-opacity20:    rgba(254, 196, 23, .2);
    --umbiko-orange-opacity50:    rgba(254, 196, 23, .5);
    --umbiko-yellow-opacity10:    rgba(255, 219, 4, .1);
    --umbiko-yellow-opacity20:    rgba(255, 219, 4, .2);
    --umbiko-yellow-opacity50:    rgba(255, 219, 4, .5);

    /* ---------- Semantic tokens ---------- */
    --bg-page:        var(--umbiko-backcolor);
    --bg-surface:     var(--color-white);
    --bg-muted:       var(--teams-lightgray);

    --fg-default:     #212529;           /* Bootstrap body color */
    --fg-muted:       var(--umbiko-textcolor);
    --fg-brand:       var(--umbiko-darkblue);
    --fg-on-brand:    var(--color-white);

    --border-default: var(--teams-mediumgray);
    --border-strong:  var(--teams-darkergray);
    --border-brand:   var(--umbiko-darkblue);

    --accent-success: var(--umbiko-green);
    --accent-warning: var(--umbiko-yellow);
    --accent-danger:  var(--umbiko-red);
    --accent-info:    var(--umbiko-lightblue);

    /* ---------- Type ---------- */
    --font-sans:    'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-bold:    700;

    /* Type scale — aligned with product (UProjectCard, umbiko-header,
       ai-markdown) which run pretty small and rely on Bootstrap defaults. */
    --fs-xs:   0.72rem;  /* tiny captions (summary-sub) */
    --fs-sm:   0.82rem;  /* labels, filter chips */
    --fs-base: 1rem;     /* body */
    --fs-md:   1.1rem;   /* h3 in chat */
    --fs-lg:   1.2rem;   /* h2 / umbiko-header in chat */
    --fs-xl:   1.5rem;   /* h1 in chat / card numbers */
    --fs-2xl:  2rem;     /* summary-value */
    --fs-display: 2.5rem;

    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-body:  1.55;

    /* ---------- Radii ---------- */
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;   /* cards, summary blocks */
    --radius-lg: 1rem;
    --radius-pill: 2rem;    /* filter chips, status badges */
    --radius-full: 9999px;

    /* ---------- Spacing (4-px baseline) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* ---------- Elevation ---------- */
    --shadow-none:  none;
    --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06);             /* summary-block hover */
    --shadow-brand: 0 2px 8px var(--umbiko-darkblue-opacity10);/* summary-block active */
    --shadow-card:  0 6px 20px rgba(0, 0, 0, 0.3);             /* dark-mode card hover */
    --shadow-flyout: -4px 0 16px rgba(0, 0, 0, 0.06);          /* document flyout */

    /* ---------- Motion ---------- */
    --ease-standard: ease;
    --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:      0.12s;
    --dur-base:      0.15s;
    --dur-slow:      0.8s;

    /* ---------- Misc ---------- */
    --overlay-light: rgba(255,255,255,0.85);

    /* Bootstrap overrides — keep bg-info / text-info aligned with palette */
    --bs-info: #5fa6f0;
    --bs-info-rgb: 95, 166, 240;

    /* ---------- Short aliases ---------- */
    --darkblue:   var(--umbiko-darkblue);
    --lightblue:  var(--umbiko-lightblue);
    --success:    var(--umbiko-green);
    --danger:     var(--umbiko-red);
    --warning:    var(--umbiko-orange);
    --info:       var(--umbiko-lightblue);
    --border:     var(--border-default);
}

/* ---------- Base ---------- */

html, body {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    color: var(--fg-default);
    background: var(--bg-page);
}

/* ---------- Semantic element styles ---------- */

h1, .u-h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
    color: var(--fg-brand);
}
h2, .u-h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    color: var(--fg-brand);
}
h3, .u-h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--fg-brand);
}

.u-display {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    color: var(--fg-brand);
}

.u-header {                /* matches .umbiko-header */
    font-size: 20px;
    color: var(--umbiko-darkblue);
}

p, .u-body {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--fg-default);
}

small, .u-caption {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

.u-eyebrow {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-brand);
}

code, .u-code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.12rem 0.35rem;
    border-radius: var(--radius-xs);
    background: #eef1ff;
    color: #3f2ca3;
}