/* =========================================================
   Lux Education Systems
   Shared Theme Tokens
   File: components/styles/lux-theme.css
   ========================================================= */

/* ---------------------------------------------------------
   Brand colors
   These stay consistent in both light and dark mode.
   --------------------------------------------------------- */

:root {
  --lux-primary: #0F4C5C;
  --lux-primary-dark: #0B3D49;

  --lux-secondary: #0E949A;
  --lux-secondary-dark: #0B7C81;
  --lux-secondary-light: #63C7CB;

  --lux-tertiary: #26343D;
  --lux-quaternary: #F7FAFA;

  --lux-white: #FFFFFF;


  /* -------------------------------------------------------
     Light mode semantic colors
     Page and component CSS should use THESE variables.
     ------------------------------------------------------- */

  --page-bg: #F7FAFA;
  --page-bg-alt: #EDF6F6;

  --surface: #FFFFFF;
  --surface-soft: #F7FAFA;
  --surface-tint: #EAF3F4;
  --surface-strong: #DDEBEC;

  --text: #26343D;
  --text-soft: #465A62;
  --text-muted: #6E7D82;
  --text-inverse: #F7FAFA;

  --heading: #26343D;

  --border: #D8E4E5;
  --border-strong: #BFCFD1;

  --link: #0F4C5C;
  --link-hover: #0E949A;

  --accent: #0E949A;
  --accent-hover: #0B7C81;
  --accent-soft: rgba(14, 148, 154, 0.10);
  --accent-soft-strong: rgba(14, 148, 154, 0.16);

  --primary-button-bg: #0F4C5C;
  --primary-button-bg-hover: #0E949A;
  --primary-button-text: #F7FAFA;

  --secondary-button-bg: #FFFFFF;
  --secondary-button-bg-hover: #EDF6F6;
  --secondary-button-text: #0F4C5C;
  --secondary-button-border: #D8E4E5;

  --header-bg: rgba(247, 250, 250, 0.94);
  --header-text: #26343D;
  --header-border: rgba(15, 76, 92, 0.14);
  --header-menu-bg: rgba(247, 250, 250, 0.99);

  --footer-bg: #0F4C5C;
  --footer-text: #F7FAFA;
  --footer-text-soft: rgba(247, 250, 250, 0.68);
  --footer-border: rgba(247, 250, 250, 0.10);

  --dark-section-bg: #0F4C5C;
  --dark-section-bg-alt: #0B3D49;
  --dark-section-text: #F7FAFA;
  --dark-section-text-soft: rgba(247, 250, 250, 0.72);

  --card-bg: #FFFFFF;
  --card-bg-soft: #F7FAFA;
  --card-border: #D8E4E5;

  --input-bg: #FFFFFF;
  --input-text: #26343D;
  --input-border: #D8E4E5;
  --input-placeholder: #7D8C91;

  --nav-hover-bg: rgba(14, 148, 154, 0.10);
  --nav-active-bg: rgba(14, 148, 154, 0.14);

  --overlay-soft: rgba(15, 76, 92, 0.05);
  --overlay-medium: rgba(15, 76, 92, 0.10);

  --shadow-color: rgba(15, 76, 92, 0.12);
  --shadow-color-soft: rgba(15, 76, 92, 0.08);

  --shadow:
    0 24px 70px var(--shadow-color);

  --shadow-soft:
    0 14px 36px var(--shadow-color-soft);


  /* -------------------------------------------------------
     Status colors
     ------------------------------------------------------- */

  --success: #2F776B;
  --success-soft: #E4F2EF;

  --warning: #A66D1F;
  --warning-soft: #F6EEDF;

  --danger: #A4433A;
  --danger-soft: #F8E8E5;

  --info: #3D7088;
  --info-soft: #E8F1F5;


  /* -------------------------------------------------------
     Shared radii
     ------------------------------------------------------- */

  --radius-xl: 34px;
  --radius-lg: 30px;
  --radius: 20px;
  --radius-sm: 13px;


  /* -------------------------------------------------------
     Shared content widths
     ------------------------------------------------------- */

  --max-width: 1240px;
  --tour-max-width: 1480px;


  /* -------------------------------------------------------
     Browser color handling
     ------------------------------------------------------- */

  color-scheme: light;
}


/* =========================================================
   Explicit Dark Mode
   ========================================================= */

