/* Axlund design language: app tokens.
   The values come from Design Profile 4.2 in profile/tokens.css, which every
   app loads first. This file only gives app components the names they use
   (panel, raised, hover, control sizes and so on) and points each one at a
   4.2 token, so a color is set in one place. Forms are white: set
   data-theme="light" on <html>. */

:root {
  /* Surfaces, back to front */
  --panel: var(--surface-raised);
  --raised: var(--surface);
  --hover: var(--surface);
  --pressed: var(--tint);

  /* Lines: hairlines, control borders, hovered control borders */
  --line-heavy: var(--ink-muted);

  /* The one accent */
  --accent-hover: var(--action-strong);
  --accent-tint: var(--tint);
  --on-accent: var(--on-action);

  /* The main website button is the accent too: one primary per view */
  --invert: var(--action);
  --invert-hover: var(--action-strong);
  --on-invert: var(--on-action);

  /* Meaning */
  --green: var(--light-green);

  /* Type: Manrope, sizes from the profile's type styles */
  --font-features: normal;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 700;
  --weight-bold: 800;

  --text-tiny: 11px;
  --text-micro: 12px;     /* labels */
  --text-mini: 13px;      /* captions, help */
  --text-small: 14px;     /* body-sm: the app default */
  --text-regular: 16px;   /* body */
  --text-large: 18px;     /* lede */

  --title-1: 15px;        /* h4 */
  --title-2: 18px;        /* h3 */
  --title-3: 24px;        /* h2 */
  --title-4: 32px;
  --title-5: 40px;        /* headline */
  --title-6: 48px;
  --title-7: 56px;
  --title-8: 64px;        /* display */
  --tracking-title: -0.02em;

  /* Shape: sharp where you read, soft where you touch */
  --radius: var(--radius-sm);
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;

  /* Depth: lines, not shadows; only menus float */
  --shadow-tiny: none;
  --shadow-low: none;
  --shadow-medium: var(--shadow-pop);
  --shadow-high: var(--shadow-pop);
  --ring: var(--focus-ring);

  /* Size */
  --control: var(--control-md);
  --tap: 44px;
  --app-bar: 64px;
  --site-bar: 72px;
  --page-wide: 1344px;

  /* Motion */
  --ease-out: ease-out;
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --fast: 150ms;
  --base: 180ms;
  --slow: 200ms;
}