/*
 * DocuMint's design, in one file: the fonts, every colour (light and dark), type, corners, depth, space, layout and
 * icons, and the few choices of how a component is drawn. main.css, ui.css and the Mantine theme only read these
 * tokens, so the look changes here and nowhere else.
 *
 * Light is the default. Dark follows the OS setting unless the user picks a theme with the toggle, which sets
 * data-theme on <html> and wins both ways. Older variable names (--bg-secondary, --color-primary, ...) are kept as
 * aliases at the end so existing templates and inline styles pick up the theme.
 *
 * This look, "Paper" (the style playground's saved pick): warm ink on white, Inter with Roboto Mono for amounts, bold
 * large titles, small corners, hairline cards and no shadows on the page, tinted status labels, underlined tabs, ruled
 * rows, ghost secondary buttons, a light sidebar in its own warm grey, and screens no wider than 1160px. Its muted ink
 * is a shade darker than the pick's, so small grey text reads on every surface (4.5:1 or better).
 */

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

:root {
    color-scheme: light;

    /* ---------------------------------------------------------------- Type */
    --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: var(--font-family);
    --font-mono: 'Roboto Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;  /* amounts, numbers, codes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9063rem;        /* 14.5px */
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.3125rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 2.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --heading-weight: 700;              /* page and card titles */
    --heading-tracking: -0.015em;
    --title-size: 1.4688rem;            /* a page's title: large, 23.5px */
    --line-height-tight: 1.25;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.7;

    /* ---------------------------------------------------------------- Surfaces, ink, lines */
    --surface-page: #ffffff;
    --surface-1: #ffffff;               /* cards, panels, tables */
    --surface-2: #f7f7f5;               /* fills: table heads, hovers, tracks */
    --surface-3: #ebebe9;               /* pressed, selected */
    --surface-overlay: rgba(15, 15, 15, 0.4);
    --ink-1: #2f2e2a;
    --ink-2: #5f5e5b;
    --ink-3: #706e6b;
    --ink-on-accent: #ffffff;
    --line-1: #ebeae7;                  /* hairlines, card borders */
    --line-2: #d6d5d1;                  /* inputs, stronger dividers */
    --focus-ring: 0 0 0 3px rgba(47, 46, 42, 0.28);

    /* ---------------------------------------------------------------- Accent: the ink itself */
    --accent: #2f2e2a;
    --accent-hover: #45443f;
    --accent-soft: #efeeeb;
    --accent-ink: #2f2e2a;

    /* ---------------------------------------------------------------- Status: always with an icon or words, never colour alone */
    --good: #33714f;
    --good-ink: #33714f;
    --good-soft: #e8f1ec;
    --warning: #9a5b13;
    --warning-ink: #9a5b13;
    --warning-soft: #f7ede0;
    --critical: #c4392b;
    --critical-ink: #c4392b;
    --critical-soft: #fbe9e6;
    --neutral: #a8a6a1;
    --neutral-ink: #5f5e5b;
    --neutral-soft: #f7f7f5;
    /* Where a job or document is: done (mint), waiting (info), to do (amber), 45-90 days late (serious), late (red) */
    --mint: #33714f;
    --mint-soft: #e8f1ec;
    --info: #2b6aa6;
    --info-soft: #e5eef6;
    --amber: #9a5b13;
    --amber-soft: #f7ede0;
    --serious: #b14d1c;
    --red: #c4392b;
    --red-soft: #fbe9e6;

    /* ---------------------------------------------------------------- Charts: one series in ink; several take these in
       order (checked for colour-blind separation of neighbours, slot 5 against slot 1, on white and on #202020) */
    --chart-surface: var(--surface-1);
    --chart-series-1: #2f2e2a;
    --chart-cat-1: #3c69c3;
    --chart-cat-2: #099b9e;
    --chart-cat-3: #dd9338;
    --chart-cat-4: #997dce;
    --chart-cat-5: #ba407c;
    --chart-grid: #ebeae7;
    --chart-axis: #d6d5d1;

    /* ---------------------------------------------------------------- Shape */
    --radius-sm: 4px;                   /* labels */
    --radius: 5px;                      /* controls */
    --radius-lg: 6px;                   /* cards */
    --radius-pill: 999px;
    --border-width: 1px;

    /* ---------------------------------------------------------------- Depth: none on the page; menus and dialogs float */
    --shadow-1: none;
    --shadow-2: 0 1px 2px rgba(15, 15, 15, 0.084), 0 10px 31px rgba(15, 15, 15, 0.132);   /* menus, popovers */
    --shadow-3: 0 1px 2px rgba(15, 15, 15, 0.158), 0 14px 43px rgba(15, 15, 15, 0.248);   /* dialogs, the phone sidebar */

    /* ---------------------------------------------------------------- Space */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* ---------------------------------------------------------------- Layout */
    --sidebar-width: 240px;             /* open */
    --sidebar-rail-width: 64px;         /* folded to icons */
    --header-height: 60px;
    --content-max: 1160px;              /* a screen, and the header above it, centred past this */

    /* ---------------------------------------------------------------- Icons and motion */
    --icon-stroke: 1.6;
    --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
    --transition-base: 180ms cubic-bezier(0.2, 0, 0, 1);
    --transition-slow: 260ms cubic-bezier(0.2, 0, 0, 1);

    /* ---------------------------------------------------------------- How components are drawn */
    /* Cards */
    --card-radius: var(--radius-lg);
    --card-border: var(--line-1);
    --card-shadow: none;
    /* Status labels (a pill or tag with a tone): a tint behind them (0% to 100% of the tone's soft colour), an outline
       (its width, and how much of the tone it takes) */
    --status-fill: 100%;
    --status-outline: 0px;
    --status-outline-mix: 45%;
    /* Tabs, filter chips and two-way switches: underlined here. Segmented ones: --tabs-bg var(--surface-2), --tabs-pad 3px,
       --tabs-rule transparent, --tabs-width fit-content, --tab-on-bg var(--surface-page), a --tab-on-shadow, --tab-on-line
       transparent. A shadow is never none: the rule adds the underline after it */
    --tabs-bg: transparent;
    --tabs-pad: 0;
    --tabs-radius: 0;
    --tabs-rule: var(--line-1);
    --tabs-width: auto;
    --tab-radius: 0;
    --tab-border: transparent;
    --tab-on-bg: transparent;
    --tab-on-ink: var(--ink-1);
    --tab-on-shadow: 0 0 #0000;
    --tab-on-line: var(--accent);
    /* List rows: the line between them (transparent for none), and a row under the pointer */
    --row-line: var(--line-1);
    --row-hover: var(--surface-2);
    /* The home money bar: the colour bar under each tile (3px to show it) */
    --moneybar-marker: 0px;
    /* Secondary buttons: ghost here, words on the page until pointed at. Outlined: var(--surface-1), var(--line-2) */
    --btn2-bg: transparent;
    --btn2-border: transparent;
    --btn2-ink: var(--ink-1);

    /* ---------------------------------------------------------------- The sidebar's own palette: a warm grey */
    --sidebar-scheme: light;
    --sidebar-bg: #f7f7f5;
    --sidebar-ink: #2f2e2a;
    --sidebar-ink-2: #5f5e5b;
    --sidebar-ink-3: #706e6b;
    --sidebar-line: #ebeae7;
    --sidebar-line-2: #d6d5d1;
    --sidebar-hover: rgba(47, 46, 42, 0.05);
    --sidebar-active-bg: #ebebe9;
    --sidebar-active-ink: #2f2e2a;
    --logo-bg: #2f2e2a;                 /* the tile behind the seal */
    --logo-art: none;                   /* the seal is white artwork, on the ink tile */

    /* ---------------------------------------------------------------- The sign-in page's side panel */
    --auth-bg: #2f2e2a;
    --auth-ink: #ffffff;
    --auth-ink-2: #c9c7c2;
    --auth-ink-3: #e6e5e3;
    --auth-icon: #ffffff;
    --auth-glow: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------- Dark: the colours and shadows again */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --surface-page: #191919;
        --surface-1: #202020;
        --surface-2: #2a2a2a;
        --surface-3: #353535;
        --surface-overlay: rgba(0, 0, 0, 0.6);
        --ink-1: #e6e5e3;
        --ink-2: #b3b1ad;
        --ink-3: #969491;
        --ink-on-accent: #191919;
        --line-1: #2f2f2f;
        --line-2: #3f3f3e;
        --focus-ring: 0 0 0 3px rgba(230, 229, 227, 0.35);
        --accent: #e6e5e3;
        --accent-hover: #f2f1ef;
        --accent-soft: #333332;
        --accent-ink: #f2f1ef;
        --good: #6fc192;
        --good-ink: #6fc192;
        --good-soft: #243a2e;
        --warning: #e0a458;
        --warning-ink: #e0a458;
        --warning-soft: #3d2f1c;
        --critical: #f08070;
        --critical-ink: #f08070;
        --critical-soft: #432421;
        --neutral: #6b6a66;
        --neutral-ink: #b3b1ad;
        --neutral-soft: #2a2a2a;
        --mint: #6fc192;
        --mint-soft: #243a2e;
        --info: #6fa8e6;
        --info-soft: #1f3044;
        --amber: #e0a458;
        --amber-soft: #3d2f1c;
        --serious: #ee9a62;
        --red: #f08070;
        --red-soft: #432421;
        --chart-series-1: #e6e5e3;
        --chart-cat-1: #436ec4;
        --chart-cat-2: #029792;
        --chart-cat-3: #c28339;
        --chart-cat-4: #9984cb;
        --chart-cat-5: #ad4373;
        --chart-grid: #2f2f2f;
        --chart-axis: #3f3f3e;
        --shadow-2: 0 1px 2px rgba(15, 15, 15, 0.202), 0 10px 31px rgba(15, 15, 15, 0.317);
        --shadow-3: 0 1px 2px rgba(15, 15, 15, 0.378), 0 14px 43px rgba(15, 15, 15, 0.594);
        --sidebar-scheme: dark;
        --sidebar-bg: #202020;
        --sidebar-ink: #e6e5e3;
        --sidebar-ink-2: #b3b1ad;
        --sidebar-ink-3: #969491;
        --sidebar-line: #2f2f2f;
        --sidebar-line-2: #3f3f3e;
        --sidebar-hover: rgba(255, 255, 255, 0.05);
        --sidebar-active-bg: #333332;
        --sidebar-active-ink: #f2f1ef;
        --logo-bg: #e6e5e3;
        --logo-art: invert(1);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #191919;
    --surface-1: #202020;
    --surface-2: #2a2a2a;
    --surface-3: #353535;
    --surface-overlay: rgba(0, 0, 0, 0.6);
    --ink-1: #e6e5e3;
    --ink-2: #b3b1ad;
    --ink-3: #969491;
    --ink-on-accent: #191919;
    --line-1: #2f2f2f;
    --line-2: #3f3f3e;
    --focus-ring: 0 0 0 3px rgba(230, 229, 227, 0.35);
    --accent: #e6e5e3;
    --accent-hover: #f2f1ef;
    --accent-soft: #333332;
    --accent-ink: #f2f1ef;
    --good: #6fc192;
    --good-ink: #6fc192;
    --good-soft: #243a2e;
    --warning: #e0a458;
    --warning-ink: #e0a458;
    --warning-soft: #3d2f1c;
    --critical: #f08070;
    --critical-ink: #f08070;
    --critical-soft: #432421;
    --neutral: #6b6a66;
    --neutral-ink: #b3b1ad;
    --neutral-soft: #2a2a2a;
    --mint: #6fc192;
    --mint-soft: #243a2e;
    --info: #6fa8e6;
    --info-soft: #1f3044;
    --amber: #e0a458;
    --amber-soft: #3d2f1c;
    --serious: #ee9a62;
    --red: #f08070;
    --red-soft: #432421;
    --chart-series-1: #e6e5e3;
    --chart-cat-1: #436ec4;
    --chart-cat-2: #029792;
    --chart-cat-3: #c28339;
    --chart-cat-4: #9984cb;
    --chart-cat-5: #ad4373;
    --chart-grid: #2f2f2f;
    --chart-axis: #3f3f3e;
    --shadow-2: 0 1px 2px rgba(15, 15, 15, 0.202), 0 10px 31px rgba(15, 15, 15, 0.317);
    --shadow-3: 0 1px 2px rgba(15, 15, 15, 0.378), 0 14px 43px rgba(15, 15, 15, 0.594);
    --sidebar-scheme: dark;
    --sidebar-bg: #202020;
    --sidebar-ink: #e6e5e3;
    --sidebar-ink-2: #b3b1ad;
    --sidebar-ink-3: #969491;
    --sidebar-line: #2f2f2f;
    --sidebar-line-2: #3f3f3e;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-active-bg: #333332;
    --sidebar-active-ink: #f2f1ef;
    --logo-bg: #e6e5e3;
    --logo-art: invert(1);
}

