/* =====================================================================
   Ascend Global LLC — Content Ops design system, file 1 of 4:
   tokens.css -> base.css -> components.css -> pages.css, loaded in that
   order by templates/_styles.html. The palette and every role token: change the look here.

   Mobile-first: unprefixed rules are the phone layout, `min-width` media
   queries add the wider ones. Class names used by static/js/*.js are
   contract -- rename nothing without updating the JS.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;
    /* The palette (2026-10-22): five warm-stone neutrals, one bold accent
       and one red. These seven are the only colour values in this file;
       everything below is a role pointing at one of them (or a mix of
       them). Emphasis -- primary buttons, the current tab, links, focus --
       is the accent; problems are red. */
    --paper: #fafaf8;
    --wash: #ebebe7;
    --line: #d6d6d0;
    --grey: #5e5e58;
    --ink: #151515;
    --accent-hue: #ff5a1f;  /* signal orange */
    --accent-hue-2: #ff5a1f;  /* gradient end: none in light, flat orange */
    --red: #c62828;

    --bg: var(--wash);
    --bg-2: var(--paper);      /* inputs */
    --surface: var(--paper);   /* cards, tables, panels */
    --surface-2: var(--wash);  /* hover, table head, subtle fills */
    --surface-3: var(--line);  /* pressed, media letterbox */
    --border: var(--line);
    --border-soft: var(--line);
    --border-strong: var(--line);

    --text: var(--ink);
    --text-muted: var(--grey);
    --text-faint: var(--grey);

    /* Primary actions, current state and links are ink. */
    --accent: var(--accent-hue);
    --accent-strong: color-mix(in srgb, var(--accent-hue) 85%, var(--ink));  /* hover */
    --accent-soft: var(--accent-hue);
    --accent-ink: var(--paper);
    --accent-wash: var(--wash);
    --accent-ring: color-mix(in srgb, var(--accent-hue) 35%, transparent);
    /* Buttons. Light: one plain look, Download and Recreate included.
       Dark (the original theme) gives each its own (block below). */
    --btn-bg: var(--surface);
    --btn-hover-bg: var(--surface-2);
    --btn-border: var(--border-strong);
    --btn-hover-border: var(--border-strong);
    --btn-weight: 500;
    --btn-download-bg: var(--btn-bg);
    --btn-download-hover-bg: var(--btn-hover-bg);
    --btn-download-border: var(--btn-border);
    --btn-download-hover-border: var(--btn-hover-border);
    --btn-download-text: var(--text);
    --btn-download-weight: var(--btn-weight);
    --btn-recreate-bg: var(--btn-bg);
    --btn-recreate-hover-bg: var(--btn-hover-bg);
    --btn-recreate-border: var(--btn-border);
    --btn-recreate-hover-border: var(--btn-hover-border);
    --btn-recreate-text: var(--text);
    --btn-ghost-border: transparent;
    --btn-ghost-hover-border: transparent;
    --btn-ghost-hover-text: var(--text);
    --btn-ghost-radius: var(--radius-sm);
    /* The primary button: flat accent in light, the original gradient in
       dark. */
    --btn-primary-bg: var(--accent);
    --btn-primary-hover-bg: var(--accent-strong);
    --btn-primary-border: var(--accent);
    --btn-primary-hover-border: var(--accent-strong);
    --btn-primary-hover-filter: none;
    --btn-primary-shadow: var(--shadow-sm);
    --btn-primary-hover-shadow: var(--shadow-sm);
    --btn-primary-weight: 500;
    /* Kept as names so older rules resolve; both are flat. */
    --gradient: linear-gradient(var(--accent-hue), var(--accent-hue));
    --gradient-btn: linear-gradient(var(--accent-hue), var(--accent-hue));

    /* Statuses: only failure has a colour. Good and "needs attention"
       read from the words, not from green and amber. */
    --ok: var(--ink);
    --ok-wash: var(--wash);
    --fail: var(--red);
    --fail-wash: color-mix(in srgb, var(--red) 6%, var(--paper));
    --fail-border: color-mix(in srgb, var(--red) 25%, var(--paper));
    --warn: var(--ink);
    --warn-wash: var(--wash);

    /* Overlay scrims (dialogs, hover captions on media). */
    --scrim: color-mix(in srgb, var(--ink) 45%, transparent);
    --scrim-strong: color-mix(in srgb, var(--ink) 72%, transparent);

    /* Glass: only the sticky header. */
    --glass-bg: color-mix(in srgb, var(--paper) 85%, transparent);
    --glass-border: var(--line);

    /* Spacing scale (4px base). */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: var(--radius);   /* alias: one card radius site-wide */
    --radius-pill: 999px;

    /* Soft, low shadows: a border does the separating, the shadow only
       lifts. */
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
    --shadow: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent), 0 4px 12px color-mix(in srgb, var(--ink) 4%, transparent);
    --shadow-lg: 0 16px 40px color-mix(in srgb, var(--ink) 12%, transparent);

    /* Archivo, self-hosted (static/fonts, OFL): one variable file, every
       weight; Inter (also self-hosted) and the system stack are the
       fallbacks while it loads. */
    --font: "Archivo", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* Fluid type: one scale for the whole site, so a heading is the same
       size on every page without per-page font-size overrides. */
    --step--2: 0.75rem;       /* micro labels: the smallest text anywhere */
    --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
    --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.06rem);
    --step-1: clamp(1.12rem, 1.06rem + 0.3vw, 1.31rem);
    --step-2: clamp(1.25rem, 1.13rem + 0.6vw, 1.6rem);
    --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
    --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --dur: 180ms;
    --dur-slow: 320ms;

    --header-h: 64px;
    /* Every control (button, input, select) is one of two heights and one
       text size, so anything sitting in a row lines up. 16px text on a
       phone: smaller makes iOS zoom in on focus. */
    --control-h: 40px;
    --control-h-sm: 32px;
    --control-font: 1rem;
    /* Width of a filter / sort dropdown in a toolbar: one width for all,
       not each sized to its longest option. */
    --control-w-filter: 10rem;
    /* Minimum width of a page's header actions (Export, Add phone, Sync):
       side by side they come out the same width. */
    --control-w-action: 8rem;

    /* Roles. Every box on the site is one of these kinds; its spacing and
       corners come from here, never a value of its own. Change a role
       here and every element of that kind follows.
         card   a panel standing on the page (card, KPI, phone,
                drive account, dialog, filter panel)
         tile   a small item in a dense grid (gallery result, reuse tile)
         inset  a strip inside or between cards (notice, error, list row,
                selection bar, revealed secret)
         pill   a tag or badge
         cell   a table cell */
    --pad-card: var(--s-5);
    --pad-tile: var(--s-3);
    --pad-inset: var(--s-3) var(--s-4);
    --pad-pill: 2px var(--s-2);
    --pad-cell: 14px var(--s-5);
    --gap-grid: var(--s-4);      /* between cards / tiles in a grid */
    --gap-stack: var(--s-3);     /* between blocks inside a card */
    --gap-inline: var(--s-2);    /* between controls / chips in a row */
    --gap-section: var(--s-7);   /* between page sections */
    --gap-toolbar: var(--s-5);   /* under a search/filter toolbar */
    --radius-card: var(--radius);
    --radius-control: var(--radius-sm);
    /* Wide by default: the tool pages are galleries and tables. */
    --content-max: 1760px;
}

