/* PALETTE STATUS: SAMPLED. Every anchor below is a measured pixel value from
   assets/logo-lge.png (the LGE globe mark): the green ribbon, the cyan/teal
   ribbon and highlights, and the blue globe body. */
:root {
  /* Litro Green — primary. The ribbon. Anchors: 300, 600, 950. */
  --green-50: #F2FBEB;
  --green-100: #E1F7D5;
  --green-200: #C2EDAB;
  --green-300: #8DDA62;
  --green-400: #6AC93F;
  --green-500: #4AAF29;
  --green-600: #2F8F1E;
  --green-700: #26761A;
  --green-800: #1B5E16;
  --green-900: #114312;
  --green-950: #063215;

  /* Orbit Cyan — secondary. The teal ribbon and its highlights.
     Anchors: 300, 500, 600, 700, 800. */
  --cyan-50: #EFFCFD;
  --cyan-100: #D8F7FA;
  --cyan-200: #A5FEFD;
  --cyan-300: #77F2F5;
  --cyan-400: #4ED4E4;
  --cyan-500: #36BBD0;
  --cyan-600: #30A8C1;
  --cyan-700: #268AA9;
  --cyan-800: #1B6488;
  --cyan-900: #14586F;

  /* Globe Blue — the sphere. Carries every dark band. Anchors: 400-950. */
  --blue-100: #DCE9F0;
  --blue-200: #B9D2DF;
  --blue-300: #8FB6C9;
  --blue-400: #63A7C4;
  --blue-500: #438CA9;
  --blue-600: #33778C;
  --blue-700: #17425F;
  --blue-800: #123148;
  --blue-900: #091C2E;
  --blue-950: #071521;

  /* Neutrals — cool and blue-shifted, taken from the silver landmasses. */
  --neutral-0: #FFFFFF;
  --neutral-50: #F6F8FA;
  --neutral-100: #ECF1F4;
  --neutral-200: #DAE2E8;
  --neutral-300: #BFCBD4;
  --neutral-400: #9AA9B4;
  --neutral-500: #788894;
  --neutral-600: #5B6B77;
  --neutral-700: #43505A;
  --neutral-800: #2C3740;
  --neutral-900: #1A222A;
  --neutral-950: #0E141A;

  /* Status. Success and info are brand colours; warning and danger are
     functional only — amber and red appear nowhere in the mark. */
  --status-success: #2F8F1E;
  --status-warning: #D08700;
  --status-danger: #B4291F;
  --status-info: #268AA9;

  /* ---- Semantic aliases: use these in components ---- */
  --brand-primary: var(--green-600);
  --brand-primary-hover: var(--green-700);
  --brand-primary-active: var(--green-800);
  --brand-accent: var(--cyan-500);
  --brand-accent-hover: var(--cyan-600);

  --text-strong: var(--blue-950);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-faint: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-on-brand: var(--neutral-0);
  --text-on-accent: var(--blue-950);
  --text-brand: var(--green-700);

  --surface-page: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-muted: var(--neutral-100);
  --surface-brand: var(--green-700);
  --surface-brand-deep: var(--blue-950);
  --surface-brand-tint: var(--green-50);
  --surface-accent: var(--cyan-500);
  --surface-accent-tint: var(--cyan-50);
  --surface-overlay: rgba(7, 21, 33, 0.66);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-500);
  --border-brand: var(--green-600);
  --border-accent: var(--cyan-500);
  --border-inverse: rgba(255, 255, 255, 0.22);

  --focus-ring: var(--cyan-500);
  --link: var(--green-700);
  --link-hover: var(--green-900);
  --link-inverse: var(--cyan-300);

  /* Photography treatment — documentary plant photography darkened with the
     globe navy. Single-hue, never a hue-shifting gradient. */
  --scrim-image: linear-gradient(180deg, rgba(7,21,33,0) 0%, rgba(7,21,33,0.3) 45%, rgba(7,21,33,0.8) 100%); /* @kind color */
  --scrim-flat: rgba(7, 21, 33, 0.58); /* @kind color */
}