/* ==========================================================================
   Credis - shared design tokens
   Consumed by both styles.css (landing page) and deck.css (pitch deck) so the
   two cannot drift apart. Change a value here, not in a component.
   ========================================================================== */

:root {
  /* Brand navy */
  --navy-950: #04162c;
  --navy-900: #061d3a;
  --navy-800: #0a2a4c;
  --navy-700: #123b65;

  /* Brand teal.
     500 is the identity colour and is used for decoration and icons only.
     700 is the interactive colour: it carries white text at 5.5:1. */
  --teal-800: #006155;
  --teal-700: #00786a;
  --teal-500: #00b39d;
  --teal-300: #4fd6c0;
  --teal-050: #eef9f6;

  --amber-400: #e9a94f;

  /* Text on light surfaces */
  --text-strong: #061d3a;
  --text-body: #33485f;
  --text-muted: #5a7186;

  /* Text on dark surfaces */
  --text-inverse: #ffffff;
  --text-inverse-body: #b9cad8;
  --text-inverse-muted: #8fa5b8;

  /* Surfaces */
  --surface: #ffffff;
  --surface-sunken: #f5f9fb;

  /* Lines are always alpha based so they sit correctly on any surface */
  --line: rgb(6 29 58 / 0.11);
  --line-soft: rgb(6 29 58 / 0.07);
  --line-inverse: rgb(255 255 255 / 0.16);

  --shadow-sm: 0 1px 2px rgb(6 29 58 / 0.05);
  --shadow-md: 0 12px 32px -10px rgb(6 29 58 / 0.16);
  --shadow-lg: 0 32px 64px -20px rgb(6 29 58 / 0.28);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Gradients shared by the dark panels on both artefacts */
  --gradient-navy: linear-gradient(115deg, var(--navy-900), var(--navy-800));
  --gradient-brand: linear-gradient(100deg, #00776a 0%, #0a5a68 32%, var(--navy-800) 70%, var(--navy-900) 100%);

  --font-sans: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-features: "cv02", "cv03", "cv04", "cv11", "ss01", "ss03";
}