:root[data-theme="dark"] {
  --page-bg: #26343D;
  --page-bg-alt: #202D34;

  --surface: #31424B;
  --surface-soft: #2B3A42;
  --surface-tint: #354850;
  --surface-strong: #3C5059;

  --text: #F7FAFA;
  --text-soft: #D3DEE0;
  --text-muted: #A9B9BD;
  --text-inverse: #26343D;

  --heading: #F7FAFA;

  --border: rgba(247, 250, 250, 0.12);
  --border-strong: rgba(247, 250, 250, 0.20);

  --link: #63C7CB;
  --link-hover: #0E949A;

  --accent: #0E949A;
  --accent-hover: #63C7CB;
  --accent-soft: rgba(14, 148, 154, 0.14);
  --accent-soft-strong: rgba(14, 148, 154, 0.22);

  --primary-button-bg: #0E949A;
  --primary-button-bg-hover: #63C7CB;
  --primary-button-text: #F7FAFA;

  --secondary-button-bg: #31424B;
  --secondary-button-bg-hover: #354850;
  --secondary-button-text: #F7FAFA;
  --secondary-button-border: rgba(247, 250, 250, 0.16);

  --header-bg: rgba(38, 52, 61, 0.96);
  --header-text: #F7FAFA;
  --header-border: rgba(247, 250, 250, 0.10);
  --header-menu-bg: rgba(38, 52, 61, 0.99);

  --footer-bg: #0F4C5C;
  --footer-text: #F7FAFA;
  --footer-text-soft: rgba(247, 250, 250, 0.68);
  --footer-border: rgba(247, 250, 250, 0.10);

  --dark-section-bg: #0F4C5C;
  --dark-section-bg-alt: #0B3D49;
  --dark-section-text: #F7FAFA;
  --dark-section-text-soft: rgba(247, 250, 250, 0.72);

  --card-bg: #31424B;
  --card-bg-soft: #2B3A42;
  --card-border: rgba(247, 250, 250, 0.12);

  --input-bg: #2B3A42;
  --input-text: #F7FAFA;
  --input-border: rgba(247, 250, 250, 0.14);
  --input-placeholder: #9EAFB3;

  --nav-hover-bg: rgba(14, 148, 154, 0.16);
  --nav-active-bg: rgba(14, 148, 154, 0.22);

  --overlay-soft: rgba(247, 250, 250, 0.04);
  --overlay-medium: rgba(247, 250, 250, 0.08);

  --shadow-color: rgba(0, 0, 0, 0.24);
  --shadow-color-soft: rgba(0, 0, 0, 0.16);

  --success-soft: rgba(47, 119, 107, 0.20);
  --warning-soft: rgba(166, 109, 31, 0.20);
  --danger-soft: rgba(164, 67, 58, 0.20);
  --info-soft: rgba(61, 112, 136, 0.20);

  color-scheme: dark;
}


/* =========================================================
   System Dark Mode
   Applies only when no manual theme has been chosen.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --page-bg: #26343D;
    --page-bg-alt: #202D34;

    --surface: #31424B;
    --surface-soft: #2B3A42;
    --surface-tint: #354850;
    --surface-strong: #3C5059;

    --text: #F7FAFA;
    --text-soft: #D3DEE0;
    --text-muted: #A9B9BD;
    --text-inverse: #26343D;

    --heading: #F7FAFA;

    --border: rgba(247, 250, 250, 0.12);
    --border-strong: rgba(247, 250, 250, 0.20);

    --link: #63C7CB;
    --link-hover: #0E949A;

    --accent: #0E949A;
    --accent-hover: #63C7CB;
    --accent-soft: rgba(14, 148, 154, 0.14);
    --accent-soft-strong: rgba(14, 148, 154, 0.22);

    --primary-button-bg: #0E949A;
    --primary-button-bg-hover: #63C7CB;
    --primary-button-text: #F7FAFA;

    --secondary-button-bg: #31424B;
    --secondary-button-bg-hover: #354850;
    --secondary-button-text: #F7FAFA;
    --secondary-button-border: rgba(247, 250, 250, 0.16);

    --header-bg: rgba(38, 52, 61, 0.96);
    --header-text: #F7FAFA;
    --header-border: rgba(247, 250, 250, 0.10);
    --header-menu-bg: rgba(38, 52, 61, 0.99);

    --footer-bg: #0F4C5C;
    --footer-text: #F7FAFA;
    --footer-text-soft: rgba(247, 250, 250, 0.68);
    --footer-border: rgba(247, 250, 250, 0.10);

    --dark-section-bg: #0F4C5C;
    --dark-section-bg-alt: #0B3D49;
    --dark-section-text: #F7FAFA;
    --dark-section-text-soft: rgba(247, 250, 250, 0.72);

    --card-bg: #31424B;
    --card-bg-soft: #2B3A42;
    --card-border: rgba(247, 250, 250, 0.12);

    --input-bg: #2B3A42;
    --input-text: #F7FAFA;
    --input-border: rgba(247, 250, 250, 0.14);
    --input-placeholder: #9EAFB3;

    --nav-hover-bg: rgba(14, 148, 154, 0.16);
    --nav-active-bg: rgba(14, 148, 154, 0.22);

    --overlay-soft: rgba(247, 250, 250, 0.04);
    --overlay-medium: rgba(247, 250, 250, 0.08);

    --shadow-color: rgba(0, 0, 0, 0.24);
    --shadow-color-soft: rgba(0, 0, 0, 0.16);

    --success-soft: rgba(47, 119, 107, 0.20);
    --warning-soft: rgba(166, 109, 31, 0.20);
    --danger-soft: rgba(164, 67, 58, 0.20);
    --info-soft: rgba(61, 112, 136, 0.20);

    color-scheme: dark;
  }
}


/* =========================================================
   Optional global defaults
   These do not control layout.
   ========================================================= */

html {
  background: var(--page-bg);
}

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

a {
  color: inherit;
}

::selection {
  background: rgba(14, 148, 154, 0.28);
  color: var(--text);
}