/* ---------------------------------------------------------------- The sidebar draws with its own palette: the page's
   tokens set again inside it, so everything in it (links, the user chip, the organization dropdown) follows */
.sidebar {
    color-scheme: var(--sidebar-scheme);
    color: var(--sidebar-ink);
    --surface-1: var(--sidebar-bg);
    --surface-2: var(--sidebar-hover);
    --surface-3: var(--sidebar-active-bg);
    --ink-1: var(--sidebar-ink);
    --ink-2: var(--sidebar-ink-2);
    --ink-3: var(--sidebar-ink-3);
    --line-1: var(--sidebar-line);
    --line-2: var(--sidebar-line-2);
    --accent: var(--sidebar-active-ink);
    --accent-soft: var(--sidebar-active-bg);
    --accent-ink: var(--sidebar-active-ink);
    --ink-on-accent: var(--sidebar-bg);
    --text-primary: var(--ink-1);
    --text-secondary: var(--ink-2);
    --text-tertiary: var(--ink-3);
    --bg-secondary: var(--surface-1);
    --bg-tertiary: var(--surface-2);
    --bg-hover: var(--surface-2);
    --border-color: var(--line-1);
    --mantine-color-body: var(--surface-1);
    --mantine-color-text: var(--ink-1);
    --mantine-color-dimmed: var(--ink-3);
    --mantine-color-default: var(--surface-2);
    --mantine-color-default-hover: var(--surface-3);
    --mantine-color-default-border: var(--line-2);
    --mantine-color-placeholder: var(--ink-3);
}

