/* Divvy design tokens. Single source of truth for the extension popup,
   the on-page area picker, the Figma plugin UI and the website.
   Import this file everywhere. Never hardcode a hex value in a component. */

:root {
  /* Color: brand */
  --dv-mint: #A8E8CC;        /* Hop, primary buttons */
  --dv-mint-deep: #7FD3AF;   /* Hop's brackets, progress bars, focus ring */
  --dv-mint-tint: #E3F6EC;   /* selected states, success */
  --dv-forest: #1F5C47;      /* logo tile, width chips, text on mint */
  --dv-forest-ink: #123B2E;  /* dark sections, text on mint buttons */
  --dv-forest-line: #1D4A3A; /* background pattern on dark */

  /* Color: neutrals */
  --dv-ink: #18211D;         /* headings and body text */
  --dv-ink-2: #3D4843;       /* small text that must stay readable */
  --dv-slate: #5A6660;       /* secondary text (15px and up only) */
  --dv-paper: #FBF8F3;       /* page background */
  --dv-board: #F1EDE4;       /* canvas, segmented control track */
  --dv-surface: #F7F5F0;     /* soft rows, site row */
  --dv-surface-2: #F4F1EA;   /* secondary button */
  --dv-line: #E8E3D8;        /* 1px borders */
  --dv-white: #FFFFFF;

  /* Color: accents (use sparingly) */
  --dv-blush: #F2B6C2;       /* Hop's cheeks only */
  --dv-butter: #F5C95A;      /* warnings */
  --dv-warn-bg: #FDF3D6;
  --dv-warn-text: #6B4E05;
  --dv-coral: #F08A6C;       /* errors */

  /* Color: UI details (values taken from design/boards) */
  --dv-on-mint: #14402F;     /* text on mint buttons */
  --dv-line-dashed: #C9C2B2; /* dashed add chip, step number circle */
  --dv-disabled-line: #D3CCBD; /* dashed border of a disabled width chip */
  --dv-disabled-text: #8A938E; /* struck-through width that is too wide */
  --dv-mint-wash: #F7FCF9;   /* drop zone when the plugin is not focused */
  --dv-mint-strong: #3FAE87; /* area picker hover outline and handles */
  --dv-ink-line: #3A453F;    /* dividers and key borders on ink */
  --dv-scrim: rgba(24, 33, 29, 0.35);      /* area picker dims the page */
  --dv-mint-glow: rgba(168, 232, 204, 0.18); /* area picker hover fill */

  /* Type */
  --dv-font: "Figtree", system-ui, sans-serif;
  --dv-mono: "Fragment Mono", ui-monospace, monospace;
  --dv-tight: -0.02em;       /* headings */

  /* Radius */
  --dv-r-key: 8px;
  --dv-r-control: 12px;
  --dv-r-card: 16px;
  --dv-r-pill: 999px;

  /* Space: 4px grid */
  --dv-s1: 4px;
  --dv-s2: 8px;
  --dv-s3: 12px;
  --dv-s4: 16px;
  --dv-s5: 24px;
  --dv-s6: 32px;
}