@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/*
  DESIGN TOKENS — Woodruff Sawyer Connect Design Library
  Source of truth: Figma file wL7QECmQdxvY6IROeDPVlS (accessed 2026-07-29)
  All hex values verified directly from Figma metadata / text nodes.
*/

:root {
  /* ====================================================================
     WS BRAND — Primary palette
     ==================================================================== */
  --ws-green-01: #319B42;   /* WS Green 01 — primary action */
  --ws-green-02: #78BE20;   /* WS Green 02 — lighter accent green */
  --ws-dark-01:  #1F2A44;   /* WS Dark 01 — dark nav / surface */

  /* ====================================================================
     DARK NAVY SCALE — tints of WS Dark 01 (#1F2A44)
     Used for topbar, sidebar backgrounds and deep surfaces
     ==================================================================== */
  --navy-50:   #EDF0F7;
  --navy-100:  #D0D7E9;
  --navy-200:  #A8B4D3;
  --navy-300:  #7B8FBC;
  --navy-400:  #4E69A5;
  --navy-500:  #2B4B8E;
  --navy-600:  #1F2A44;   /* = ws-dark-01 */
  --navy-700:  #172033;
  --navy-800:  #111826;
  --navy-900:  #0C1019;
  --navy-950:  #07090D;

  /* ====================================================================
     SECONDARY TEAL SCALE — tints of Secondary 04 (#34657F)
     Used for accent buttons and secondary brand expression
     ==================================================================== */
  --gold-50:   #EEF4F8;
  --gold-100:  #D2E4EE;
  --gold-200:  #A8CADE;
  --gold-300:  #6DAFC4;
  --gold-400:  #34657F;   /* exact from Figma — secondary brand */
  --gold-500:  #2A5268;
  --gold-600:  #214051;
  --gold-700:  #182F3B;
  --gold-800:  #0E1F27;
  --gold-900:  #071014;

  /* ====================================================================
     GREEN SCALE — tints of WS Green 01 (#319B42)
     Used for primary actions, interactive states, success semantics
     ==================================================================== */
  --green-50:   #E8F5EB;
  --green-100:  #C3E4CA;
  --green-200:  #9AD3A6;
  --green-300:  #6BBF7D;
  --green-400:  #4EAD62;
  --green-500:  #319B42;   /* = ws-green-01 */
  --green-600:  #2A8439;
  --green-700:  #1F6128;
  --green-800:  #154420;
  --green-900:  #0D2A14;

  /* ====================================================================
     AMBER / WARNING SCALE
     ==================================================================== */
  --amber-50:   #FFF8E0;
  --amber-100:  #FFEDB3;
  --amber-200:  #FFE080;
  --amber-300:  #FFD24D;
  --amber-400:  #FFC61F;
  --amber-500:  #FFB900;   /* exact from Figma — warning primary */
  --amber-600:  #CC9400;
  --amber-700:  #7A5800;
  --amber-800:  #4A3500;
  --amber-900:  #1F1700;

  /* ====================================================================
     RED / ALERT SCALE
     ==================================================================== */
  --red-50:   #FDEAEA;
  --red-100:  #F9BDBD;
  --red-200:  #F49090;
  --red-300:  #EF6060;
  --red-400:  #E94444;
  --red-500:  #DB3131;   /* exact from Figma — alert primary */
  --red-600:  #B52828;
  --red-700:  #8B1A1A;
  --red-800:  #631212;
  --red-900:  #3C0909;

  /* ====================================================================
     BLUE / INFO SCALE
     ==================================================================== */
  --blue-50:   #E8F3FC;
  --blue-100:  #C3DFF8;
  --blue-200:  #8EC8EE;
  --blue-300:  #5AB1E4;
  --blue-400:  #2E96D9;
  --blue-500:  #2E7EC9;
  --blue-600:  #245FA8;
  --blue-700:  #0D4B7A;
  --blue-800:  #083657;
  --blue-900:  #042035;

  /* ====================================================================
     NEUTRALS — exact from Figma Figma Color page
     Black 100 → White, verified from metadata text nodes
     ==================================================================== */
  --gray-0:    #FFFFFF;
  --gray-50:   #F8F8F8;   /* Grey 10 */
  --gray-100:  #F2F2F2;   /* Grey 20 */
  --gray-200:  #E8E8EA;   /* Grey 30 */
  --gray-300:  #D3D3DB;   /* Grey 40 */
  --gray-400:  #A5A8B4;   /* Grey 50 */
  --gray-500:  #82828F;   /* Grey 60 */
  --gray-600:  #585A66;   /* Grey 70 */
  --gray-700:  #313340;   /* Grey 80 */
  --gray-800:  #050A1E;   /* Grey 90 */
  --gray-900:  #0A0A18;   /* Black 100 */
  --gray-1000: #0A0A18;

  /* ====================================================================
     SEMANTIC ALIASES — Light Theme
     Components consume only these aliases, never raw palette values
     ==================================================================== */

  /* Backgrounds */
  --color-bg-canvas:         var(--gray-50);
  --color-bg-surface:        var(--gray-0);
  --color-bg-surface-raised: var(--gray-0);
  --color-bg-subtle:         var(--gray-100);
  --color-bg-inverse:        var(--ws-dark-01);
  --color-bg-brand:          var(--ws-green-01);    /* primary action — buttons, checkboxes */
  --color-bg-brand-hover:    var(--green-600);      /* darker green on hover */
  --color-bg-accent:         var(--ws-green-02);    /* lighter green accent */

  /* Borders */
  --color-border-subtle:     var(--gray-200);
  --color-border-default:    var(--gray-300);
  --color-border-strong:     var(--gray-500);
  --color-border-focus:      var(--ws-green-01);

  /* Text */
  --color-text-primary:      var(--gray-900);
  --color-text-secondary:    var(--gray-600);
  --color-text-disabled:     var(--gray-400);
  --color-text-inverse:      var(--gray-0);
  --color-text-brand:        var(--ws-green-01);
  --color-text-link:         var(--ws-green-01);
  --color-text-link-hover:   var(--green-600);

  /* Status — Success */
  --color-success-bg:        var(--green-50);
  --color-success-text:      var(--green-700);
  --color-success-border:    var(--green-500);
  --color-success-solid:     var(--green-500);

  /* Status — Warning */
  --color-warning-bg:        var(--amber-50);
  --color-warning-text:      var(--amber-700);
  --color-warning-border:    var(--amber-500);
  --color-warning-solid:     var(--amber-500);

  /* Status — Danger */
  --color-danger-bg:         var(--red-50);
  --color-danger-text:       var(--red-700);
  --color-danger-border:     var(--red-500);
  --color-danger-solid:      var(--red-500);

  /* Status — Info */
  --color-info-bg:           var(--blue-50);
  --color-info-text:         var(--blue-700);
  --color-info-border:       var(--blue-500);
  --color-info-solid:        var(--blue-500);

  --color-focus-ring:        var(--ws-green-01);
  --color-overlay-scrim:     rgba(31, 42, 68, 0.56);

  /* ====================================================================
     TYPOGRAPHY — Open Sans, Figma type scale (exact px)
     ==================================================================== */
  --font-sans: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "IBM Plex Mono", Menlo, Consolas, monospace;

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

  /* Display (hero / marketing) */
  --fs-display: 48px;  --lh-display: 52px;

  /* Heading scale */
  --fs-h1: 36px;  --lh-h1: 36px;
  --fs-h2: 32px;  --lh-h2: 32px;
  --fs-h3: 28px;  --lh-h3: 28px;
  --fs-h4: 24px;  --lh-h4: 24px;
  --fs-h5: 20px;  --lh-h5: 28px;   /* maps to XL Text */

  /* Body scale */
  --fs-body-lg: 18px;  --lh-body-lg: 24px;   /* Lg Text */
  --fs-body-md: 16px;  --lh-body-md: 20px;   /* Default Text */
  --fs-body-sm: 14px;  --lh-body-sm: 18px;   /* Sm Text */
  --fs-caption: 12px;  --lh-caption: 16px;   /* Xs Text */
  --fs-2xs:     10px;  --lh-2xs:     14px;   /* 2Xs Text */

  /* Figma-named aliases */
  --fs-xl:   20px;  --lh-xl:   28px;
  --fs-lg:   18px;  --lh-lg:   24px;
  --fs-body: 16px;  --lh-body: 20px;
  --fs-sm:   14px;  --lh-sm:   18px;
  --fs-xs:   12px;  --lh-xs:   16px;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;

  /* ====================================================================
     SPACING — 4 / 8px grid
     ==================================================================== */
  --space-2:   2px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-128: 128px;

  /* ====================================================================
     RADIUS
     ==================================================================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ====================================================================
     ELEVATION — shadows use WS Dark 01 as base color
     ==================================================================== */
  --shadow-100: 0 1px 2px rgba(31, 42, 68, 0.06), 0 1px 1px rgba(31, 42, 68, 0.04);
  --shadow-200: 0 2px 6px rgba(31, 42, 68, 0.08), 0 1px 2px rgba(31, 42, 68, 0.06);
  --shadow-300: 0 8px 20px rgba(31, 42, 68, 0.12), 0 2px 6px rgba(31, 42, 68, 0.06);
  --shadow-400: 0 20px 40px rgba(31, 42, 68, 0.18), 0 4px 12px rgba(31, 42, 68, 0.08);

  /* ====================================================================
     MOTION
     ==================================================================== */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);

  /* ====================================================================
     Z-INDEX SCALE
     ==================================================================== */
  --z-sticky:   100;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ====================================================================
     BREAKPOINTS (reference only — use via media queries, not var())
     ==================================================================== */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

