/* nwl-components design tokens: `import 'nwl-components/tokens.css'`.
   Two tiers. Tier 1 is the raw palette: the only place where hex values appear. Tier 2 is the
   semantic tokens: what components and app CSS use. The values are those the NAAT apps have
   today, so loading this file changes nothing on screen; a later visual refresh only changes
   values here. Dark theme only. */

/* Tier 1: raw palette. Use a raw name directly only for a value with no role of its own. */
:root {
  /* greys, named by their channel value in hex: --nwl-grey-44 is #444 */
  --nwl-black: #000;
  --nwl-grey-11: #111;
  --nwl-grey-22: #222;
  --nwl-grey-33: #333;
  --nwl-grey-44: #444;
  --nwl-grey-55: #555;
  --nwl-grey-66: #666;
  --nwl-grey-77: #777;
  --nwl-grey-7a: #7a7a7a;
  --nwl-grey-80: #808080;
  --nwl-grey-bb: #bbb;
  --nwl-grey-cc: #ccc;
  --nwl-grey-dd: #ddd;
  --nwl-white: #fff;

  /* white and black with transparency, named by their opacity in percent */
  --nwl-white-25: #ffffff40;
  --nwl-white-40: rgba(255, 255, 255, 0.4);
  --nwl-white-75: rgba(255, 255, 255, 0.75);
  --nwl-black-70: rgba(0, 0, 0, 0.7);
  --nwl-black-80: rgba(0, 0, 0, 0.8);

  /* colours */
  --nwl-cyan: #57d1df;
  --nwl-cyan-50: rgba(87, 209, 223, 0.5);
  --nwl-cyan-15: rgba(87, 209, 223, 0.15);
  --nwl-red: #c55;
  --nwl-green: #8d8;
  --nwl-amber: #fc6;

  /* generic font families */
  --nwl-sans-serif: sans-serif;
  --nwl-monospace: ui-monospace, Menlo, Consolas, monospace;
}

/* Tier 2: semantic tokens. */
:root {
  /* backgrounds, darkest to lightest: viewer canvas, top bar, page, panels, selected rows and
     menus, pressed or hovered controls, text fields; the overlay behind dialogs */
  --nwl-bg-canvas: var(--nwl-black);
  --nwl-bg-nav: var(--nwl-grey-11);
  --nwl-bg: var(--nwl-grey-22);
  --nwl-bg-surface: var(--nwl-grey-33);
  --nwl-bg-elevated: var(--nwl-grey-44);
  --nwl-bg-pressed: var(--nwl-grey-55);
  --nwl-bg-input: transparent;
  --nwl-bg-overlay: var(--nwl-black-70);

  /* borders: dividers, controls and panels, push buttons */
  --nwl-border-subtle: var(--nwl-grey-55);
  --nwl-border: var(--nwl-grey-77);
  --nwl-border-strong: var(--nwl-grey-dd);

  /* text: main, secondary, muted or empty, placeholders, text on a light or accent background */
  --nwl-text: var(--nwl-white);
  --nwl-text-2: var(--nwl-white-75);
  --nwl-text-3: var(--nwl-white-40);
  --nwl-text-placeholder: var(--nwl-grey-cc);
  --nwl-text-inverse: var(--nwl-black);

  /* accent (selection, focus): the colour, hover or pressed, a tinted background, as text */
  --nwl-accent: var(--nwl-cyan);
  --nwl-accent-dim: var(--nwl-cyan-50);
  --nwl-accent-subtle: var(--nwl-cyan-15);
  --nwl-accent-fg: var(--nwl-cyan);

  /* keyboard focus outline (base.css, :focus-visible); white for now, may become the accent */
  --nwl-focus: var(--nwl-text);

  /* links and status colours */
  --nwl-link: var(--nwl-white);
  --nwl-link-hover: var(--nwl-white);
  --nwl-danger: var(--nwl-red);
  --nwl-success: var(--nwl-green);
  --nwl-warning: var(--nwl-amber);

  /* font families: the wordmark, everything else, data (file names, coordinates, IDs) */
  --nwl-font-display: Roboto, var(--nwl-sans-serif);
  --nwl-font-body: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, var(--nwl-sans-serif);
  --nwl-font-mono: var(--nwl-monospace);

  /* font sizes; the body text is --nwl-text-md */
  --nwl-text-xs: 11px;
  --nwl-text-sm: 12px;
  --nwl-text-base: 13px;
  --nwl-text-md: 14px;
  --nwl-text-lg: 16px;
  --nwl-text-xl: 22px;
  --nwl-text-2xl: 28px;
  --nwl-text-3xl: 36px;
  --nwl-text-hero: 60px;

  /* font weights; the wordmark is thin */
  --nwl-weight-thin: 100;
  --nwl-weight-light: 300;
  --nwl-weight-regular: 400;
  --nwl-weight-medium: 500;
  --nwl-weight-semibold: 600;
  --nwl-weight-bold: 700;

  /* line heights */
  --nwl-leading-tight: 1.2;
  --nwl-leading-snug: 1.35;
  --nwl-leading-normal: 1.5;
  --nwl-leading-relaxed: 1.65;

  /* spacing, on a 4px grid */
  --nwl-space-1: 4px;
  --nwl-space-2: 8px;
  --nwl-space-3: 12px;
  --nwl-space-4: 16px;
  --nwl-space-5: 20px;
  --nwl-space-6: 24px;
  --nwl-space-8: 32px;
  --nwl-space-10: 40px;
  --nwl-space-12: 48px;
  --nwl-space-16: 64px;

  /* corner radii: controls, push buttons, round buttons and dots */
  --nwl-radius-sm: 3px;
  --nwl-radius-md: 6px;
  --nwl-radius-round: 50%;

  /* shadows: floating tool palettes, menus */
  --nwl-shadow-sm: 2px 2px 5px var(--nwl-grey-80);
  --nwl-shadow-md: 0 4px 12px var(--nwl-black-70);
}