/*
 * Design tokens. The only file that names a colour, a size or a curve.
 *
 * Two layers, and the split is the point.
 *
 * The **ramps** at the top are raw material: fourteen greys, nine blues, three
 * signals. Nothing in the interface references them directly.
 *
 * The **`--listamos-*` layer** below names roles — shell, canvas, surface, text,
 * border, primary — and every rule in the product reads those. That indirection is
 * what lets the whole thing be re-lit from one screenful of values, and it is also
 * documentation: `color: var(--listamos-text-tertiary)` has said why, `color: #79819a`
 * has only said what.
 *
 * The art direction this file encodes:
 *
 * 1. **Light comes from the shell.** The application is a white frame with a tinted
 *    sheet set into it, and the work sits on white cards on that sheet. Three planes,
 *    each a real step, so depth reads before a single border is drawn. That is what
 *    separates a designed product from a page with sections on it.
 * 2. **Depth is graded, not sprinkled.** Six elevations, each with a job: a card that
 *    is barely off the sheet, a menu that is clearly in front of everything. A single
 *    heavy shadow everywhere is the fastest way to look like a template.
 * 3. **Colour is spent, not applied.** One deep blue for the action, three signals for
 *    what is true about a listing, and everything else ink. A screen where five things
 *    are coloured is a screen that is pointing at nothing.
 * 4. **Facts are set in mono.** Counts, prices, identifiers, timestamps, column
 *    headings, scores. It runs through every screen and it is what stops a table
 *    reading as a web page with rows in it.
 *
 * The `--bs-*` block at the bottom points Bootstrap's own components at all of this,
 * so its modal, dropdown and grid inherit the design instead of being fought with
 * `!important`.
 */

