/* =========================================================================
   Basic-alive-UI-Campus - default preset
   Look taken from openclassrooms.com/fr (2026-11-05): Inter bold titles on deep-purple
   ink, one violet accent, flat buttons with small corners, pastel panels.
   The source's cream hero (#FFFAEE) is replaced by white and a cool lavender tint
   (Jun's no-cream rule).
   A preset only sets role variables. Keep every variable name, change the values.
   Fonts (Google Fonts, free):
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap
   ========================================================================= */

:root {
  --theme-name: "Basic-alive-UI-Campus";

  /* Fonts: one family, weight does the work */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Grounds (white / cool gray only) */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F4F5FC;      /* cool lavender-gray band */
  --border: #E2E4F0;

  /* Text */
  --ink: #271A38;              /* deep purple ink */
  --ink-muted: #5A5470;

  /* Brand */
  --primary: #7451EB;          /* violet */
  --primary-strong: #6A45E6;   /* readable on white */
  --on-primary: #FFFFFF;
  --cta-gradient: linear-gradient(#7451EB, #7451EB);   /* flat on purpose */
  --highlight: #9DA9F3;        /* periwinkle, from the testimonial band */
  --highlight-soft: rgba(157, 169, 243, 0.45);

  /* Dark bands (hero option, footer) */
  --dark-band: radial-gradient(120% 90% at 50% 115%, #5B3BC4 0%, #3A2468 38%, #271A38 68%, #170F24 100%);
  --dark-solid: #1D1230;
  --on-dark: #FFFFFF;
  --on-dark-muted: #D9D2EE;

  /* Feature cards (landing mode): soft pastel panels */
  --card-gradient: linear-gradient(160deg, #EBEEFB 0%, #F6F7FE 100%);
  --card-border: #D5DAF6;

  /* Status */
  --success: #1B7A3E;
  --danger: #C42A2A;
  --warning: #8F5400;
  --info: #1D4ED8;

  /* Icon tiles and avatars (pastels from the site: mint, lavender, pink, sun) */
  --tile-1: #CDEFD9;  /* mint */
  --tile-2: #DDD5FB;  /* lavender */
  --tile-3: #FFD3E0;  /* pink */
  --tile-4: #FFE7A8;  /* sun */

  /* Card header bands (app mode): pastel, ink text */
  --head-1: linear-gradient(120deg, #9DA9F3, #B9C1F7);
  --head-2: linear-gradient(120deg, #9CC7F2, #BBDAF7);
  --head-3: linear-gradient(120deg, #A8E6C4, #C6F0D8);
  --head-4: linear-gradient(120deg, #FFD974, #FFE6A0);
  --on-head: #271A38;

  /* Brand motif: soft dot grid (mask image). "none" to disable. */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='3' cy='3' r='1.6' fill='%23000'/%3E%3C/svg%3E");
  --motif-size: 28px 28px;
  --motif-color: rgba(116, 81, 235, 0.14);

  /* Shape: small, calm corners like the source */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Depth: very light */
  --shadow-1: 0 1px 2px rgba(39, 26, 56, 0.05), 0 4px 10px rgba(39, 26, 56, 0.05);
  --shadow-2: 0 2px 6px rgba(39, 26, 56, 0.08), 0 6px 16px rgba(39, 26, 56, 0.06);
  --shadow-3: 0 4px 10px rgba(39, 26, 56, 0.07), 0 2px 6px rgba(39, 26, 56, 0.06);
  --focus-ring: 0 0 0 3px rgba(116, 81, 235, 0.45);
}

/* Dark mode: follows the device unless the page forces data-theme="light" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F0C18;
    --surface: #1A1626;
    --surface-alt: #141020;
    --border: #2D2742;
    --ink: #F4F1FC;
    --ink-muted: #B7B0CE;
    --primary: #8A6BF0;
    --primary-strong: #A58DFF;
    --on-primary: #FFFFFF;
    --cta-gradient: linear-gradient(#7451EB, #7451EB);
    --card-gradient: linear-gradient(160deg, #272046 0%, #1A1626 100%);
    --card-border: #3A3260;
    --success: #4ADE80;
    --danger: #F87171;
    --warning: #FBBF24;
    --info: #60A5FA;
    --tile-1: #1A4A38;
    --tile-2: #3A2F6B;
    --tile-3: #5E2640;
    --tile-4: #5C4614;
    --motif-color: rgba(165, 141, 255, 0.12);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --bg: #0F0C18;
  --surface: #1A1626;
  --surface-alt: #141020;
  --border: #2D2742;
  --ink: #F4F1FC;
  --ink-muted: #B7B0CE;
  --primary: #8A6BF0;
  --primary-strong: #A58DFF;
  --on-primary: #FFFFFF;
  --cta-gradient: linear-gradient(#7451EB, #7451EB);
  --card-gradient: linear-gradient(160deg, #272046 0%, #1A1626 100%);
  --card-border: #3A3260;
  --success: #4ADE80;
  --danger: #F87171;
  --warning: #FBBF24;
  --info: #60A5FA;
  --tile-1: #1A4A38;
  --tile-2: #3A2F6B;
  --tile-3: #5E2640;
  --tile-4: #5C4614;
  --motif-color: rgba(165, 141, 255, 0.12);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}