/* Saffire - Spark - CSS Variables */

:root {
  /* ----- Primitive Tokens ----- */
  /* ---------------------------- */

  /* Layout */
  --sf-layout-default-width: 1200px;
  --sf-layout-default-padding: 1.5rem;

  /* Typography */
  --sf-font-family-default: 'open_sansregular', sans-serif;
  --sf-font-family-default-medium: 'open_sanssemibold', sans-serif;
  --sf-font-family-default-bold: 'open_sansbold', sans-serif;
  --sf-font-family-heading: 'open_sansregular', sans-serif;

  /* Font Weights */
  --sf-font-weight-regular: 400;
  --sf-font-weight-medium: 600;
  --sf-font-weight-bold: 700;        
  
  /* Font Sizes (16px base = 1rem) */
  --sf-font-size-xs: 0.625rem; /* 10px */
  --sf-font-size-sm: 0.688rem; /* 11px */
  --sf-font-size-md: 0.813rem; /* 13px */
  --sf-font-size-lg: 1rem;     /* 16px */
  --sf-font-size-xl: 1.125rem; /* 18px */
  --sf-font-size-2xl: 1.5rem;  /* 24px */
  --sf-font-size-3xl: 2rem;    /* 32px */

  /* Line Heights - Size-paired */
  --sf-line-height-xs: 1.4;
  --sf-line-height-sm: 1.3;
  --sf-line-height-md: 1.4;
  --sf-line-height-lg: 1.5;
  --sf-line-height-xl: 1.4; 
  --sf-line-height-2xl: 1.3;
  --sf-line-height-3xl: 1.2;

  /* UI Component Line Heights */
  --sf-control-line-height-sm: 1rem;
  --sf-control-line-height-md: 1.25rem;
  --sf-control-line-height-lg: 1.5rem;  

  /* Line Heights - Utility / Density */
  --sf-line-height-none: 1;    

   /* Radii scale */
  --sf-radius-none: 0;
  --sf-radius-xs: 1px;
  --sf-radius-sm: 2px;
  --sf-radius-md: 4px;
  --sf-radius-lg: 8px;
  --sf-radius-xl: 12px;
  --sf-radius-2xl: 16px;
  --sf-radius-3xl: 24px;
  --sf-radius-full: 9999px;

  /* Border width */
  --sf-border-width-thin: 1px;
  --sf-border-width-medium: 2px;
  --sf-border-width-thick: 4px;

  /* Spacing Scale */
  --sf-spacing-0: 0;        /* 0px */
  --sf-spacing-1: 0.125rem; /* 2px */
  --sf-spacing-2: 0.25rem;  /* 4px */
  --sf-spacing-3: 0.5rem;   /* 8px */
  --sf-spacing-4: 0.75rem;  /* 12px */
  --sf-spacing-5: 1rem;     /* 16px */
  --sf-spacing-6: 1.5rem;   /* 24px */
  --sf-spacing-7: 2rem;     /* 32px */
  --sf-spacing-8: 2.5rem;   /* 40px */
  --sf-spacing-9: 3rem;     /* 48px */
  --sf-spacing-10: 4rem;    /* 64px */
  --sf-spacing-11: 5rem;    /* 80px */
  --sf-spacing-12: 6rem;    /* 96px */
  --sf-spacing-13: 8rem;    /* 128px */
  --sf-spacing-14: 10rem;   /* 160px */
  --sf-spacing-15: 12rem;   /* 192px */  

  /* Box Shadows */
  --sf-elevation-shadow-color: rgb(0 28 51 / 10%); /* blue-700 */
  --sf-elevation-50: inset 0 0 8px 0 var(--sf-elevation-shadow-color);
  --sf-elevation-100: 0 1px 1px 0 var(--sf-elevation-shadow-color), 
                      0 2px 2px 0 var(--sf-elevation-shadow-color);
  --sf-elevation-200: 0 2px 4px 0 var(--sf-elevation-shadow-color),
                      0 4px 8px 0 var(--sf-elevation-shadow-color),
                      0 8px 16px 0 var(--sf-elevation-shadow-color);
  --sf-elevation-300: 0 2px 4px 0 var(--sf-elevation-shadow-color),
                      0 4px 8px 0 var(--sf-elevation-shadow-color),
                      0 8px 16px 0 var(--sf-elevation-shadow-color),
                      0 16px 24px 0 var(--sf-elevation-shadow-color);
  --sf-elevation-400: 0 2px 4px 0 var(--sf-elevation-shadow-color),
                      0 4px 8px 0 var(--sf-elevation-shadow-color),
                      0 8px 16px 0 var(--sf-elevation-shadow-color),
                      0 16px 24px 0 var(--sf-elevation-shadow-color),
                      0 32px 32px 0 var(--sf-elevation-shadow-color);    

  /* Color Palette */
  /* grey */
  --sf-color-grey-50: #f5f7f9;
  --sf-color-grey-100: #e6ebef;
  --sf-color-grey-200: #d0d7df;
  --sf-color-grey-300: #b6c1cb;
  --sf-color-grey-400: #8c9aab;
  --sf-color-grey-500: #667685;
  --sf-color-grey-600: #525e6c;
  --sf-color-grey-700: #3e4855;
  --sf-color-grey-800: #2b323e;
  --sf-color-grey-900: #171b26;
  --sf-color-grey-950: #101828;

  /* blue */
  --sf-color-blue-50: #E5F0F8;
  --sf-color-blue-100: #D3E5F5;
  --sf-color-blue-200: #A8CBEB;
  --sf-color-blue-300: #7CB0E0;
  --sf-color-blue-400: #4D96D4;
  --sf-color-blue-500: #007bc7; /* Saffire Blue */
  --sf-color-blue-600: #0062A1;
  --sf-color-blue-700: #004b7c;
  --sf-color-blue-800: #003457;
  --sf-color-blue-900: #001C33;
  --sf-color-blue-950: #000A17;  

  /* green 1 */
  --sf-color-green-50: #F7FBEF;
  --sf-color-green-100: #EBF5D8;
  --sf-color-green-500: #9CCC3C;
  --sf-color-green-600: #72A300;
  --sf-color-green-700: #5E7A24;

  /* red */
  --sf-color-red-500: red;
  --sf-color-red-600: #AA0E20;

  /* orange */
  --sf-color-orange-500: #ff7814;    

  /* ----- Semantic Tokens ----- */
  /* --------------------------- */
  
  /* Modals */
  --sf-modal-backdrop-background: rgb(255 255 255 / 75%);

  /* AI Suggestion UI */
  --sf-color-ai-card-border: var(--sf-color-green-500);
  --sf-color-ai-card-surface: var(--sf-color-green-50);
  --sf-color-ai-card-suggestion-background: var(--sf-color-green-100);
  --sf-color-ai-card-thumbs-up: var(--sf-color-green-700);
  --sf-color-ai-card-thumbs-down: var(--sf-color-red-600);
  --sf-color-ai-card-button-text: #fff;
  --sf-color-ai-card-button-background: var(--sf-color-green-700);
  --sf-color-ai-card-heading-text: var(--sf-color-green-700);
  --sf-color-ai-card-content-text: #000;
  --sf-color-ai-card-content-accent-dark: var(--sf-color-green-700);
  --sf-color-ai-card-note-text: var(--sf-color-green-700);
  --sf-color-ai-toolbar-button-background: var(--sf-color-green-600);
}