/* ====================================================================
   DARK THEME OVERRIDES
   ==================================================================== */
:root[data-theme="dark"] {
  --color-bg-canvas:         var(--gray-900);
  --color-bg-surface:        var(--gray-800);
  --color-bg-surface-raised: var(--gray-700);
  --color-bg-subtle:         var(--gray-700);
  --color-bg-inverse:        var(--gray-0);
  --color-bg-brand:          var(--ws-green-01);
  --color-bg-brand-hover:    var(--green-600);
  --color-bg-accent:         var(--ws-green-02);

  --color-border-subtle:     var(--gray-700);
  --color-border-default:    var(--gray-600);
  --color-border-strong:     var(--gray-500);
  --color-border-focus:      var(--ws-green-02);

  --color-text-primary:      var(--gray-50);
  --color-text-secondary:    var(--gray-400);
  --color-text-disabled:     var(--gray-600);
  --color-text-inverse:      var(--gray-900);
  --color-text-brand:        var(--ws-green-02);
  --color-text-link:         var(--ws-green-02);
  --color-text-link-hover:   var(--ws-green-01);

  --color-success-bg:        rgba(49, 155, 66, 0.14);
  --color-warning-bg:        rgba(255, 185, 0, 0.14);
  --color-danger-bg:         rgba(219, 49, 49, 0.14);
  --color-info-bg:           rgba(46, 126, 201, 0.14);

  --color-overlay-scrim:     rgba(0, 0, 0, 0.64);
}