/*  ============================================================================
    AURAFY — Operator Design System
    Modern technical aesthetic for a security + software development group.
    Pure-white header, sky-celeste body, brand violet signature, cyan luminous
    accent, hairline rules, restrained motion. Zero warm tones.
    ============================================================================ */

:root {
  /* ----------------------------------------------------------------------
     COLOR — celeste paper, blue-cool ink, brand violet, technical cyan
     ---------------------------------------------------------------------- */

  /* Surfaces — sky-celeste paper, clearly blue-tinted */
  --color-bg:           #EEF5FA;   /* very light celeste — body */
  --color-paper:        #FFFFFF;   /* pure white — cards, header */
  --color-bg-soft:      #DFEBF4;   /* deeper celeste — section--soft */
  --color-bg-muted:     #CFE0EC;   /* deeper celeste — section--muted */
  --color-bg-deep:      #08111B;   /* deep ink-blue — inverted surfaces */
  --color-bg-deep-2:    #111B26;

  /* Ink scale — cool, slight blue undertone */
  --color-ink:          #0A1218;
  --color-ink-2:        #3A434E;
  --color-ink-3:        #6B7785;
  --color-ink-4:        #9CA8B5;

  /* Aliases for legacy class names already present in markup */
  --color-text:         #0A1218;
  --color-text-muted:   #3A434E;
  --color-text-subtle:  #6B7785;
  --color-border:       #D2DFE9;   /* cool blue-tinted border */
  --color-border-strong:#A8B9C8;

  /* Brand violet — kept and sharpened. Signature accent. */
  --color-primary:       #5921FF;
  --color-primary-dark:  #4615CC;
  --color-primary-700:   #5921FF;
  --color-primary-100:   #D9CCFF;
  --color-primary-50:    #EFE9FF;

  /* Technical luminous — electric cyan. Used for code, status, hover detail.
     Now coherent with the celeste base. */
  --color-accent:        #00B4DB;
  --color-accent-dark:   #008CAD;
  --color-accent-100:    #B0E5F2;
  --color-accent-50:     #DCF2F8;

  /* Status — clean tech */
  --color-success:       #10B981;
  --color-success-50:    #D1FAE5;
  --color-warn:          #F59E0B;
  --color-danger:        #EF4444;
  --color-whatsapp:      #25D366;

  /* Translucent ink for overlays, inset lines */
  --ink-04: rgba(10,18,24,.04);
  --ink-08: rgba(10,18,24,.08);
  --ink-12: rgba(10,18,24,.12);
  --ink-20: rgba(10,18,24,.20);
  --ink-40: rgba(10,18,24,.40);

  /* Translucent paper for dark surfaces */
  --paper-08: rgba(255,255,255,.08);
  --paper-12: rgba(255,255,255,.12);
  --paper-20: rgba(255,255,255,.20);
  --paper-40: rgba(255,255,255,.40);
  --paper-70: rgba(255,255,255,.70);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Geist (display+body) + Geist Mono (technical)
     ---------------------------------------------------------------------- */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-sans:    var(--font-body);

  /* Type scale — modern tech, restrained sizes */
  --fs-micro:   0.6875rem;   /* 11px */
  --fs-xs:      0.75rem;     /* 12px */
  --fs-sm:      0.8125rem;   /* 13px */
  --fs-base:    0.9375rem;   /* 15px — body */
  --fs-lg:      1.0625rem;   /* 17px */
  --fs-xl:      1.1875rem;   /* 19px */
  --fs-2xl:     1.4375rem;   /* 23px */
  --fs-3xl:     1.75rem;
  --fs-4xl:     2.125rem;
  --fs-5xl:     2.75rem;
  --fs-hero:    clamp(2.125rem, 3.5vw + 0.6rem, 3.875rem);
  --fs-display: clamp(2.5rem, 5vw + 0.75rem, 5rem);

  /* Tracking — modern tech is tight */
  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.018em;
  --tracking-snug:    -0.01em;
  --tracking-wide:    0.03em;
  --tracking-mono:    0.06em;
  --tracking-caps:    0.10em;

  /* ----------------------------------------------------------------------
     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-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ----------------------------------------------------------------------
     RADII — sharp, technical
     ---------------------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------------
     SHADOWS — cool blue-tinted
     ---------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(10,18,24,.04);
  --shadow-md:  0 1px 0 rgba(10,18,24,.04), 0 8px 16px -8px rgba(10,18,24,.10);
  --shadow-lg:  0 1px 0 rgba(10,18,24,.06), 0 24px 48px -20px rgba(10,18,24,.18);
  --shadow-xl:  0 1px 0 rgba(10,18,24,.06), 0 60px 120px -40px rgba(10,18,24,.30);
  --shadow-glow:0 0 0 1px rgba(89,33,255,.18), 0 18px 40px -12px rgba(89,33,255,.30);
  --shadow-cyan:0 0 0 1px rgba(0,180,219,.30), 0 12px 28px -10px rgba(0,180,219,.30);

  /* ----------------------------------------------------------------------
     RULES — hairlines that structure technical layouts
     ---------------------------------------------------------------------- */
  --rule-hair: 1px solid var(--color-border-strong);
  --rule-soft: 1px solid var(--color-border);
  --rule-ink:  1px solid var(--color-ink);

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-max:    1280px;
  --container-narrow: 920px;
  --container-prose:  680px;
  --header-h:         68px;

  /* ----------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-rule:   cubic-bezier(.85,.05,.25,1);
  --t-fast:      160ms;
  --t-med:       280ms;
  --t-slow:      520ms;
  --t-page:      800ms;
}

/* Reduce motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}