:root {
    /* ——— Ink ————————————————————————————————————————————————————————————
       A cool near-neutral. The faint blue cast is deliberate: it sits under the brand
       hue without either looking dirty, and it keeps large light areas from going
       yellow next to a photograph. Not pure black at the dark end — #000 on a screen
       vibrates and reads as cheap. */
    --ink-950: #070910;
    --ink-900: #0f1320;
    --ink-850: #161b2b;
    --ink-800: #1d2333;
    --ink-700: #2c3345;
    --ink-600: #414a60;
    --ink-500: #596178;
    --ink-400: #79819a;
    --ink-300: #a2a9bd;
    --ink-250: #b8bfd0;
    --ink-200: #ccd2e0;
    --ink-150: #dee2ec;
    --ink-100: #e8ebf3;
    --ink-075: #eff1f7;
    --ink-050: #f4f6fa;
    --ink-025: #f9fafd;

    --paper: #ffffff;

    /* ——— Trust ——————————————————————————————————————————————————————————
       One hue, nine steps, and the mid of it is the product. Deeper than a web blue
       on purpose: the bright end of this hue reads as a hyperlink or a consumer app,
       a step down reads as software somebody pays for. The two lightest are the ones
       that do most of the work — a selected row, the current destination, a soft
       button — because tinting a surface is how you point without shouting. */
    --brand-950: #0b1638;
    --brand-900: #111f52;
    --brand-800: #16307f;
    --brand-700: #1c3fa8;
    --brand-600: #2454d6;
    --brand-500: #3b6bec;
    --brand-400: #6d94f6;
    --brand-300: #a3bcfb;
    --brand-200: #c9d9fe;
    --brand-100: #e1e9ff;
    --brand-050: #f0f4ff;

    /* Warmth, rationed. A value in a diff, a listing that needs work, one word in a
       headline. Never a whole button, never a page background. */
    --amber-800: #6f3f06;
    --amber-700: #8a5008;
    --amber-600: #b06a10;
    --amber-500: #dd9019;
    --amber-200: #f6ddb0;
    --amber-100: #fbeed7;
    --amber-050: #fdf8ee;

    --green-800: #075139;
    --green-700: #0a6b4b;
    --green-600: #0f8a62;
    --green-500: #17a978;
    --green-200: #b6e5d1;
    --green-100: #d6f0e5;
    --green-050: #eefaf5;

    --red-800: #7f1d1a;
    --red-700: #9f2420;
    --red-600: #cd3630;
    --red-500: #e0524c;
    --red-200: #f6c8c6;
    --red-100: #fbe2e1;
    --red-050: #fdf2f1;

    /* ——— Type ———————————————————————————————————————————————————————————
       One family for prose, one for facts. The second is the art direction: counts,
       identifiers, prices, timestamps, scores and column headings are set in mono, so
       the parts of the screen that are *data* look like data. It is the difference
       between a table and a spreadsheet somebody designed. */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Roboto Mono', monospace;

    /* Eleven steps, and the gaps between the small ones are deliberately narrow: a
       working screen lives between 11px and 15px, and the difference between a label
       and the value beside it is one step, not three. */
    --text-3xs: 0.625rem;
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.9375rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;
    --text-6xl: 4rem;

    /* Weights named rather than numbered at the call site, because Inter's 500 and
       600 are one notch apart optically and the choice between them is a design
       decision worth being able to change in one place. */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 590;
    --weight-bold: 680;

    /* Space on a four-pixel grid. A working tool is dense: on the catalogue the row is
       the content, and air around it is air the seller scrolls past. The large end is
       for the public pages, where air is the product. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5.5rem;
    --space-12: 7.5rem;

    /* ——— Curvature ——————————————————————————————————————————————————————
       Graded by the size of the thing, which is the rule that keeps an interface from
       looking either sharp-and-cheap or soft-and-childish. A radius should look like
       a constant physical fillet applied to objects of different sizes, so a bigger
       object needs a bigger number to look like the same curve. */
    --radius-xs: 6px;   /* a tick box, a tiny chip */
    --radius-sm: 8px;   /* a small control, an inline tag */
    --radius: 10px;     /* the default control: button, input, select */
    --radius-md: 12px;  /* a large control, a thumbnail, a menu */
    --radius-lg: 14px;  /* a card */
    --radius-xl: 18px;  /* a panel, a dialog */
    --radius-2xl: 22px; /* the workspace itself */
    --radius-pill: 999px;

    /* ——— Light ——————————————————————————————————————————————————————————
       Graded the same way, and every step is two shadows: a tight one that draws the
       contact edge and a wide one that carries the mass. One shadow alone always
       reads either as a smudge or as a border in the wrong colour.

       The colour is the ink, not black: a shadow on a blue-grey canvas made from pure
       black goes muddy, and it is the single most common tell of a template. */
    --shadow-xs: 0 1px 2px rgba(15, 19, 32, .05);
    --shadow-sm: 0 1px 2px rgba(15, 19, 32, .05), 0 1px 3px rgba(15, 19, 32, .04);
    --shadow-card: 0 1px 1px rgba(15, 19, 32, .04), 0 2px 6px -1px rgba(15, 19, 32, .05);
    --shadow-md: 0 2px 4px -2px rgba(15, 19, 32, .08), 0 8px 20px -6px rgba(15, 19, 32, .10);
    --shadow-lg: 0 6px 12px -6px rgba(15, 19, 32, .10), 0 20px 44px -12px rgba(15, 19, 32, .16);
    --shadow-xl: 0 10px 20px -10px rgba(15, 19, 32, .12), 0 36px 72px -20px rgba(15, 19, 32, .24);

    /* The one pressed-metal detail in the product: a hairline of white along the top
       inside edge of a dark surface, which is what makes a dark button look moulded
       rather than filled. */
    --sheen-top: inset 0 1px 0 rgba(255, 255, 255, .14);
    --sheen-bottom: inset 0 -1px 0 rgba(15, 19, 32, .18);

    /* ——— Measure ————————————————————————————————————————————————————————
       Control heights are a scale, not a per-component decision. Three of them, and
       everything in a row shares one so that a button, a select and a search field
       set side by side line up without anybody nudging a padding. */
    --control-sm: 1.875rem;
    --control: 2.25rem;
    --control-lg: 2.75rem;

    /* Where the page stops. The catalogue is wide because a seven-column table is;
       prose is narrow because reading is. */
    --measure-prose: 42rem;
    --measure-form: 46rem;
    --measure-app: 100rem;
    --measure-public: 74rem;

    --gutter: var(--space-6);
    --gutter-lg: var(--space-8);

    /* ——— Motion —————————————————————————————————————————————————————————
       One curve, and it is quick. Slow interfaces feel expensive to the person who
       designed them and broken to the person using them. */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --ease-spring: cubic-bezier(.22, 1.16, .36, 1);
    --fast: 110ms var(--ease);
    --medium: 180ms var(--ease);
    --slow: 320ms var(--ease);

    /* ————————————————————————————————————————— The semantic layer ————————
       What the interface actually reads. Everything above this line is inventory. */

    /* Three planes, and this is the whole composition.

       The **shell** is the frame the product is mounted in: white, so the navigation
       sits on paper and the mark at the top of it has nothing competing. The
       **canvas** is the tinted sheet set into the frame, which is where work happens.
       **Surfaces** are the white objects on that sheet. A card is legible on the
       canvas without a border, and that is the test of whether the steps are right. */
    --listamos-shell: #ffffff;
    --listamos-sidebar: #ffffff;
    --listamos-canvas: #f3f5fa;
    --listamos-surface: #ffffff;
    --listamos-surface-raised: #ffffff;
    --listamos-surface-subtle: var(--ink-050);
    --listamos-surface-sunken: var(--ink-075);
    --listamos-surface-inverse: var(--ink-900);
    --listamos-overlay: rgba(15, 19, 32, .48);

    --listamos-text: var(--ink-900);
    --listamos-text-secondary: var(--ink-500);
    --listamos-text-tertiary: var(--ink-400);
    --listamos-text-inverse: #ffffff;
    --listamos-text-on-primary: #ffffff;

    /* Two weights of line and they mean different things: the hairline separates
       things of the same kind (rows in a table), the strong one bounds a thing you
       can interact with (a field, a button that is not filled). */
    --listamos-border: var(--ink-100);
    --listamos-border-strong: var(--ink-200);
    --listamos-border-hover: var(--ink-250);

    --listamos-primary: var(--brand-600);
    --listamos-primary-hover: var(--brand-700);
    --listamos-primary-active: var(--brand-800);
    --listamos-primary-soft: var(--brand-050);
    --listamos-primary-soft-hover: var(--brand-100);
    --listamos-primary-border: var(--brand-200);
    --listamos-primary-text: var(--brand-700);

    --listamos-focus: rgba(36, 84, 214, .28);
    --listamos-ring: 0 0 0 3px var(--listamos-focus);

    --listamos-success: var(--green-600);
    --listamos-success-soft: var(--green-050);
    --listamos-success-text: var(--green-700);
    --listamos-warning: var(--amber-500);
    --listamos-warning-soft: var(--amber-050);
    --listamos-warning-text: var(--amber-700);
    --listamos-danger: var(--red-600);
    --listamos-danger-soft: var(--red-050);
    --listamos-danger-text: var(--red-700);
    --listamos-info: var(--brand-600);
    --listamos-info-soft: var(--brand-050);
    --listamos-info-text: var(--brand-700);

    /* Health. Three bands over the score the advisor already computes, named here so
       the meter, the word and the sort all agree on where the lines are. */
    --listamos-health-good: var(--green-600);
    --listamos-health-work: var(--amber-500);
    --listamos-health-risk: var(--red-600);
    --listamos-health-track: var(--ink-100);

    /* Chrome. */
    --listamos-rail-width: 15.25rem;
    --listamos-rail-inset: 0.5rem;

    /* ——— Bootstrap, pointed at the above ——————————————————————————————
       Its components already read these. Overriding here means the modal, the
       dropdown and the grid inherit the design instead of needing a copy of it. */
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--text-base);
    --bs-body-color: var(--listamos-text);
    --bs-body-bg: var(--listamos-canvas);
    --bs-emphasis-color: var(--listamos-text);
    --bs-secondary-color: var(--listamos-text-secondary);
    --bs-tertiary-color: var(--listamos-text-tertiary);
    --bs-border-color: var(--listamos-border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-md);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-border-radius-xxl: var(--radius-xl);
    --bs-link-color: var(--listamos-primary);
    --bs-link-hover-color: var(--listamos-primary-hover);
    --bs-primary: var(--listamos-primary);
    --bs-primary-rgb: 36, 84, 214;
    --bs-focus-ring-color: var(--listamos-focus);
    --bs-focus-ring-width: 3px;
    --bs-heading-color: var(--listamos-text);
    --bs-body-line-height: 1.55;

    /* ——— Names the older screens still ask for ——————————————————————————
       Pointed at the system rather than deleted, so a page that has not been through
       the migration yet still inherits the design instead of keeping the old one. */
    --grad-brand: var(--listamos-primary);
    --grad-paper: var(--listamos-surface);
    --grad-sheen: none;
    --grad-tile-brand: var(--brand-600);
    --grad-tile-mint: var(--green-600);
    --grad-tile-amber: var(--amber-500);
    --grad-tile-violet: var(--ink-600);
    --grad-tile-ink: var(--ink-800);
    --shadow-brand: 0 1px 2px rgba(15, 19, 32, .12), 0 6px 16px -6px rgba(36, 84, 214, .40);
    --shadow-brand-lg: 0 2px 4px rgba(15, 19, 32, .10), 0 18px 36px -12px rgba(36, 84, 214, .44);
    --shadow-tile: var(--shadow-card);
    --lit: 0 0 rgba(0, 0, 0, 0);
    --ring: var(--listamos-ring);
    --border: 1px solid var(--listamos-border);
}