/*
 * Design tokens for the Project OASIS MkDocs site.
 * These values map the ESIIL style guide onto MkDocs Material while staying
 * fully markdown-driven and easy to extend.
 */

:root {
  color-scheme: light;

  /* Brand */
  --oasis-color-primary-blue: #234a65;
  --oasis-color-accent-blue: #42bcdc;
  --oasis-color-accent-green: #007135;
  --oasis-color-light-green: #4FB77F;
  --oasis-color-gray-relief: #e3e3e3;
  --oasis-color-brand-900: #18364a;
  --oasis-color-brand-800: var(--oasis-color-primary-blue);
  --oasis-color-brand-700: #2e617f;
  --oasis-color-brand-600: #347894;
  --oasis-color-accent: var(--oasis-color-accent-blue);
  --oasis-color-accent-soft: #dff5fa;
  --oasis-color-green: var(--oasis-color-accent-green);
  --oasis-day-1-color: var(--oasis-color-primary-blue);
  --oasis-day-1-color-strong: var(--oasis-color-brand-900);
  --oasis-day-2-color: var(--oasis-color-accent-blue);
  --oasis-day-2-color-strong: #258aa5;
  --oasis-day-3-color: var(--oasis-color-accent-green);
  --oasis-day-3-color-strong: #005427;

  /* Text */
  --oasis-color-body-text: #161a19;
  --oasis-color-text-strong: var(--oasis-color-body-text);
  --oasis-color-text: #263230;
  --oasis-color-text-soft: #566461;
  --oasis-color-link: var(--oasis-color-primary-blue);
  --oasis-color-link-hover: var(--oasis-color-accent-green);

  /* Surfaces */
  --oasis-color-bg: #ffffff;
  --oasis-color-bg-alt: #f5f7f7;
  --oasis-color-surface: #ffffff;
  --oasis-color-surface-muted: #f8fafa;
  --oasis-color-border: var(--oasis-color-gray-relief);
  --oasis-color-border-strong: #cfd6d4;

  /* Spacing */
  --oasis-space-1: 0.25rem;
  --oasis-space-2: 0.5rem;
  --oasis-space-3: 0.75rem;
  --oasis-space-4: 1rem;
  --oasis-space-5: 1.5rem;
  --oasis-space-6: 2rem;
  --oasis-space-7: 3rem;
  --oasis-space-8: 4rem;

  /* Typography */
  --oasis-font-sans: "Aptos", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --oasis-font-mono: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --oasis-font-size-0: 1rem;
  --oasis-font-size-1: 1rem;
  --oasis-font-size-2: 1.125rem;
  --oasis-font-size-3: 1.5rem;
  --oasis-font-size-4: 2.5rem;
  --oasis-font-size-5: 3.5rem;
  --oasis-line-height-body: 1.62;
  --oasis-line-height-tight: 1.2;

  /* Shape */
  --oasis-radius-sm: 0.45rem;
  --oasis-radius-md: 0.8rem;
  --oasis-radius-lg: 1.15rem;
  --oasis-radius-pill: 999px;

  /* Shadows */
  --oasis-shadow-sm: 0 8px 24px rgba(22, 26, 25, 0.08);
  --oasis-shadow-md: 0 16px 40px rgba(22, 26, 25, 0.12);
  --oasis-shadow-lg: 0 24px 54px rgba(22, 26, 25, 0.16);

  /* Motion */
  --oasis-transition-fast: 180ms ease;
  --oasis-transition-base: 240ms ease;

  /* Map tokens onto Material variables where helpful */
  --md-default-bg-color: var(--oasis-color-bg);
  --md-default-fg-color: var(--oasis-color-text);
  --md-default-fg-color--light: var(--oasis-color-text-soft);
  --md-primary-fg-color: var(--oasis-color-primary-blue);
  --md-primary-fg-color--light: var(--oasis-color-brand-700);
  --md-primary-fg-color--dark: #162f40;
  --md-accent-fg-color: var(--oasis-color-accent);
  --md-accent-fg-color--transparent: rgba(66, 188, 220, 0.16);
  --md-typeset-a-color: var(--oasis-color-link);
  --md-text-font-family: var(--oasis-font-sans);
  --md-code-font-family: var(--oasis-font-mono);
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --oasis-color-body-text: #f4f7f6;
  --oasis-color-text-strong: #ffffff;
  --oasis-color-text: #d8e2df;
  --oasis-color-text-soft: #aebfba;
  --oasis-color-link: #7bd6ea;
  --oasis-color-link-hover: #6bd28f;

  --oasis-color-bg: #0f1718;
  --oasis-color-bg-alt: #131f21;
  --oasis-color-surface: #182426;
  --oasis-color-surface-muted: #203032;
  --oasis-color-border: #324346;
  --oasis-color-border-strong: #496063;
  --oasis-color-accent-soft: rgba(66, 188, 220, 0.18);

  --oasis-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --oasis-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.36);
  --oasis-shadow-lg: 0 24px 54px rgba(0, 0, 0, 0.44);

  --md-default-bg-color: var(--oasis-color-bg);
  --md-default-fg-color: var(--oasis-color-text);
  --md-default-fg-color--light: var(--oasis-color-text-soft);
  --md-primary-fg-color: #18384d;
  --md-accent-fg-color: var(--oasis-color-accent-blue);
  --md-accent-fg-color--transparent: rgba(66, 188, 220, 0.2);
  --md-typeset-a-color: var(--oasis-color-link);
}

@media screen and (max-width: 76.1875em) {
  :root {
    --oasis-font-size-5: 2.85rem;
    --oasis-font-size-4: 2rem;
  }
}

@media screen and (max-width: 44.9375em) {
  :root {
    --oasis-space-7: 2.5rem;
    --oasis-space-8: 3rem;
    --oasis-font-size-5: 2.25rem;
    --oasis-font-size-4: 1.75rem;
    --oasis-font-size-3: 1.25rem;
  }
}