/* ---------------------------------------------------------------- Legacy aliases used by existing templates and inline styles */
:root {
    --bg-primary: var(--surface-page);
    --bg-secondary: var(--surface-1);
    --bg-tertiary: var(--surface-2);
    --bg-hover: var(--surface-2);
    --color-bg-secondary: var(--surface-1);

    --text-primary: var(--ink-1);
    --text-secondary: var(--ink-2);
    --text-tertiary: var(--ink-3);
    --text-inverse: var(--ink-on-accent);
    --color-text-secondary: var(--ink-2);

    --border-color: var(--line-1);
    --border-color-hover: var(--line-2);
    --border-radius: var(--radius);
    --border-radius-sm: var(--radius-sm);
    --border-radius-lg: var(--radius-lg);

    --shadow-sm: var(--shadow-1);
    --shadow-md: var(--shadow-1);
    --shadow-lg: var(--shadow-2);

    --color-primary: var(--accent);
    --color-primary-hover: var(--accent-hover);
    --color-primary-light: var(--accent-soft);
    --color-success: var(--good-ink);
    --color-success-bg: var(--good-soft);
    --color-warning: var(--warning-ink);
    --color-warning-dark: var(--warning-ink);
    --color-warning-bg: var(--warning-soft);
    --color-error: var(--critical-ink);
    --color-error-bg: var(--critical-soft);
    --color-info: var(--accent-ink);
    --color-info-bg: var(--accent-soft);

    --chart-primary: var(--chart-series-1);
}