@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   OneView — Alstom Design Tokens
   Themes: Dark Blue (default), Dark Graphite, Light Mode
   Brand: Blueprint Blue #142846 · Carbon Blue #1E3246
   ============================================================ */

:root {
  /* ---- Alstom Brand Palette ---- */
  --alstom-blueprint:     #142846;
  --alstom-carbon-blue:   #1E3246;
  --alstom-red:           #DC3223;
  --alstom-ultramarine:   #2850F0;
  --color-carbon-blue:    #1E3246;
  --color-alstom-limestone: #E6E6F0;
  --color-neutral-strong: #262626;

  /* ---- Core Interactive Colors (theme-invariant) ---- */
  --color-primary-teal:   #2850F0;          /* Dynamic Ultramarine (interactive) */
  --color-dark-teal:      #5373F3;          /* Primary Blue 60 — text-safe on dark bg (5:1 contrast) */
  --color-teal-hover:     #1F43D8;          /* Darkened hover for white text contrast >= 4.5:1 */
  --color-teal-light:     rgba(40, 80, 240, 0.12); /* Blue tint for active states */
  --color-vibrant-red:    #DC3223;          /* Vibrant Red */
  --color-text-on-primary: #FFFFFF;         /* Text on colored buttons — always white */
  --color-btn-secondary-bg: #142846;        /* Blueprint Blue — filled secondary btn bg */

  /* ---- Theme Surface Colors (DARK BLUE — default) ---- */
  --color-primary-dark:   #142846;
  --color-bg-page:        #142846;
  --color-bg-light:       #1E3246;
  --color-bg-white:       #243C56;
  --color-bg-raised:      #2D4865;
  --color-bg-sidebar:     #142846;
  --color-bg-sidebar-hover: #1E3246;
  --color-bg-sidebar-active: #2850F0;
  --color-shell-topnav:   #142846;
  --color-shell-topnav-border: rgba(255, 255, 255, 0.12);

  /* ---- Theme Text ---- */
  --color-text-dark:      #F1F5F9;
  --color-text-heading:   #F1F5F9;
  --color-text-body:      #CBD5E1;
  --color-text-muted:     #B8C3CF;
  --color-text-light:     #B8C3CF;
  --color-text-inverse:   #FFFFFF;

  /* ---- Theme Sidebar Text ---- */
  --color-sidebar-text:        rgba(255, 255, 255, 0.7);
  --color-sidebar-text-faint:  rgba(255, 255, 255, 0.4);
  --color-sidebar-text-strong: rgba(255, 255, 255, 0.9);
  --color-sidebar-border:      rgba(255, 255, 255, 0.08);
  --color-sidebar-input-border: rgba(255, 255, 255, 0.15);
  --color-sidebar-input-bg:    rgba(255, 255, 255, 0.08);

  /* ---- Status Colors ---- */
  --color-success:        #17B26A;
  --color-success-light:  rgba(23, 178, 106, 0.15);
  --color-warning:        #F79009;
  --color-warning-light:  rgba(247, 144, 9, 0.15);
  --color-danger:         #DC3223;
  --color-danger-light:   rgba(220, 50, 35, 0.15);
  --color-info:           #00A9EB;
  --color-info-light:     rgba(0, 169, 235, 0.15);

  /* ---- Alstom DS Color Scales ---- */
  --color-primary-0:   #0a1428;
  --color-primary-10:  #142846;
  --color-primary-20:  #1a3355;
  --color-primary-30:  #203d66;
  --color-primary-40:  #26487b;
  --color-primary-50:  #2850F0;
  --color-primary-60:  #5373F3;
  --color-primary-70:  #7E96F6;
  --color-primary-80:  #A9B9F9;
  --color-primary-90:  #D4DCFC;
  --color-primary-100: #F5F7FE;

  --color-neutral-0:   #000000;
  --color-neutral-10:  #1A1A1A;
  --color-neutral-20:  #333333;
  --color-neutral-30:  #4D4D4D;
  --color-neutral-40:  #666666;
  --color-neutral-50:  #808080;
  --color-neutral-60:  #999999;
  --color-neutral-70:  #B3B3B3;
  --color-neutral-80:  #CCCCCC;
  --color-neutral-90:  #E6E6E6;
  --color-neutral-100: #FFFFFF;

  /* Inactive state from DS */
  --color-inactive:    rgba(30, 50, 70, 0.5);

  /* ---- Borders ---- */
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-light:   rgba(255, 255, 255, 0.04);
  --color-border-dark:    rgba(255, 255, 255, 0.12);

  /* ---- Overlay ---- */
  --color-overlay:        rgba(0, 0, 0, 0.45);
  --color-focus-ring:     rgba(40, 80, 240, 0.2);

  /* Alstom brand ref */
  --color-primary-dark-brand: #142846;

  /* ---- Typography ---- */
  --font-heading:         'Antarctica', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family:          'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.875rem;
  --text-md:    1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;

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

  --leading-tight:    1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  /* ---- Spacing (4 px grid) ---- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ---- Sizing ---- */
  --sidebar-width:      260px;
  --sidebar-collapsed:  64px;
  --topnav-height:      56px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

  /* ---- Transitions ---- */
  --transition-fast:     150ms ease;
  --transition-base:     200ms ease;
  --transition-slow:     300ms ease;

  /* ---- Z-index scale ---- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-sidebar:    300;
  --z-topnav:     400;
  --z-modal-bg:   500;
  --z-modal:      600;
  --z-toast:      700;

  /* ---- Disabled state ---- */
  --opacity-disabled: 0.4;
}

/* ============================================================
   LIGHT THEME — Limestone + white surfaces
   ============================================================ */
