/* AWTIS 2026 brand palette, applied over the Industry token layer.
   Load this AFTER styles.css. Industry's structure is untouched — the
   wireframe frames, registration marks, condensed type and grid all stay;
   only the colour roles are re-pointed at the official scheme.

   Official scheme            role in this build
   ─────────────────────────  ─────────────────────────────────────────
   Deep Navy      #101F4F     section fields, headers, footer  (the 60%)
   Tech Blue      #103060     secondary fields
   Midnight Blue  #101840     body text, deepest sections
   Electric Blue  #104C9A     highlights, links, key elements  (the 10%)
   Cyan Blue      #008FD5     circuit lines, technical drawing
   Bright Cyan    #00C8F0     glow, live indicators
   White/Off      #FFFFFF     content ground                   (the 25%)
                  #F2F4F7
   Orange         #F47B20     engineering alerts, key CTAs     (the 3%)
   Green          #16854A     growth, India-themed accent      (the 2%)
*/

:root {
  /* ── brand constants, referenced directly where a named colour reads clearer ── */
  --awtis-navy: #101F4F;
  --awtis-tech: #103060;
  --awtis-midnight: #101840;
  --awtis-electric: #104C9A;
  --awtis-cyan: #008FD5;
  --awtis-cyan-bright: #00C8F0;
  --awtis-white: #FFFFFF;
  --awtis-offwhite: #F2F4F7;
  --awtis-orange: #F47B20;
  --awtis-green: #16854A;

  --awtis-gradient-tech: linear-gradient(135deg, #101F4F 0%, #103060 52%, #104C9A 100%);
  --awtis-gradient-glow: linear-gradient(115deg, #101F4F 0%, #0066B3 55%, #00C8F0 100%);

  /* ── Industry roles, re-pointed ── */
  --color-bg: #F2F4F7;
  --color-surface: #E7EBF1;
  --color-text: #101840;
  --color-accent: #104C9A;
  --color-accent-2: #008FD5;
  --color-divider: color-mix(in srgb, #101F4F 18%, transparent);

  /* Accent ramp — the navy→electric→cyan spine. 900 carries the section
     fields, 700 carries accent-coloured body copy, 500 is the base. */
  --color-accent-100: #EAF2FB;
  --color-accent-200: #CCE0F5;
  --color-accent-300: #9DC4EC;
  --color-accent-400: #66A0DD;
  --color-accent-500: #2F76C4;
  --color-accent-600: #1A5CAB;
  --color-accent-700: #104C9A;
  --color-accent-800: #103060;
  --color-accent-900: #101F4F;

  /* Second ramp — the cyan family, for technical drawing and live glow. */
  --color-accent-2-100: #E4F7FD;
  --color-accent-2-200: #BFEDFA;
  --color-accent-2-300: #8ADEF6;
  --color-accent-2-400: #45CBF2;
  --color-accent-2-500: #00C8F0;
  --color-accent-2-600: #00A8DC;
  --color-accent-2-700: #008FD5;
  --color-accent-2-800: #0066B3;
  --color-accent-2-900: #103060;

  /* Neutrals warmed a touch toward the brand's blue rather than pure grey. */
  --color-neutral-100: #F7F8FA;
  --color-neutral-200: #EBEDF2;
  --color-neutral-300: #D6DAE3;
  --color-neutral-400: #B3B9C6;
  --color-neutral-500: #8E96A6;
  --color-neutral-600: #6C7486;
  --color-neutral-700: #4C5468;
  --color-neutral-800: #2F3648;
  --color-neutral-900: #1A2033;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #101F4F 16%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #101F4F 18%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #101F4F 24%, transparent);
}

/* Tags: the palette's minor accents get their own variants rather than
   being sprinkled arbitrarily. Orange is an alert, green is growth. */
.tag-alert {
  background: color-mix(in srgb, var(--awtis-orange) 14%, transparent);
  border-color: color-mix(in srgb, var(--awtis-orange) 45%, transparent);
  color: #A85010;
}
.tag-growth {
  background: color-mix(in srgb, var(--awtis-green) 13%, transparent);
  border-color: color-mix(in srgb, var(--awtis-green) 42%, transparent);
  color: #0E5C33;
}
.tag-cyan {
  background: color-mix(in srgb, var(--awtis-cyan) 14%, transparent);
  border-color: color-mix(in srgb, var(--awtis-cyan) 45%, transparent);
  color: #00618F;
}

/* Primary buttons rest in electric blue and turn to the palette's orange on
   hover — the 3% accent, spent on the moment of intent. */
.btn-primary:hover {
  background: var(--awtis-orange);
  border-color: var(--awtis-orange);
  color: #FFFFFF;
}
.btn-primary:active {
  background: #C25E0F;
  border-color: #C25E0F;
  color: #FFFFFF;
}
.btn-primary:hover .corner { color: #FFFFFF; }

/* A CTA that needs to outrank the primary — the palette's 3% orange. */
.btn-alert {
  background: var(--awtis-orange);
  border-color: var(--awtis-orange);
  color: #FFFFFF;
}
.btn-alert:hover { background: #DB6A12; border-color: #DB6A12; }
.btn-alert:active { background: #C25E0F; border-color: #C25E0F; }

/* Live/status marker — bright cyan reads as "instrument on" against navy. */
.awtis-live {
  background: var(--awtis-cyan-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--awtis-cyan-bright) 26%, transparent);
}

/* Deep-navy fields: any section that reverses to the navy ground gets its
   own local roles so nested components keep working without per-element
   overrides. */
.awtis-field {
  background: var(--awtis-navy);
  color: var(--awtis-offwhite);
  --color-text: #F2F4F7;
  --color-divider: color-mix(in srgb, #F2F4F7 24%, transparent);
  --color-accent: #45CBF2;
  --color-accent-700: #8ADEF6;
}
.awtis-field-gradient {
  background: var(--awtis-gradient-tech);
  color: var(--awtis-offwhite);
  --color-text: #F2F4F7;
  --color-divider: color-mix(in srgb, #F2F4F7 24%, transparent);
  --color-accent: #45CBF2;
  --color-accent-700: #8ADEF6;
}