/* =========================================================
   ADRASA TOKENS (GLOBAL)
   Default theme = BLUE
   Override per page with body classes: .adrasa-theme--green, etc.
========================================================= */

:root {
  /* Core brand */
  --adrasa-primary: #1c3463;
  --adrasa-primary-2: #1c3066;
  --adrasa-accent: #009dd8;

  /* Text */
  --adrasa-text: #324a6d;
  --adrasa-text-strong: #1d2f66;
  --adrasa-text-on-dark: #eff7fa;

  /* Surfaces */
  --adrasa-bg: #ffffff;
  --adrasa-bg-soft: #eff7fa;  /* “Blue Light BG” */
  --adrasa-bg-hero: #f3f8fd;

  /* UI */
  --adrasa-border: rgba(28, 52, 99, 0.16);
  --adrasa-border-accent: rgba(0, 157, 216, 0.55);

  /* Buttons */
  --adrasa-btn-primary-bg: var(--adrasa-primary-2);
  --adrasa-btn-primary-text: #c6e3ee;

  --adrasa-btn-secondary-bg: #eef7fa;
  --adrasa-btn-secondary-text: var(--adrasa-primary-2);

  --adrasa-btn-tertiary-bg: rgba(236, 243, 246, 0.91);
  --adrasa-btn-tertiary-text: var(--adrasa-primary-2);

  /* Sizing system (rem-based) */
  --adrasa-root-size: 16px;
  --adrasa-radius-sm: 0.625rem;   /* 10px */
  --adrasa-radius-md: 1.0625rem;  /* 17px */
  --adrasa-radius-lg: 1.375rem;   /* 22px */

  --adrasa-space-1: 0.25rem;   /* 4px */
  --adrasa-space-2: 0.5rem;    /* 8px */
  --adrasa-space-3: 0.75rem;   /* 12px */
  --adrasa-space-4: 1rem;      /* 16px */
  --adrasa-space-5: 1.25rem;   /* 20px */
  --adrasa-space-6: 1.5rem;    /* 24px */
  --adrasa-space-7: 1.875rem;  /* 30px */
  --adrasa-space-8: 2.75rem;   /* 44px */

  /* Spacing system: page rhythm + widget internals */
  --adrasa-page-gutter: clamp(1.5rem, 6.5vw, 6.9375rem); /* 24px -> 111px */
  --adrasa-page-gutter-tight: clamp(1rem, 4vw, 2rem);    /* 16px -> 32px */

  --adrasa-section-space-xs: clamp(3rem, 5vw, 4.25rem);      /* 48px -> 68px */
  --adrasa-section-space-sm: clamp(3.75rem, 7.5vw, 6.875rem); /* 60px -> 110px */
  --adrasa-section-space-md: clamp(4.5rem, 9vw, 8.375rem);    /* 72px -> 134px */
  --adrasa-section-space-lg: clamp(5rem, 10vw, 9.6875rem);    /* 80px -> 155px */

  --adrasa-stack-2xs: clamp(0.375rem, 0.8vw, 0.625rem); /* 6px -> 10px */
  --adrasa-stack-xs: clamp(0.75rem, 1.25vw, 1rem);      /* 12px -> 16px */
  --adrasa-stack-sm: clamp(1rem, 1.75vw, 1.375rem);     /* 16px -> 22px */
  --adrasa-stack-md: clamp(1.25rem, 2.25vw, 1.875rem);  /* 20px -> 30px */
  --adrasa-stack-lg: clamp(2rem, 4vw, 3rem);            /* 32px -> 48px */

  --adrasa-cluster-xs: clamp(0.5rem, 1vw, 0.75rem);      /* 8px -> 12px */
  --adrasa-cluster-sm: clamp(0.75rem, 1.35vw, 1rem);     /* 12px -> 16px */
  --adrasa-cluster-md: clamp(1rem, 1.8vw, 1.5rem);       /* 16px -> 24px */
  --adrasa-cluster-lg: clamp(1.5rem, 3vw, 2.75rem);      /* 24px -> 44px */

  --adrasa-measure-xs: 19.4375rem; /* 311px */
  --adrasa-measure-sm: 24rem;      /* 384px */
  --adrasa-measure-md: 28.75rem;   /* 460px */
  --adrasa-measure-lg: 45.625rem;  /* 730px */
  --adrasa-measure-xl: 69.375rem;  /* 1110px */

  --adrasa-type-xs: 0.8125rem;   /* 13px */
  --adrasa-type-sm: 0.875rem;    /* 14px */
  --adrasa-type-md: 1rem;        /* 16px */
  --adrasa-type-lg: 1.125rem;    /* 18px */
  --adrasa-type-xl: 2.125rem;    /* 34px */
  --adrasa-type-2xl: 3rem;       /* 48px */
  --adrasa-type-3xl: 4.5625rem;  /* 73px */
}

/* =========================================================
   GLOBAL “BODY APPLICATION”
   This makes the whole page inherit the theme
========================================================= */

body {
  background-color: var(--adrasa-bg-soft);
  color: var(--adrasa-text);
}

/* Optional: sane defaults for common elements */
a { color: var(--adrasa-accent); }
hr { border-color: var(--adrasa-border); }

/* =========================================================
   GREEN THEME OVERRIDE
========================================================= */

body.adrasa-theme--green {
  --adrasa-primary: #2f6f63;
  --adrasa-primary-2: #2a655a;
  --adrasa-accent: #2f8f7a;

  --adrasa-text: #2b4b44;
  --adrasa-text-strong: #1f3f39;
  --adrasa-text-on-dark: #e9fff8;

  --adrasa-bg: #ffffff;
  --adrasa-bg-soft: #f2fbf7;
  --adrasa-bg-hero: #f5fbf7;

  --adrasa-border: rgba(47, 111, 99, 0.18);
  --adrasa-border-accent: rgba(47, 143, 122, 0.55);

  --adrasa-btn-primary-bg: var(--adrasa-primary-2);
  --adrasa-btn-primary-text: #e9fff8;

  --adrasa-btn-secondary-bg: rgba(242, 251, 247, 0.95);
  --adrasa-btn-secondary-text: var(--adrasa-primary-2);

  --adrasa-btn-tertiary-bg: rgba(232, 247, 241, 0.92);
  --adrasa-btn-tertiary-text: var(--adrasa-primary-2);

  --adrasa-header-bg: var(--adrasa-bg-soft);
  background-color: var(--adrasa-bg-soft);
}