/*
 * Design tokens. Every colour, size, radius, shadow and timing used by the other
 * stylesheets is defined here, so the look can change in one place.
 */
:root {
  /* Colour: brand */
  --color-primary: #2F5BEA;          /* Buttons, links, active states */
  --color-primary-hover: #2449C8;    /* Hover on primary */
  --color-primary-soft: #E8EEFF;     /* Active nav item, soft fills, icon tiles */
  --color-primary-light: #7FA3FF;    /* Secondary chart and accent blue */

  /* Colour: decorative tints for blobs and illustrations, never behind text */
  --color-primary-tint: #DCE4FF;
  --color-purple-tint: #E2DDF9;

  /* Colour: text */
  --color-ink: #0F1B4C;              /* Headings and strong text */
  --color-text: #3B4566;             /* Body text */
  --color-muted: #676F8A;            /* Secondary text, placeholders. Darker than the original #8891AD so it passes WCAG AA on --color-bg */
  --color-on-primary: #FFFFFF;       /* Text and icons on a primary fill */

  /* Colour: surfaces */
  --color-bg: #F4F6FD;               /* Page background */
  --color-surface: #FFFFFF;          /* Cards, panels, inputs */
  --color-border: #E6EAF5;           /* Card and input borders */
  --color-overlay: rgba(15, 27, 76, 0.4); /* Modal backdrop: ink at 40% */

  /*
   * Colour: status. Use the base colour for fills, icons, pins and dots.
   * The base colours are too light for text, so text uses the -text shade,
   * which passes WCAG AA on white, on --color-bg and on its own soft fill.
   */
  --color-success: #34C77B;          /* Approved, resolved, online */
  --color-success-soft: #E6F8EF;     /* Success badge fill */
  --color-success-text: #037F49;
  --color-on-success: #0B3D22;       /* Text on a --color-success fill (5.6:1) */
  --color-warning: #F5A524;          /* Changes requested, medium */
  --color-warning-soft: #FFF4DE;     /* Warning badge fill */
  --color-warning-text: #996301;
  --color-danger: #EF4D5A;           /* Errors, destructive actions */
  --color-danger-soft: #FDEBED;      /* Danger badge fill */
  --color-danger-text: #CC283E;      /* Also the fill of danger buttons, behind white text (5.3:1) */
  --color-danger-hover: #A81F31;     /* Hover on a danger button (7.2:1 with white) */
  --color-purple: #8B5CF6;           /* Fourth accent, reviewer colour */
  --color-purple-soft: #F0EAFE;      /* Purple badge fill */
  --color-purple-text: #7B48E2;

  /* Hero accent and promo panels. White text passes WCAG AA across it. */
  --gradient-accent: linear-gradient(135deg, #4F6BF2 0%, #2F5BEA 100%);

  /* Reviewer pin colours, assigned in this order (api/_lib/comments.js gives them out). Numbers on
     pins 1 and 4 are white, on the others --color-ink, which keeps each at AA. Pin 4 is the purple
     text shade: on --color-purple neither white (4.2:1) nor ink (3.9:1) is readable. */
  --color-pin-1: #2F5BEA;
  --color-pin-2: #34C77B;
  --color-pin-3: #F5A524;
  --color-pin-4: #7B48E2;
  --color-pin-5: #EF4D5A;
  --color-pin-6: #14B8C4;

  /* Type */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px: small uppercase labels, badges */
  --text-sm: 0.875rem;    /* 14px: body inside the app */
  --text-md: 1rem;        /* 16px: body on marketing pages */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3.5rem;     /* 56px: hero headline */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-display: 1.08; /* Hero headline */
  --leading-tight: 1.15;  /* Headings, badges */
  --leading-normal: 1.5;  /* Body */

  --tracking-tight: -0.02em;  /* Headings */
  --tracking-caps: 0.2em;     /* Small uppercase labels */

  /* Shape */
  --radius-xs: 6px;       /* Badges */
  --radius-sm: 8px;       /* Inputs, small buttons */
  --radius-md: 12px;      /* Buttons, icon tiles, toasts */
  --radius-lg: 16px;      /* Cards */
  --radius-xl: 24px;      /* Large panels, modals */
  --radius-pill: 999px;

  --border: 1px solid var(--color-border);

  /* Depth */
  --shadow-card: 0 4px 20px rgba(47, 91, 234, 0.06);
  --shadow-raised: 0 12px 40px rgba(15, 27, 76, 0.12);   /* Modals, menus, toasts */
  --shadow-featured: 0 12px 40px rgba(47, 91, 234, 0.16); /* The highlighted pricing plan */

  /* Focus */
  --focus-outline: 2px solid var(--color-primary);       /* Buttons, links, nav items */
  --focus-offset: 2px;
  --focus-ring: 0 0 0 3px rgba(47, 91, 234, 0.15);       /* Inputs */
  --focus-ring-danger: 0 0 0 3px rgba(239, 77, 90, 0.15); /* Inputs with an error */
  --ring-surface: 0 0 0 2px var(--color-surface);          /* Sets a small badge apart from the icon it sits on */
  --drop-outline: 2px dashed var(--color-primary);         /* An area that files are being dragged over */

  /* Spacing scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Sizes */
  --control-height-lg: 52px;  /* Large buttons on marketing pages */
  --control-height: 44px;     /* Buttons, inputs, nav items */
  --control-height-sm: 36px;  /* Small and icon-only buttons */
  --logo-size: 36px;
  --icon-tile-size: 40px;
  --icon-size: 20px;
  --icon-size-sm: 16px;
  --icon-size-xs: 12px;       /* The arrow in the version button */
  --icon-stroke: 1.75;
  --container-max: 1168px;    /* 1120px of content plus the 24px gutters */
  --sidebar-width: 256px;
  --thumbnail-strip-width: 168px; /* PDF page thumbnails beside the file viewer */
  --review-panel-width: 320px;    /* Comment panel beside the design, from 1024px */
  --review-sheet-height: 50vh;    /* The comment panel's open height as a bottom sheet */
  --pin-size: 28px;               /* A numbered comment pin on the design */
  --popover-width: 288px;         /* The form for a new comment, beside its pin */
  --form-width: 440px;        /* Login and sign-up cards */
  --text-width: 720px;        /* A readable column on plain text pages */
  --member-name-min: 144px;   /* The least room the name and email get on the Team page, from 768px */
  --menu-width: 240px;
  --version-menu-width: 272px;    /* The version list in the review top bar */
  --version-list-height: 40vh;    /* The most the version list shows before it scrolls */
  --thumb-shape: 4 / 3;           /* The frame every file thumbnail sits in */
  --file-thumb-width: 56px;       /* A thumbnail in the file list */
  --file-card-min: 148px;         /* The narrowest a file card gets: two to a line at 360px */
  --file-card-min-wide: 208px;    /* The same, from 640px */
  --search-height: 40px;          /* The search box in the top bar */
  --search-width: 280px;
  --search-results-width: 400px;
  --search-results-height: 70vh;  /* The most the search results show before they scroll */
  --bottom-nav-height: 84px;      /* Room the page leaves for the bar of links along the bottom on phones */
  --bottom-nav-item-max: 96px;    /* The widest one link in that bar gets */
  --modal-width: 480px;
  --viewer-logo-height: 20px;     /* A workspace's logo in the top bar of a share link, on a phone */
  --viewer-logo-width: 72px;      /* The widest that logo gets there */
  --viewer-logo-height-wide: 32px; /* The same two, from 640px */
  --viewer-logo-width-wide: 160px;
  --logo-preview-height: 120px;   /* The box on the Settings page that shows the logo */
  --logo-preview-image: 64px;     /* The tallest the logo is drawn in that box */
  --bell-count-size: 18px;        /* The unread count on the bell in the top bar */
  --bell-dot-size: 8px;           /* The mark on a notification that has not been read */
  --bell-panel-width: 384px;      /* The list of notifications under the bell, from 640px */
  --bell-list-height: 60vh;       /* The most that list shows before it scrolls */
  --switch-width: 44px;           /* An on/off switch, as on the Settings page */
  --switch-height: 24px;
  --switch-thumb: 20px;           /* The round handle inside it */
  --toast-width: 400px;
  --section-fade: 140px;      /* Marketing sections fade between bg and surface over this distance */

  /* Motion: transitions (hover, state changes) stay between 150 and 200ms. Entrances, where
     something fades or rises into place once, may take up to --duration-enter. */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-enter: 600ms;
  --duration-spin: 800ms;     /* One turn of a loading spinner */
  --stagger: 80ms;            /* Gap between items that enter one after another */
  --lift: 1px;                /* How far buttons rise on hover */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* Layers */
  --z-toast: 1000;
}