/* The design tokens: colours, type, spacing and the controls' sizes, light and dark. SPDX-License-Identifier: Apache-2.0 */

@layer reset, theme, defaults, layouts, components, utils;

@layer theme {
  :root {
    --accent: #1f3a5f;
    /* a link: blue enough to stand apart from the text beside it by its hue, as dark's does, and
       at least 4.5:1 on every ground; no colour can also be 3:1 from both inks and keep that */
    --link: #1a5fb4;
    /* how far every underline sits under its text, a link's and a tip's dotted one alike */
    --underline-offset: 3px;
    --accent-deep: #0e1c2d;
    --blue: #3b6fa5;
    --ink: #243140;
    --ink-soft: #5d6b7b;
    --ink-faint: #8a96a4;
    --page: #f6f8fb;
    --panel: #ffffff;
    --line: #e4e9f0;
    --warn: #8a4b2a;

    --caution: #d4911d;
    --danger: #b22222;

    --ok: #2f7a4f;

    --mark-bg: #fbf0bf;
    --view-switch-track: #eef2f7;

    --accent-soft: color-mix(in srgb, var(--blue) 10%, var(--panel));
    --accent-line: color-mix(in srgb, var(--blue) 20%, var(--panel));

    --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--accent-deep));
    --on-accent: var(--panel);
    --mist: color-mix(in srgb, var(--ink-faint) 14%, var(--panel));
    --frame-ground: color-mix(in srgb, var(--page) 60%, var(--panel));
    --warn-soft: color-mix(in srgb, var(--warn) 9%, var(--panel));
    --warn-line: color-mix(in srgb, var(--warn) 30%, var(--panel));
    --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--panel));
    --scrim: color-mix(in srgb, var(--accent-deep) 22%, transparent);
    --shadow-ink-faint: color-mix(in srgb, var(--accent-deep) 5%, transparent);
    --shadow-ink-soft: color-mix(in srgb, var(--accent-deep) 7%, transparent);
    --shadow-ink-deep: color-mix(in srgb, var(--accent-deep) 18%, transparent);
    --skeleton: color-mix(in srgb, var(--ink-faint) 16%, var(--panel));

    --skeleton-shine: color-mix(in srgb, var(--ink-faint) 6%, var(--panel));

    --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: Newsreader, Georgia, "Times New Roman", serif;
    --text-tag: 11px;
    --text-xs: 11.5px;
    --text-sm: 12px;
    --text-note: 12.5px;
    --text-md: 13px;
    --text-menu: 13.5px;
    --text-row: 14px;
    --text-base: 15px;
    --text-brand: 24px;
    --text-display: 32px;

    --text-page-title: 24px;

    --leading: 1.55;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-strong: 600;
    --tracking-caps: 0.07em;
    --tracking-brand: 0.01em;
    --tracking-display: -0.012em;

    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-9: 18px;
    --space-10: 24px;
    --space-11: 32px;
    --space-12: 36px;
    /* the room under the last thing on every page: the side panel's own distance from the window's
       foot, and on a phone the page's distance from its sides (responsive.css) */
    --page-foot: var(--space-6);
    --row-pad-y: 7px;
    --row-pad-x: 9px;
    --row-indent: 14px;
    --input-pad-y: 5px;

    --result-pad-y: 9px;
    --search-bar-gap: 12px;

    --hairline: 1px;
    --icon-size: 18px;
    --icon-sm: 13px;
    --icon-dots: 16px;
    --icon-result: 16px;
    --icon-chevron: 14px;
    --hit-target: 40px;
    --mark-width: 12px;
    --mark-height: 24px;
    --menu-min-width: 150px;
    --side-panel-width: 284px;

    --home-width: 720px;
    --greeting-top: 72px;
    --side-rail-lane: 84px;
    --dialog-width: 560px;
    --door-card-width: 400px;

    --rules-measure-width: 110px;

    --view-switch-half: 86px;
    --view-switch-pad: 3px;

    --dashboard-head-min: 240px;
    --skeleton-line: 14px;

    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    --tab-underline: 2px;
    --tab-pad-top: 7px;
    --tab-pad-bottom: 6px;

    --radius: 10px;
    --radius-btn: 8px;
    --radius-sm: 6px;
    --radius-mark: 3px;
    --radius-pill: 999px;
    --radius-round: 50%;

    --shadow: 0 1px 2px var(--shadow-ink-faint), 0 8px 24px var(--shadow-ink-soft);
    --shadow-dialog: 0 18px 48px var(--shadow-ink-deep);

    --focus-ring: var(--focus-ring-width) solid var(--blue);
    --motion-fast: 120ms;
    --motion-slide: 160ms;
    --motion-shimmer: 1.4s;
    --ink-pale: #bec7d2;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion-fast: 0ms;
      --motion-slide: 0ms;
      --motion-shimmer: 0s;
    }
  }
}