/* De Narrowcasters — Screen Manager — design tokens
   Self-contained copy of the design-system tokens used by this app. */

@font-face { font-family:"Montserrat"; font-style:normal; font-weight:400; src:url("../assets/fonts/Montserrat-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:500; src:url("../assets/fonts/Montserrat-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:600; src:url("../assets/fonts/Montserrat-SemiBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:700; src:url("../assets/fonts/Montserrat-Bold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:800; src:url("../assets/fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:900; src:url("../assets/fonts/Montserrat-Black.ttf") format("truetype"); font-display:swap; }

:root {
  --cyan-100: #D6FCFF;
  --cyan-400: #24F5FF;
  --cyan-500: #14E2EF;
  --cyan-600: #0FC2D0;
  --cyan-700: #0E8C97;

  --green-400: #28FFB7;

  --indigo-950: #1B1838;
  --indigo-900: #232043;
  --indigo-800: #2E2A4F;
  --indigo-700: #3A3663;
  --indigo-600: #4A4677;
  --indigo-400: #7E7AA6;

  --ink-900: #1E1B3A;
  --ink-700: #3B3A52;
  --ink-600: #4C4D5E;
  --ink-400: #8A8B99;

  --white: #FFFFFF;
  --paper: #F5F6F8;
  --paper-2: #EDEFF3;
  --line: #DFE1EA;
  --line-2: #C7C9D6;

  --success: #1FB36B;
  --success-bg: #E4F7EE;
  --warning: #F5A623;
  --warning-bg: #FDF1DC;
  --danger: #E5484D;
  --danger-bg: #FCE7E8;
  --info: #14E2EF;
  --info-bg: #E0FBFE;

  --accent: var(--cyan-400);
  --accent-strong: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-deep: var(--cyan-700);
  --accent-contrast: var(--indigo-900);
  --accent-tint: var(--cyan-100);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-inverse: var(--white);

  --surface-page: var(--white);
  --surface-subtle: var(--paper);
  --surface-card: var(--white);
  --surface-dark: var(--indigo-800);
  --surface-dark-deep: var(--indigo-900);

  --border-subtle: var(--line);
  --border-strong: var(--line-2);
  --border-on-dark: var(--indigo-600);

  --grad-energy: linear-gradient(135deg, var(--cyan-400) 0%, var(--green-400) 100%);

  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(30,27,58,.06);
  --shadow-sm: 0 2px 8px rgba(30,27,58,.08);
  --shadow-md: 0 8px 24px rgba(30,27,58,.10);
  --shadow-lg: 0 18px 48px rgba(30,27,58,.16);
  --shadow-cyan: 0 8px 24px rgba(37,245,255,.28);

  --dur-fast: 120ms;
  --dur: 200ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-subtle);
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--accent-deep); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--cyan-100); color: var(--ink-900); }