/* The design values for every page. Both Razor layouts (_Head) and the admin's index.html link this file. Dark only. */
:root {
  color-scheme: dark;

  /* Background & surfaces */
  --color-bg:              #070A12;
  --color-surface:         #0E1424;
  --color-surface-2:       #141B2E;
  --color-surface-3:       #1B2339;

  /* Primary: Indigo */
  --color-primary:         #8FB0FF;
  --color-primary-hover:   #A6C1FF;
  --color-primary-subtle:  #17213F;
  --color-primary-ring:    rgba(143, 176, 255, 0.35);

  /* Accent: the cyan edge light */
  --color-accent:          #5FD4F0;
  --color-accent-hover:    #84DEF4;
  --color-accent-subtle:   #0F2A33;

  /* Text */
  --color-text-1:          #ECF0F8;
  --color-text-2:          #A3ADC2;
  --color-text-3:          #808BA2;
  --color-text-on-primary: #070A12;
  --color-text-on-accent:  #070A12;

  /* Borders */
  --color-border:          #1F2840;
  --color-border-2:        #2A3552;
  --color-border-subtle:   #161D30;

  /* Semantic */
  --color-success:         #34D399;
  --color-success-subtle:  #0D2B1F;
  --color-warning:         #FCD34D;
  --color-warning-subtle:  #2A1F00;
  --color-error:           #F87171;
  --color-error-subtle:    #2C0A0A;
  --color-info:            #60A5FA;
  --color-info-subtle:     #0A1A3A;

  /* The admin's rail */
  --color-sidebar:         #0A0F1C;
  --color-sidebar-text:    rgba(255, 255, 255, 0.85);
  --color-sidebar-muted:   rgba(255, 255, 255, 0.6);
  --color-sidebar-active:  rgba(255, 255, 255, 0.12);
  --color-sidebar-hover:   rgba(255, 255, 255, 0.07);
  --color-sidebar-divider: rgba(255, 255, 255, 0.08);

  /* Form fields on the sign-in card */
  --input-fill:            rgba(255, 255, 255, 0.035);
  --input-border:          rgba(255, 255, 255, 0.12);

  /* The Glow backdrop */
  --glow-main:             rgba(56, 92, 255, 0.52);
  --glow-edge:             rgba(60, 200, 235, 0.30);
  --glow-rim:              #D6E4FF;
  --card-surface:          rgba(14, 20, 36, 0.66);
  /* The small light behind the admin's empty states */
  --spot-glow:             rgba(56, 92, 255, 0.30);
  /* Fine grain so the lights don't band: the sign-in backdrop, the admin's rail and My apps */
  --glow-grain:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Frosted things floating over the admin: dialogs, menus, pop-ups, toasts, the overlay panel */
  --float-surface:         rgba(16, 23, 41, 0.74);
  --float-border:          rgba(255, 255, 255, 0.07);
  --float-hover:           rgba(255, 255, 255, 0.06);
  --scrim:                 rgba(4, 6, 12, 0.55);

  /* App tiles: an app's initial, in --color-text-on-primary, on one of these (AppTile.For picks it from the app's id) */
  --tile-1:                #F2B544;
  --tile-2:                #FF8A5C;
  --tile-3:                #F28AD0;
  --tile-4:                #8FB0FF;
  --tile-5:                #5FD4F0;
  --tile-6:                #6EE7B7;
  --tile-7:                #C4B5FD;
  --tile-8:                #FCA5A5;

  /* Typography */
  --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

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

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

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

  /* Light text on a dark ground reads heavier; small text gets a touch of air. */
  --tracking-small: 0.01em;

  /* Spacing */
  --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;

  /* Border radius */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Shadows, deeper for a dark ground */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.40), 0 8px 10px rgba(0, 0, 0, 0.30);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}