/*
   Autonomycs design tokens - the single place the brand exists as CSS.

   The palette values are duplicated from Autonomycs.Shared/BrandColors.cs, which is also what
   Autonomycs.Api/Documents/ReportColors.cs builds its chart colours from. CSS cannot read a C#
   constant, so this is the one place the strings appear twice - and unlike before, the duplication
   is machine-checked: Autonomycs.Ui.Web.Tests/BrandTokensTests fails the build when the two lists
   disagree.

   This file holds ONLY @font-face and custom-property definitions, so it can never compete in the
   cascade with ui.css - which is what lets the docs site and the token-sync test parse it as data.
   Consumers link it first: material-base.css -> tokens.css -> ui.css -> the app's own css.
*/

/* -------------------------------------------------- fonts */
@font-face {
    font-family: 'ES Rebond Grotesque';
    src: url('../fonts/ESRebondGrotesque-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'ES Rebond Grotesque';
    src: url('../fonts/ESRebondGrotesque-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'ES Rebond Grotesque';
    src: url('../fonts/ESRebondGrotesque-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'ES Rebond Grotesque';
    src: url('../fonts/ESRebondGrotesque-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* -------------------------------------------------- tokens */
:root {
    --brand: #6A611D;
    --olive: #877D3C;
    --accent: #FF781E;
    --red: #C0392B;

    --canvas: #EDECE7;
    --ink: #1C1A12;
    --muted: #6E6A57;
    /* A step lighter than --muted: units beside a figure, timestamps, asides. Added for the admin
       portal, whose dense tables need three levels of text weight where MY needed two. */
    --muted-soft: #8A8574;
    --deep: #3C3823;

    --surface-green: #EEF3E4;
    --surface-orange: #FFF1E6;
    --surface-neutral: #F6F5F1;
    /* Tints under --red, --blue and --gold, at the strength --surface-orange has under --accent -
       each hue at roughly a tenth over white. Added for the admin calendar, where a card's fill and
       its left bar say the same thing twice so it survives being scanned at speed. */
    --surface-red: #F9EAE7;
    --surface-blue: #E9EFF4;
    --surface-gold: #F8F3E3;
    --border: #E2E0D8;

    /* "Grafiek Grijs" - the fourth colour of the OFFICIAL brand palette (the guide's neutral for
       charts and grey panels). The guide's palette is exactly four colours: brand, olive, accent
       and this; the other tokens here are UI extensions derived from them. */
    --chart-grey: #E6E6E6;
    --green-text: #4C6B1F;
    --rust: #C6500B;

    /* The third series colour, for a chart that needs one between brand olive and the accent orange.
       A brand tone rather than --warning, which is a STATUS colour: on a member-flow chart "paused"
       is a fact about people, not a warning about anything, and borrowing the status amber would say
       something the data does not. Sibling of --red in that respect - a chart colour, not a state. */
    --gold: #C6A83B;

    /* Its blue sibling: a steel blue in the same desaturated family as the olive, for a KIND of thing
       - the calendar's intake appointments - rather than a status. Not --info, which is Material's
       status blue and says "information" wherever it appears. Blue is the one hue the brand palette
       has no tone of, which is exactly what makes an appointment separate from every session state
       at a glance. */
    --blue: #3F6C8D;

    /* Interaction and status. The four status colours are the conventional Material set, fixed by
       the admin design brief, and are deliberately NOT brand tones: "this went wrong" has to read
       as wrong at a glance in a dense table, and an olive-family red does not. Note --error and
       --red are both reds and are not interchangeable - --red is the chart and report red. */
    --selected: #BABA80;
    --disabled: #C0C0C0;
    --success: #4CAF50;
    --warning: #FFC107;
    --error: #F44336;
    --info: #2196F3;

    /* Derived. The artboards express every hairline as the brand at low alpha rather than as
       --border, so both exist and are not interchangeable. */
    --hairline: rgba(106, 97, 29, .12);
    --hairline-strong: rgba(106, 97, 29, .3);
    --card-border: rgba(106, 97, 29, .14);

    --sidebar-width: 272px;
    --radius-card: 20px;
    /* The admin artboards use three card radii where MY used one: 16 for a stat tile, 20 for a
       card, 24 for the sign-in panel. Added alongside --radius-card rather than replacing it, which
       would move every card in the MY portal. */
    --radius-card-sm: 16px;
    --radius-card-lg: 24px;
    --radius-control: 12px;
    /* The least a dialog keeps clear of every viewport edge. A dialog that reaches the edges reads
       as a page; the inset is what keeps it a dialog. ui.css turns this into a cap on .rz-dialog
       from 769px up, so the value lives here and nowhere in the apps. */
    --dialog-inset: 36px;
    --font: 'ES Rebond Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
}