/*
  ProofRev design system tokens
  Source: Figma "ProofRev (Hand over)" — Colours / Gradients / Fonts / Components
  Extracted from the hand-over PDF export. Scales run 50 (lightest) -> 900 (darkest).
*/

:root {
  /* Turquoise — primary brand scale */
  --turquoise-900: #012D25;
  --turquoise-800: #045040;
  --turquoise-700: #03624C;
  --turquoise-600: #007C5F;
  --turquoise-500: #009B73;
  --turquoise-400: #2FD8A3;
  --turquoise-300: #6AEBBE;
  --turquoise-200: #A4F6D4;
  --turquoise-100: #D0FBE7;
  --turquoise-50:  #EBFEF6;

  /* Lime — light green accent scale */
  --lime-900: #172A09;
  --lime-800: #304D1A;
  --lime-700: #375A1A;
  --lime-600: #437219;
  --lime-500: #56951B;
  --lime-400: #9DDA5B;
  --lime-300: #AFE571;
  --lime-200: #CFF0A6;
  --lime-100: #E6F7D0;
  --lime-50:  #F4FCE9;

  /* Green — secondary green scale */
  --green-900: #092516;
  --green-800: #124228;
  --green-700: #14512E;
  --green-600: #176539;
  --green-500: #1D7E44;
  --green-400: #55BC79;
  --green-300: #82D39C;
  --green-200: #B3E7C0;
  --green-100: #D8F3DD;
  --green-50:  #EFFAF2;

  /* Neutral */
  --neutral-900: #000000;
  --neutral-800: #1A1A1A;
  --neutral-700: #292929;
  --neutral-600: #434343;
  --neutral-500: #575757;
  --neutral-400: #A5A5A5;
  --neutral-300: #D6D6D6;
  --neutral-200: #E6E6E6;
  --neutral-100: #F5F5F5;
  --neutral-50:  #FAFAFA;

  /* Blue */
  --blue-900: #122659;
  --blue-800: #153D93;
  --blue-700: #1243BB;
  --blue-600: #0D4EDA;
  --blue-500: #156AFB;
  --blue-400: #53AAFF;
  --blue-300: #8AC8FF;
  --blue-200: #BADCFF;
  --blue-100: #D8EBFF;
  --blue-50:  #EEF6FF;

  /* Red */
  --red-900: #440B0B;
  --red-800: #7E1E1E;
  --red-700: #981C1C;
  --red-600: #B71E1E;
  --red-500: #D22424;
  --red-400: #F77272;
  --red-300: #FBA6A6;
  --red-200: #FDCBCB;
  --red-100: #FEE2E2;
  --red-50:  #FEF2F2;

  /* Yellow */
  --yellow-900: #461902;
  --yellow-800: #7A330D;
  --yellow-700: #943D0C;
  --yellow-600: #B75006;
  --yellow-500: #DD7402;
  --yellow-400: #FFBD20;
  --yellow-300: #FFD044;
  --yellow-200: #FFE588;
  --yellow-100: #FFF3C6;
  --yellow-50:  #FFFBEB;

  /* Gradients */
  --gradient-1: linear-gradient(135deg, #037D5E 0%, #08F1B5 100%);
  --gradient-2: linear-gradient(135deg, #EEEEEE 0%, #E7E7E7 100%);
  --gradient-3: linear-gradient(135deg, #DCF2E7 0%, #EBF7DE 100%);
  --gradient-4: linear-gradient(135deg, #D0F9DD 0%, #CFF0A8 100%);
  --gradient-5: linear-gradient(135deg, #FFFFFF 0%, #E9F8EC 100%);

  /* Elevation */
  --shadow-1: 0 10px 30px rgba(3, 98, 76, 0.10);

  /* Typography */
  --font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-title-xl: 800 42px/1.15 var(--font-family);   /* Main Title 42pt ExtraBold */
  --text-title-lg: 800 36px/1.15 var(--font-family);   /* Main Title 36pt ExtraBold */
  --text-title-md: 700 28px/1.2  var(--font-family);   /* Main Title 28pt Bold */
  --text-title-sm: 700 18px/1.25 var(--font-family);   /* Main Title 18pt Bold */

  --text-body-lg-bold:     700 16px/1.5 var(--font-family);
  --text-body-lg-semibold: 600 16px/1.5 var(--font-family);
  --text-body-lg-medium:   500 16px/1.5 var(--font-family);
  --text-body-md-medium:   500 14px/1.5 var(--font-family);
  --text-body-sm-medium:   500 12px/1.5 var(--font-family);
}

/*
  Button states (Components > Buttons)
  Primary: default = turquoise-700, hover/pressed = turquoise-900, disabled = neutral-400 bg / neutral-50 text
  Secondary: default = white bg / neutral-400 border, hover = neutral-100 bg, disabled = neutral-400 bg
*/
.btn-primary { background: var(--turquoise-700); color: #fff; }
.btn-primary:hover { background: var(--turquoise-900); }
.btn-primary:disabled { background: var(--neutral-400); color: var(--neutral-50); }

.btn-secondary { background: #fff; color: var(--neutral-800); border: 1px solid var(--neutral-400); }
.btn-secondary:hover { background: var(--neutral-100); }
.btn-secondary:disabled { background: var(--neutral-400); color: var(--neutral-600); border-color: var(--neutral-400); }

/*
  Notification / badge variants (Components > Notification)
  success = green, error = red, warning = yellow, info = blue
  Pattern: 100-shade background, 500-shade text (info uses 700-shade text).
*/
.notice-success { background: var(--green-100);  color: var(--green-500); }
.notice-error   { background: var(--red-100);    color: var(--red-500); }
.notice-warning { background: var(--yellow-100); color: var(--yellow-500); }
.notice-info    { background: var(--blue-100);   color: var(--blue-700); }