/*
 * Niquelle Cloud Services — global design tokens.
 *
 * IMPORTANT: this is the ONLY stylesheet that reaches every LWC's Shadow DOM, and only
 * via CSS custom-property inheritance (normal class/tag selectors below the :root block
 * do NOT pierce Shadow DOM). Every component's own .css file must define its own class
 * rules using these var(--...) tokens — see reference/commonPatterns.css in the repo for
 * the shared utility classes each component should copy in.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  --color-bg:          #0B0F17;
  --color-bg-2:        #111827;
  --color-surface:     #151C28;
  --color-surface-2:   #1A2235;
  --color-border:      #1F2D44;
  --color-border-2:    #253044;

  --color-text:        #F1F5F9;
  --color-text-muted:  #94A3B8;
  --color-text-faint:  #4B5E78;

  --color-accent:      #0EA5E9;
  --color-accent-dim:  #0284C7;
  --color-accent-glow: rgba(14,165,233,0.12);
  --color-accent-line: rgba(14,165,233,0.3);

  --color-white:       #F8FAFC;

  --font-display:      'DM Serif Display', Georgia, serif;
  --font-body:         'DM Sans', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', monospace;

  --radius:            4px;
  --radius-md:         8px;

  --max-w:             1200px;
  --max-w-text:        720px;

  --transition:        200ms cubic-bezier(.4,0,.2,1);
}

html,
body {
    height: 100%;
}

html {
    background: var(--color-bg);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
}