/* Defcon PM kit — design tokens.
   Generated from the Figma variable set + the Controls:states frames.
   Source: tokens/tokens.json. Figma is not needed to use this. */

:root {
  /* ── primitive colour ramps ── */
  --color-grey-25: #fbfbfc;
  --color-grey-50: #f8f8fa;
  --color-grey-100: #f3f4f6;
  --color-grey-200: #f1f2f4;
  --color-grey-300: #ecedf0;
  --color-grey-400: #e2e4e9;
  --color-grey-500: #d3d6dd;
  --color-grey-600: #8f929c;
  --color-grey-700: #74798b;
  --color-grey-800: #4a4d59;
  --color-grey-900: #25272d;
  --color-white: #ffffff;
  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #f59999;
  --color-red-300: #ed7172;
  --color-red-400: #f74f4d;
  --color-red-500: #fc3b31;
  --color-red-600: #ee3131;
  --color-red-700: #dc252b;
  --color-red-800: #cf1d24;
  --color-red-900: #c10616;
  --color-blue-50: #e6f2fe;
  --color-blue-100: #c5defe;
  --color-blue-200: #a2cafd;
  --color-blue-300: #82b5fa;
  --color-blue-400: #70a5f8;
  --color-blue-500: #6696f5;
  --color-blue-600: #6287e6;
  --color-blue-700: #5b75d2;
  --color-blue-800: #5564bf;
  --color-blue-900: #4656b9;
  --color-green-50: #e4f7eb;
  --color-green-100: #beebcd;
  --color-green-200: #92dead;
  --color-green-300: #5fd28c;
  --color-green-400: #28c772;
  --color-green-500: #00bc58;
  --color-green-600: #00ad4e;
  --color-green-700: #009942;
  --color-green-800: #008539;
  --color-green-900: #008539;
  --color-yellow-50: #fffde7;
  --color-yellow-100: #fff9c4;
  --color-yellow-200: #fff59d;
  --color-yellow-300: #fff176;
  --color-yellow-400: #ffee58;
  --color-yellow-500: #ffeb3b;
  --color-yellow-600: #fdd835;
  --color-yellow-700: #fbc02d;
  --color-yellow-800: #f9a825;
  --color-yellow-900: #f57f17;
  --color-orange-50: #fff3e0;
  --color-orange-100: #ffe0b2;
  --color-orange-200: #ffcd80;
  --color-orange-300: #ffb84d;
  --color-orange-400: #ffa826;
  --color-orange-500: #ff9800;
  --color-orange-600: #fb8d00;
  --color-orange-700: #f57d00;
  --color-orange-800: #ef6d00;
  --color-orange-900: #e65200;
  --color-teal-50: #e0f2f1;
  --color-teal-300: #4db6ac;
  --color-teal-600: #008f80;

  /* ── semantic colour ── */
  --bg-primary: #ffffff;
  --bg-secondary: #fbfbfc;
  --bg-tertiary: #f3f4f6;
  --bg-tertiary_hover: #ecedf0;
  --bg-primary_hover: #f8f8fa;
  --text-primary: #25272d;
  --text-secondary: #4a4d59;
  --text-tertiary: #8f929c;
  --text-placeholder: #d3d6dd;
  --text-white: #ffffff;
  --text-brand: #5b75d2;
  --text-error: #ee3131;
  --text-success: #008539;
  --icon-primary: #74798b;
  --icon-secondary: #8f929c;
  --icon-white: #ffffff;
  --border-primary: #e2e4e9;
  --border-secondary: #ecedf0;
  --border-quartiary: #74798b;
  --border-brand: #70a5f8;
  --border-inverse: #ffffff;
  --border-primary_hover: #d3d6dd;
  --border-error: #f59999;
  --border-focus: #82b5fa;

  --button-primary-bg: #6696f5;
  --button-primary-border: #6696f5;
  --button-primary-bg-hover: #6287e6;
  --button-primary-bg-pressed: #5b75d2;
  --button-secondary-bg: #ffffff;
  --button-secondary-border: #e2e4e9;

  /* ── typography ── */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-header-h1: 500 32px/44px var(--font-family);
  --font-header-h2: 500 28px/36px var(--font-family);
  --font-header-h3: 500 24px/32px var(--font-family);
  --font-header-h4: 500 18px/24px var(--font-family);
  --font-text-lg-medium: 500 16px/24px var(--font-family);
  --font-text-lg-regular: 400 16px/24px var(--font-family);
  --font-text-lg-semi-bold: 600 16px/24px var(--font-family);
  --font-text-md-medium: 500 14px/22px var(--font-family);
  --font-text-md-regular: 400 14px/22px var(--font-family);
  --font-text-sm-medium: 500 12px/18px var(--font-family);
  --font-text-sm-regular: 400 12px/18px var(--font-family);
  --font-text-13-medium: 500 13px/22px var(--font-family);

  /* ── shadows ── */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.07);
  --shadow-md: 0 0 6px 0 rgba(0,0,0,0.10);
  --shadow-lg: 0 1px 10px 0 rgba(0,0,0,0.10);
  --shadow-xl: 0 3px 16px 0 rgba(0,0,0,0.10);

  /* ── layout constants (as drawn) ── */
  --sidebar-width: 280px;
  --page-header-height: 56px;
  --toolbar-height: 36px;
  --board-column-width: 280px;
  --detail-width: 480px;      /* doctrine: ~1/3 of a 1440 page */
  --doc-content-width: 1001px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-20: 80px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-badge: 12px;
  --radius-pill: 100px;
}