@media (min-width: 720px) {
    :root { --control-font: 0.94rem; }
}

/* Dark (2026-10-22): the original theme, untouched for two months before
   the light redesign (git e8dc6b2, app.css :root), its values verbatim.
   Switched from the header (static/js/theme.js, `ofm_theme` cookie ->
   <html data-theme="dark">). The palette slots are set for the few rules
   that mix them; every role is the original's own value. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #12121b;
    --wash: #08080d;
    --line: #2a2a3d;
    --grey: #a6a6bd;
    --ink: #f4f4f8;
    --accent-hue: #8b5cf6;
    --accent-hue-2: #db2777;
    --red: #fb7185;

    --bg: #08080d;
    --bg-2: #0c0c14;
    --surface: #12121b;
    --surface-2: #191924;
    --surface-3: #21212f;
    --border: #2a2a3d;
    --border-soft: #1e1e2b;
    --border-strong: #3a3a52;

    --text: #f4f4f8;
    --text-muted: #a6a6bd;
    --text-faint: #7c7c93;

    --accent: #8b5cf6;
    --accent-strong: #a78bfa;
    --accent-soft: #c9b8ff;
    --accent-ink: #ffffff;
    --accent-wash: rgba(139, 92, 246, 0.14);
    --accent-ring: rgba(139, 92, 246, 0.45);
    --gradient: linear-gradient(115deg, #7dd3fc, #c4b5fd 45%, #f9a8d4);
    --gradient-btn: linear-gradient(135deg, #7c3aed, #db2777);

    --ok: #4ade80;
    --ok-wash: rgba(74, 222, 128, 0.12);
    --fail: #fb7185;
    --fail-wash: rgba(251, 113, 133, 0.12);
    --fail-border: #6b2a3a;
    --warn: #fbbf24;
    --warn-wash: rgba(251, 191, 36, 0.12);

    --scrim: rgba(4, 4, 8, 0.6);
    --scrim-strong: rgba(4, 4, 8, 0.85);
    --glass-bg: rgba(14, 14, 22, 0.72);
    --glass-border: rgba(255, 255, 255, 0.08);

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* The original buttons. */
    --btn-bg: #191924;
    --btn-hover-bg: #21212f;
    --btn-border: #2a2a3d;
    --btn-hover-border: #3a3a52;
    --btn-weight: 600;
    --btn-primary-bg: linear-gradient(135deg, #7c3aed, #db2777);
    --btn-primary-hover-bg: linear-gradient(135deg, #7c3aed, #db2777);
    --btn-primary-border: transparent;
    --btn-primary-hover-border: transparent;
    --btn-primary-hover-filter: brightness(1.12);
    --btn-primary-shadow: 0 6px 20px rgba(124, 58, 237, 0.28);
    --btn-primary-hover-shadow: 0 10px 28px rgba(124, 58, 237, 0.36);
    --btn-primary-weight: 700;
    --btn-download-bg: rgba(74, 222, 128, 0.12);
    --btn-download-hover-bg: rgba(74, 222, 128, 0.2);
    --btn-download-border: rgba(74, 222, 128, 0.35);
    --btn-download-hover-border: #4ade80;
    --btn-download-text: #4ade80;
    --btn-download-weight: 700;
    --btn-recreate-bg: transparent;
    --btn-recreate-hover-bg: rgba(139, 92, 246, 0.14);
    --btn-recreate-border: rgba(139, 92, 246, 0.45);
    --btn-recreate-hover-border: #8b5cf6;
    --btn-recreate-text: #c9b8ff;
    --btn-ghost-border: #2a2a3d;
    --btn-ghost-hover-border: #fb7185;
    --btn-ghost-hover-text: #fb7185;
    --btn-ghost-radius: 999px;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo-latin-var.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-var.woff2") format("woff2");
}

/* Respect the OS setting: every transition/animation below is decoration,
   never the only signal that something changed. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}