/* ============================================================
   Liquid Barcodes RAG — Design Tokens
   Single source of truth for color, type, spacing, radius.
   Do not hardcode values outside this file; reference via var().
   ============================================================ */

:root {
  /* Color — Light mode (default) */
  --color-bg:              #FAFBFC;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F4F6F8;
  --color-surface-3:       #EDF0F3;
  --color-border:          #E4E7EB;
  --color-border-strong:   #CBD2D9;
  --color-text:            #0F1419;
  --color-text-muted:      #52606D;
  --color-text-subtle:     #7B8794;
  --color-accent:          #1E6FD9;
  --color-accent-hover:    #1A5FBF;
  --color-accent-active:   #154FA0;
  --color-accent-soft:     #E8F0FB;
  --color-accent-soft-2:   #D4E3F7;
  --color-brand-deep:      #0A3D8C;
  --color-brand-deep-2:    #103E91;
  --color-success:         #2D7A3E;
  --color-success-soft:    #E6F4EA;
  --color-warning:         #B8740C;
  --color-warning-soft:    #FCF1E0;
  --color-danger:          #C8392B;
  --color-danger-soft:     #FBE9E7;
  --color-info:            #1E6FD9;
  --color-info-soft:       #E8F0FB;

  /* Brand gradient — used on login hero, accent decorations */
  --gradient-brand-start:  #1F4FD9;  /* deep brand blue */
  --gradient-brand-mid:    #6E3FD9;  /* purple */
  --gradient-brand-end:    #C740B5;  /* magenta */
  --gradient-brand: linear-gradient(135deg,
    var(--gradient-brand-start) 0%,
    var(--gradient-brand-mid) 55%,
    var(--gradient-brand-end) 100%);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

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

  /* Spacing — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Shadows (light only — dark uses borders) */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 20, 25, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 61, 140, 0.12);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Layout */
  --max-content: 1200px;
  --max-prose:   720px;
}

/* Dark mode — same tokens, different values */
:root[data-theme="dark"] {
  --color-bg:              #0E1217;
  --color-surface:         #161B22;
  --color-surface-2:       #1F2630;
  --color-surface-3:       #29313D;
  --color-border:          #2A323C;
  --color-border-strong:   #3A4452;
  --color-text:            #E6EAF0;
  --color-text-muted:      #9AA5B1;
  --color-text-subtle:     #6B7785;
  --color-accent:          #4A9CFF;
  --color-accent-hover:    #6FB1FF;
  --color-accent-active:   #2A82E8;
  --color-accent-soft:     #15263F;
  --color-accent-soft-2:   #1C355C;
  --color-brand-deep:      #0A3D8C;
  --color-brand-deep-2:    #103E91;
  --color-success:         #4ADE80;
  --color-success-soft:    #143020;
  --color-warning:         #F0B864;
  --color-warning-soft:    #382819;
  --color-danger:          #F47568;
  --color-danger-soft:     #3A1F1B;
  --color-info:            #4A9CFF;
  --color-info-soft:       #15263F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft-2);
}

/* System preference fallback when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #0E1217;
    --color-surface:         #161B22;
    --color-surface-2:       #1F2630;
    --color-surface-3:       #29313D;
    --color-border:          #2A323C;
    --color-border-strong:   #3A4452;
    --color-text:            #E6EAF0;
    --color-text-muted:      #9AA5B1;
    --color-text-subtle:     #6B7785;
    --color-accent:          #4A9CFF;
    --color-accent-hover:    #6FB1FF;
    --color-accent-active:   #2A82E8;
    --color-accent-soft:     #15263F;
    --color-accent-soft-2:   #1C355C;
    --color-success:         #4ADE80;
    --color-success-soft:    #143020;
    --color-warning:         #F0B864;
    --color-warning-soft:    #382819;
    --color-danger:          #F47568;
    --color-danger-soft:     #3A1F1B;
    --color-info:            #4A9CFF;
    --color-info-soft:       #15263F;
  }
}

/* Minimal element resets — safe to apply globally */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}