[data-theme="light"],
[data-theme="white"] {
  --color-dark-teal:      #203D66;          /* Primary Blue 30 — text-safe on white bg (9:1 contrast) */
  --color-primary-dark:   #E6E6F0;
  --color-bg-page:        #E6E6F0;
  --color-bg-light:       #F3F5FD;
  --color-bg-white:       #FFFFFF;
  --color-bg-raised:      #F8FAFC;
  --color-bg-sidebar:     #142846;
  --color-bg-sidebar-hover: #1E3246;
  --color-bg-sidebar-active: #2850F0;
  --color-shell-topnav:   #FFFFFF;
  --color-shell-topnav-border: rgba(30, 50, 70, 0.12);

  --color-text-dark:      #1E3246;
  --color-text-heading:   #1E3246;
  --color-text-body:      #1E3246;
  --color-text-muted:     #4D5B6B;
  --color-text-light:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  --color-sidebar-text:        rgba(255, 255, 255, 0.8);
  --color-sidebar-text-faint:  rgba(255, 255, 255, 0.45);
  --color-sidebar-text-strong: #FFFFFF;
  --color-sidebar-border:      rgba(255, 255, 255, 0.1);
  --color-sidebar-input-border: rgba(255, 255, 255, 0.2);
  --color-sidebar-input-bg:    rgba(255, 255, 255, 0.1);

  --color-border:         rgba(0, 0, 0, 0.08);
  --color-border-light:   rgba(0, 0, 0, 0.04);
  --color-border-dark:    rgba(0, 0, 0, 0.12);

  --color-overlay:        rgba(0, 0, 0, 0.3);
  --color-focus-ring:     rgba(40, 80, 240, 0.25);

  --color-success-light:  rgba(23, 178, 106, 0.1);
  --color-warning-light:  rgba(247, 144, 9, 0.1);
  --color-danger-light:   rgba(220, 50, 35, 0.1);
  --color-info-light:     rgba(0, 169, 235, 0.1);

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  --color-text-on-primary: #142846;
}

/* ============================================================
   DARK BLUE THEME — Alstom Blueprint Blue
   ============================================================ */
[data-theme="dark-blue"],
[data-theme="blue"] {
  --color-dark-teal:      #7E96F6;          /* Primary Blue 70 — text-safe on blue bg (5.4:1 contrast) */
  --color-primary-dark:   #142846;
  --color-bg-page:        #142846;
  --color-bg-light:       #1E3246;
  --color-bg-white:       #243C56;
  --color-bg-raised:      #2D4865;
  --color-bg-sidebar:     #142846;
  --color-bg-sidebar-hover: #1E3246;
  --color-bg-sidebar-active: #2850F0;
  --color-shell-topnav:   #142846;
  --color-shell-topnav-border: rgba(255, 255, 255, 0.12);

  --color-text-dark:      #EFF6FF;
  --color-text-heading:   #EFF6FF;
  --color-text-body:      #BFDBFE;
  --color-text-muted:     #7EADD4;
  --color-text-light:     #7EADD4;
  --color-text-inverse:   #FFFFFF;

  --color-sidebar-text:        rgba(255, 255, 255, 0.7);
  --color-sidebar-text-faint:  rgba(255, 255, 255, 0.4);
  --color-sidebar-text-strong: rgba(255, 255, 255, 0.95);
  --color-sidebar-border:      rgba(255, 255, 255, 0.1);
  --color-sidebar-input-border: rgba(255, 255, 255, 0.18);
  --color-sidebar-input-bg:    rgba(255, 255, 255, 0.08);

  --color-border:         rgba(255, 255, 255, 0.1);
  --color-border-light:   rgba(255, 255, 255, 0.05);
  --color-border-dark:    rgba(255, 255, 255, 0.15);

  --color-teal-light:     rgba(40, 80, 240, 0.18);

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   DARK GRAPHITE THEME — Neutral Strong
   ============================================================ */
[data-theme="dark-graphite"],
[data-theme="black"] {
  --color-dark-teal:      #7E96F6;
  --color-primary-dark:   #262626;
  --color-bg-page:        #262626;
  --color-bg-light:       #333333;
  --color-bg-white:       #3A3A3A;
  --color-bg-raised:      #474747;
  --color-bg-sidebar:     #262626;
  --color-bg-sidebar-hover: #333333;
  --color-bg-sidebar-active: #2850F0;
  --color-shell-topnav:   #262626;
  --color-shell-topnav-border: rgba(255, 255, 255, 0.12);

  --color-text-dark:      #FFFFFF;
  --color-text-heading:   #FFFFFF;
  --color-text-body:      #F3F5FD;
  --color-text-muted:     #DEDEDE;
  --color-text-light:     #B3B3B3;
  --color-text-inverse:   #FFFFFF;

  --color-sidebar-text:        rgba(255, 255, 255, 0.75);
  --color-sidebar-text-faint:  rgba(255, 255, 255, 0.5);
  --color-sidebar-text-strong: rgba(255, 255, 255, 0.95);
  --color-sidebar-border:      rgba(255, 255, 255, 0.1);
  --color-sidebar-input-border: rgba(255, 255, 255, 0.18);
  --color-sidebar-input-bg:    rgba(255, 255, 255, 0.08);

  --color-border:         rgba(255, 255, 255, 0.1);
  --color-border-light:   rgba(255, 255, 255, 0.05);
  --color-border-dark:    rgba(255, 255, 255, 0.16);
  --color-teal-light:     rgba(40, 80, 240, 0.18);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Global reset & base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background: var(--color-bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

a {
  color: var(--color-primary-teal);
  text-decoration: none;
}
a:hover {
  color: var(--color-teal-hover);
  text-decoration: underline;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-primary-teal);
  outline-offset: 2px;
}