/* ============================================================
   variables.css — Design Tokens (Dark default, Light override)
   ============================================================ */

/* ── Dark Mode (default) ─────────────────────────────────── */
:root,
html.dark {
  --background:                 #0b1326;
  --surface:                    #0b1326;
  --surface-dim:                #0b1326;
  --surface-bright:             #31394d;
  --surface-container-lowest:   #060e20;
  --surface-container-low:      #131b2e;
  --surface-container:          #171f33;
  --surface-container-high:     #222a3d;
  --surface-container-highest:  #2d3449;
  --surface-variant:            #2d3449;

  --on-background:              #dae2fd;
  --on-surface:                 #dae2fd;
  --on-surface-variant:         #c5c6cd;

  --primary:                    #b9c7e4;
  --primary-container:          #0a192f;
  --on-primary:                 #233148;
  --on-primary-container:       #74829d;

  --secondary:                  #ddfcff;
  --secondary-container:        #00f1fe;
  --on-secondary:               #00363a;
  --on-secondary-fixed:         #002022;

  --tertiary:                   #b7c8e1;
  --tertiary-container:         #081a2d;

  --outline:                    #8f9097;
  --outline-variant:            #44474d;

  /* Glassmorphism */
  --glass-bg:                   rgba(45, 52, 73, 0.15);
  --glass-border:               rgba(143, 144, 151, 0.2);
  --glass-blur:                 12px;

  /* Glow */
  --glow-primary:               rgba(0, 241, 254, 0.3);
  --accent-dot:                 #00f1fe;

  /* Card shadows */
  --card-shadow:                0 4px 24px rgba(0, 0, 0, 0.4);

  /* Nav */
  --nav-bg:                     rgba(11, 19, 38, 0.80);
  --nav-border:                 rgba(68, 71, 77, 0.3);

  /* Form */
  --input-bg:                   #2d3449;
  --input-border:               rgba(143, 144, 151, 0.3);
  --input-focus-border:         #00f1fe;

  /* Spacing */
  --section-gap-desktop:        80px;
  --section-gap-mobile:         48px;
  --section-gap-bottom-desktop: 60px;
  --section-gap-bottom-mobile:  36px;
  --margin-desktop:             64px;
  --margin-mobile:              20px;
  --gutter:                     24px;
  --container-max:              1280px;
}

/* ── Light Mode ─────────────────────────────────────────── */
html.light {
  --background:                 #fafbfd;
  --surface:                    #fafbfd;
  --surface-dim:                #d8e0eb;
  --surface-bright:             #fafbfd;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #f5f7fb;
  --surface-container:          #eff2f8;
  --surface-container-high:     #e8ecf3;
  --surface-container-highest:  #e1e6ed;
  --surface-variant:            #e1e6ed;

  --on-background:              #1a2842;
  --on-surface:                 #1a2842;
  --on-surface-variant:         #495568;

  --primary:                    #0052a3;
  --primary-container:          #1e6fbf;
  --on-primary:                 #ffffff;
  --on-primary-container:       #f9fdff;

  --secondary:                  #5b6b83;
  --secondary-container:        #1e6fbf;
  --on-secondary:               #ffffff;
  --on-secondary-fixed:         #131b2e;

  --tertiary:                   #0b6b8a;
  --tertiary-container:         #1a8aa8;

  --outline:                    #747d84;
  --outline-variant:            #c5cdd2;

  /* Card */
  --glass-bg:                   #ffffff;
  --glass-border:               rgba(93, 107, 131, 0.12);
  --glass-blur:                 0px;

  /* Glow */
  --glow-primary:               rgba(30, 111, 191, 0.15);
  --accent-dot:                 #1e6fbf;

  /* Card shadows */
  --card-shadow:                0 4px 24px rgba(26, 40, 66, 0.08);

  /* Nav */
  --nav-bg:                     rgba(250, 251, 253, 0.88);
  --nav-border:                 rgba(197, 205, 210, 0.5);

  /* Form */
  --input-bg:                   #f5f7fb;
  --input-border:               rgba(74, 85, 104, 0.25);
  --input-focus-border:         #1e6fbf;
}

/* ── Global Transitions ─────────────────────────────────── */
html {
  scroll-behavior: smooth;
  transition: background-color 0.35s ease, color 0.35s ease;
}

html.light {
  background: linear-gradient(180deg, #fafbfd 0%, #f5f7fb 100%);
  background-attachment: fixed;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}

a, button {
  transition: all 0.3s ease;
}