/* Design tokens for the EduMalawi marketing site.
 *
 * Values are copied from the application's own token file
 * (public/assets/css/tokens.css) so the interface previews on this page
 * render in the product's real colours rather than an approximation.
 * When the app's palette changes, reconcile this file against it.
 *
 * The typeface matches too: Poppins, the same family and the same four
 * weights the app loads, self hosted here rather than fetched from
 * Google Fonts.
 */

:root {
  /* neutrals */
  --color-bg:            #F7F8FA;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #F1F3F6;
  --color-border:        #E3E7EC;
  --color-border-strong: #C9D0D8;
  --color-text:          #1A2028;
  --color-text-muted:    #5C6B75;
  --color-text-subtle:   #68737C;
  /* Contrast-corrected text tones.
     The app's own muted and subtle tones, and its status colours used as
     small text on their soft backgrounds, fall below the AA ratio of
     4.5:1 at body size. These are the same hues darkened or lightened
     until they pass, measured rather than guessed. The app uses them on
     denser interior screens where the tradeoff was decided differently;
     if the app ever adopts these, the two files converge again. */
  --color-on-primary:    #FFFFFF;
  --color-success-ink:   #2B7A52;
  --color-warning-ink:   #8A6022;
  --color-danger-ink:    #B03427;
  --color-info-ink:      #267190;

  /* brand */
  --color-primary:        #1C7293;
  --color-primary-hover:  #185E7A;
  --color-primary-soft:   #E4F1F6;
  --color-accent:         #2E9CB8;

  /* status */
  --color-success:       #2F855A;
  --color-warning:       #E8A33D;
  --color-danger:        #C0392B;
  --color-info:          #2E86AB;
  --color-success-soft:  #E6F4EC;
  --color-warning-soft:  #FBEFD8;
  --color-danger-soft:   #F8E3E0;
  --color-info-soft:     #E1EEFB;

  --color-focus-ring:    #2E9CB855;

  /* Ink is the dominant tone on this site: the deep navy that carries
     the hero, the anchor sections and the footer. The app has no
     equivalent because the app is all interior screens. */
  --color-ink:           #0F1D26;
  --color-ink-soft:      #16303D;
  --color-on-ink:        #E8EEF2;
  --color-on-ink-muted:  #9DB2BE;

  /* spacing / radius / shadow */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-xs: 4px;  --radius-sm: 6px;
  --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;

  --shadow-xs:  0 1px 2px  rgba(15,23,32,.05);
  --shadow-sm:  0 1px 3px  rgba(15,23,32,.06), 0 1px 2px rgba(15,23,32,.04);
  --shadow-md:  0 4px 10px rgba(15,23,32,.07), 0 2px 4px rgba(15,23,32,.05);
  --shadow-lg:  0 12px 30px rgba(15,23,32,.10);
  --shadow-xl:  0 28px 60px rgba(15,23,32,.16);

  /* typography */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   12px;  --lh-xs:  16px;
  --text-sm:   13px;  --lh-sm:  18px;
  --text-md:   14px;  --lh-md:  20px;
  --text-lg:   16px;  --lh-lg:  24px;
  --text-xl:   18px;  --lh-xl:  26px;
  --text-2xl:  22px;  --lh-2xl: 30px;
  --text-3xl:  28px;  --lh-3xl: 36px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-sm: 140ms; --dur-md: 220ms; --dur-lg: 320ms;

  color-scheme: light;
}

/* Dark is the app's neutral charcoal, not navy: a blue-tinted page made
   every accent fight the background, and the product screens on this
   page are the app's own dark theme. Statuses are a step calmer than a
   brightened light palette, which read as neon on charcoal. */
:root[data-theme="dark"] {
  --color-bg:            #0C0C0E;
  --color-surface:       #141416;
  --color-surface-alt:   #1B1B1E;
  --color-border:        #26262A;
  --color-border-strong: #34343A;
  --color-text:          #ECECEE;
  --color-text-muted:    #A0A0A8;
  --color-text-subtle:   #8A8A92;
  /* On dark, white on the lighter primary falls under 3:1, so the
     primary button carries dark text instead. A light status colour
     reads as text on its own dark tint, so the ink is the colour
     itself; danger is lifted a little to stay over 4.5:1. */
  --color-on-primary:    #0C0C0E;
  --color-success-ink:   #4CBF7F;
  --color-warning-ink:   #D9A441;
  --color-danger-ink:    #E57C7C;
  --color-info-ink:      #6AA7E8;

  --color-primary:        #5AAFC6;
  --color-primary-hover:  #73BBCF;
  --color-primary-soft:   #1F2D32;
  --color-accent:         #73BBCF;

  --color-success:       #4CBF7F;
  --color-warning:       #D9A441;
  --color-danger:        #E26A6A;
  --color-info:          #6AA7E8;
  --color-success-soft:  #1D2F27;
  --color-warning-soft:  #342B1D;
  --color-danger-soft:   #352223;
  --color-info-soft:     #222C38;

  --color-focus-ring:    #5AAFC655;

  /* In dark the ink sections sit slightly above the page rather than
     below it, otherwise they disappear into the background. */
  --color-ink:           #131315;
  --color-ink-soft:      #1B1B1E;
  --color-on-ink:        #ECECEE;
  --color-on-ink-muted:  #A0A0A8;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
  --shadow-xl: 0 28px 60px rgba(0,0,0,.65);

  color-scheme: dark;
}

/* The visitor's system preference decides, unless they pick a theme,
   in which case data-theme on the root element wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #0C0C0E;
    --color-surface:       #141416;
    --color-surface-alt:   #1B1B1E;
    --color-border:        #26262A;
    --color-border-strong: #34343A;
    --color-text:          #ECECEE;
    --color-text-muted:    #A0A0A8;
    --color-text-subtle:   #8A8A92;
    /* On dark, white on the lighter primary falls under 3:1, so the
       primary button carries dark text instead. A light status colour
       reads as text on its own dark tint, so the ink is the colour
       itself; danger is lifted a little to stay over 4.5:1. */
    --color-on-primary:    #0C0C0E;
    --color-success-ink:   #4CBF7F;
    --color-warning-ink:   #D9A441;
    --color-danger-ink:    #E57C7C;
    --color-info-ink:      #6AA7E8;

    --color-primary:        #5AAFC6;
    --color-primary-hover:  #73BBCF;
    --color-primary-soft:   #1F2D32;
    --color-accent:         #73BBCF;

    --color-success:       #4CBF7F;
    --color-warning:       #D9A441;
    --color-danger:        #E26A6A;
    --color-info:          #6AA7E8;
    --color-success-soft:  #1D2F27;
    --color-warning-soft:  #342B1D;
    --color-danger-soft:   #352223;
    --color-info-soft:     #222C38;

    --color-focus-ring:    #5AAFC655;

    /* In dark the ink sections sit slightly above the page rather than
       below it, otherwise they disappear into the background. */
    --color-ink:           #131315;
    --color-ink-soft:      #1B1B1E;
    --color-on-ink:        #ECECEE;
    --color-on-ink-muted:  #A0A0A8;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --shadow-md: 0 6px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
    --shadow-xl: 0 28px 60px rgba(0,0,0,.65);

    color-scheme: dark;
  }
}