@import "/modern-normalize.css"; /* Normalize CSS */
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  --color-darkest: #0e0f0a;
  --color-dark: #0e0f0a;
  --color-medium-dark: #656565;
  --color-medium: #858585;
  --color-medium-light: #c8c8c8;
  --color-light: #f8f7f0;
  --color-lightest: #fdfdfd;

  --color-gray-10: #d3d3d3;

  --color-accent-1: #0477be;
  --color-accent-2: #73c0de;
  --color-accent-3: #91cc75;
  --color-accent-4: #d5ed59;
  --color-accent-5: #d2d9a9;
  --color-accent-6: #fac858;
  --color-accent-7: #fc8452;

  --color-error: #fa4b00;
  --color-error-light: color-mix(
    in oklab,
    var(--color-error) 50%,
    var(--color-lightest) 50%
  );
  --color-error-lightest: color-mix(
    in oklab,
    var(--color-error) 20%,
    var(--color-lightest) 80%
  );
  --color-success: #41cd00;
  --color-success-light: color-mix(
    in oklab,
    var(--color-success) 50%,
    var(--color-lightest) 50%
  );
  --color-success-lightest: color-mix(
    in oklab,
    var(--color-success) 20%,
    var(--color-lightest) 80%
  );
  --color-warning: #f9aa00;
  --color-warning-light: color-mix(
    in oklab,
    var(--color-warning) 50%,
    var(--color-lightest) 50%
  );
  --color-warning-lightest: color-mix(
    in oklab,
    var(--color-warning) 20%,
    var(--color-lightest) 80%
  );
  --color-info: var(--color-accent-1);
  --color-info-light: color-mix(
    in oklab,
    var(--color-info) 50%,
    var(--color-lightest) 50%
  );
  --color-info-lightest: color-mix(
    in oklab,
    var(--color-info) 20%,
    var(--color-lightest) 80%
  );

/* KSC Brand Colors */
  /* Primary Green Shades - Dark to Light */
  --KSC-Green-100: #282C1C;  /* Darkest green */
  --KSC-Green-200: #353A26;
  --KSC-Green-200: #42492F;
  --KSC-Green-400: #505739;
  --KSC-Green-500: #5D6642;  /* Primary green */
  --KSC-Green-600: #788356;
  --KSC-Green-700: #929F6B;
  --KSC-Green-800: #A8B289;
  --KSC-Green-900: #BDC5A6;
  --KSC-Green-1000: #D3D8C4; /* Lightest green */

  /* Accent Colors */
  --KSC-Lime: #F6FFCA;      /* Light cream for text highlights */
  --KSC-Orange: #E8BC6B;       /* Gold accent color */

  /* Base Brand Colors */
  --KSC-Primary-Green: var(--KSC-Green-500);  /* Main brand green */
  --KSC-Powder: #f4f4f4;                      /* Light background */

  /* Node Category Colors */
  --node-color-project: #3E7CB1;
  --node-color-consortium: #966496;
  --node-color-private: #78B8E2;
  --node-color-public: #DB7F67;
  --node-color-person: #EEBD67;
  --node-color-dlt: #929F6B;
  --node-color-dltinstance: #5D6642;
  --node-color-didmethod: #BDCE69;
  --node-color-regulation: #858AA2;
  --node-color-standard: #B1BBC4;

  /* Status Colors - derived from Node Colors */
  --status-color-launched: var(--node-color-project);     /* Ocean Blue from ID Project */
  --status-color-pilot: var(--node-color-public);        /* Green from Public Entity */
  --status-color-announced: var(--node-color-private);   /* Light Blue from Private Entity */
  --status-color-discontinued: var(--node-color-regulation); /* Gray from Regulation */

  font-size: 14px;
  -webkit-font-smoothing: antialiased;

  /*   infocard padding from top */ 
  --content-padding-top: 7.4rem;
 /*   infocard padding from right */ 
  --content-padding-right: 4.5rem;

  --content-max-width: 150rem;
  --content-padding-x: 4.5rem;

  --filter-width: 24rem;

  /* Background Colors - Light to Dark */
  --WOT-bg-light-1000: #FDFDFD;      /* Lightes */
  --WOT-bg-light-900: #F5F5F5;       /* Very light gray */
  --WOT-bg-light-800: #F3F3F3;       /* Light gray */
  --WOT-bg-light-700: #F1F1F1;       /* Slightly darker light gray */
  --WOT-bg-light-600: #EDEDED;       /* Medium light gray */
  --WOT-bg-light-500: #FDFDFD;       /* Almost white */

  /* Map existing background variables to new system */
  --background-base: var(--WOT-bg-light-1000);
  --background-weaker: var(--WOT-bg-light-900);
  --background-weakest: var(--WOT-bg-light-600);
  --foreground-base: #191919;
  --foreground-weakest: var(--WOT-bg-light-600);
  --text-base: #191919;
  --text-weaker: #666666;
}

@media (max-width: 768px) {
  :root {
    font-size: 13px; /* Adjust for tablets */
  }
}

@media (max-width: 480px) {
  :root {
    font-size: 12px; /* Adjust for mobile phones */
    --content-padding-x: 1rem;
  }
}

body {
  background-color: var(--KSC-Powder);
  font-family: "Source Sans 3", sans-serif;
  min-height: 100vh;
}