/*
 * Goal Attacker design system: tokens.
 *
 * Everything that decides how a screen looks is declared here and only here:
 * colors by meaning, type scale, spacing, shape, layers. Components
 * (ga-components.css) and new screens take values only through var(--ga-...),
 * never a literal color or size. A new theme is therefore ONE block that
 * overrides these same variables, for example
 *
 *     :root[data-theme="dark"] { --ga-bg: ...; --ga-surface: ...; ... }
 *
 * Only the light theme exists today.
 *
 * Safe to load on every page: this file defines custom properties on :root and
 * nothing else, so no existing screen changes. The values were derived from
 * what assets/css/custom.css, the templates and Bootstrap 2 paint today (see
 * the "old literal -> token" table in docs/design-system.md); where the old
 * value failed WCAG AA as text it was darkened just enough to pass.
 *
 * Reference and rules: docs/design-system.md. Live showcase: admin/design-system.
 */
:root {
    /* color: surfaces */
    --ga-bg: #ffffff;
    --ga-surface: #ffffff;
    --ga-surface-sunken: #f5f5f5;   /* well, comment block, zebra rows */
    --ga-surface-hover: #eeeeee;    /* hero block, hovered neutral, table header */
    --ga-row-hover: #f1f7fb;        /* hovered table row */
    --ga-line: #e0e0e0;
    --ga-line-strong: #cccccc;

    /* color: text */
    --ga-text: #333333;
    --ga-text-muted: #666666;
    --ga-text-inverse: #ffffff;     /* on accent and on solid status fills */

    /* color: accent (links, primary action, selection) */
    --ga-accent: #0069a8;           /* Bootstrap 2 link #0088cc, darkened to AA */
    --ga-accent-hover: #005580;     /* Bootstrap 2 link hover */
    --ga-accent-soft: #d0e8ff;      /* reaction you gave, level 1 */
    --ga-accent-soft-hover: #b8d8ff;
    --ga-accent-line: #80b0ff;
    --ga-brand: #17329f;            /* app chrome and theme-color of the manifest */

    /* color: status. A status color means something, never decoration. */
    --ga-ok: #3c763d;    --ga-ok-soft: #dff0d8;    --ga-ok-line: #d6e9c6;     /* done, saved */
    --ga-warn: #8a6d3b;  --ga-warn-soft: #fcf8e3;  --ga-warn-line: #faebcc;   /* attention, soon */
    --ga-bad: #a94442;   --ga-bad-soft: #f2dede;   --ga-bad-line: #ebccd1;    /* problem, irreversible */
    --ga-info: #31708f;  --ga-info-soft: #d9edf7;  --ga-info-line: #bce8f1;   /* explanation, restricted */
    --ga-notify: #e74c3c;                                                     /* unread dot */

    /* color: file types (attachment tile) */
    --ga-file-pdf: #c0392b;
    --ga-file-md: #1f6fa3;
    --ga-file-html: #b35a0c;
    --ga-file-other: #5f6b6c;
    /* office documents (download-only attachments); white label on each is AA */
    --ga-file-word: #3949ab;
    --ga-file-sheet: #2e7d32;
    --ga-file-slides: #8e24aa;
    --ga-file-text: #6d4c41;

    /* color: activity heat map */
    --ga-heat-weekend: #f7f5f5;

    /* color: overlays and focus */
    --ga-backdrop: rgba(0, 0, 0, .5);
    --ga-focus-color: rgba(0, 105, 168, .45);

    /* color: photo viewer (opaque so text pairs can be checked) */
    --ga-viewer-bg: #111111;
    --ga-viewer-chrome: #2b2b2b;

    /* type */
    --ga-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ga-font-mono: Consolas, "Courier New", monospace;
    --ga-text-xs: .75rem;           /* 12px: labels, chips, hints, table captions */
    --ga-text-sm: .8125rem;         /* 13px: buttons, tables, secondary text */
    --ga-text-md: .875rem;          /* 14px: body, as in Bootstrap 2 */
    --ga-text-lg: 1.125rem;         /* 18px: block title */
    --ga-text-xl: 1.5rem;           /* 24px: screen title */
    --ga-text-display: 1.75rem;     /* 28px: big icons, emoji, FAB */
    --ga-weight-regular: 400;
    --ga-weight-semibold: 600;
    --ga-weight-bold: 700;
    --ga-leading: 1.43;             /* 20px / 14px, as Bootstrap 2 */
    --ga-leading-tight: 1.2;

    /* >>> text size (modules/text-size): a multiplier for report, comment and help text <<< */
    --ga-text-scale: 1;             /* 1 = 100%; the module writes the user's choice (.8 to 2) on the root element */
    /* reading comfort of that text: line height that does not grow in proportion, side space that shrinks */
    --ga-leading-body: 1.5;         /* line height of report text at 100% */
    --ga-leading-body-min: 1.3;     /* ... and the floor it never goes below when enlarged */
    --ga-leading-body-slope: .25;   /* line height lost per +100% of text size (1.375 at 150%, 1.3 floor at 200%) */
    --ga-leading-heading-min: 1.1;  /* headings start at --ga-leading-tight and never go below this */
    --ga-leading-heading-slope: .1; /* heading line height lost per +100% of text size */
    --ga-text-inset-card: 45px;     /* phone, report: screen edge to text today (body 20 + container 10 + card 15) */
    --ga-text-card-padding: 15px;   /* phone, report: the padding of the card itself, part of the 45px */
    --ga-text-inset-page: 30px;     /* phone, help: screen edge to text today (body 20 + container 10) */
    --ga-text-inset-min: var(--ga-space-2);   /* the floor of that side space when text is enlarged: 8px, never zero */

    /* space */
    --ga-space-0: 2px;
    --ga-space-1: 4px;
    --ga-space-2: 8px;
    --ga-space-3: 12px;
    --ga-space-4: 16px;
    --ga-space-5: 24px;
    --ga-space-6: 32px;

    /* shape */
    --ga-radius-sm: 4px;
    --ga-radius-md: 6px;
    --ga-radius-lg: 10px;
    --ga-radius-pill: 999px;
    --ga-radius-round: 50%;
    --ga-border-w: 1px;
    --ga-border-w-strong: 2px;
    --ga-shadow-sm: 0 2px 10px rgba(0, 0, 0, .18);    /* popover, tray tile */
    --ga-shadow-md: 0 3px 8px rgba(0, 0, 0, .25);     /* FAB, raised card */
    --ga-shadow-lg: 0 6px 30px rgba(0, 0, 0, .35);    /* modal window */
    --ga-focus-ring: 0 0 0 3px var(--ga-focus-color);
    --ga-opacity-disabled: .5;

    /* hit area: the smallest thing a finger must hit */
    --ga-tap-min: 44px;
    --ga-tap-compact: 32px;         /* compact controls grow to --ga-tap-min on touch screens */

    /* component sizes */
    --ga-size-tile: 96px;
    --ga-size-tile-icon: 48px;
    --ga-size-fab: 56px;
    --ga-size-dot: 12px;
    --ga-size-check: 1.25rem;
    --ga-size-counter: 1.5rem;
    --ga-size-preview: 15rem;       /* inline preview of an overlay (showcase, embedded) */
    --ga-size-bar: 8px;
    --ga-size-window: 760px;
    --ga-size-sheet: 480px;
    --ga-fab-bottom: 76px;          /* above the bottom bar of the layout */

    /* layers */
    --ga-z-popover: 1000;
    --ga-z-fab: 1040;
    --ga-z-overlay: 2000;

    /* motion */
    --ga-duration: .2s;             /* zoom/slide easing; the viewer drops it under prefers-reduced-motion */

    /* >>> status slot (ga-status): the two ends of a fade; a component may not carry a literal opacity */
    --ga-opacity-hidden: 0;
    --ga-opacity-shown: 1;
    /* <<< status slot */
    /* busy state (ga-spinner, ga-btn.is-busy) */
    --ga-size-spinner: 1.25rem;     /* diameter of the spinner; also the box of its static "..." under reduced motion */
    --ga-spinner-duration: .8s;     /* one turn; the spinner stops under prefers-reduced-motion */
}