/* ============================================================
   GUARDJO — Cyber & Compliance Hub
   Design Tokens — Glassmorphic Bold with Royal Blue
   ============================================================
   Token naming convention:
   --g-{category}-{property}-{variant}
   g = guardjo namespace
   ============================================================ */

/* ─── ROOT: STATIC TOKENS (mode-independent) ──────────────── */
:root {

  /* ── Royal Blue Scale ──────────────────────────────────── */
  --g-royal-50:  #EFF4FF;
  --g-royal-100: #DBE4FE;
  --g-royal-200: #BFCFFE;
  --g-royal-300: #93B2FD;
  --g-royal-400: #6090FA;
  --g-royal-500: #3B6FF6;
  --g-royal-600: #1A56DB;   /* ★ PRIMARY ACCENT */
  --g-royal-700: #1747C4;
  --g-royal-800: #193B9F;
  --g-royal-900: #1A347D;
  --g-royal-950: #12214D;

  /* ── Violet Scale (AI / secondary accent) ──────────────── */
  --g-violet-50:  #F5F3FF;
  --g-violet-100: #EDE9FE;
  --g-violet-200: #DDD6FE;
  --g-violet-300: #C4B5FD;
  --g-violet-400: #A78BFA;
  --g-violet-500: #8B5CF6;
  --g-violet-600: #7C3AED;
  --g-violet-700: #6D28D9;
  --g-violet-800: #5B21B6;
  --g-violet-900: #4C1D95;

  /* ── Neutral Scale (cool-tinted) ───────────────────────── */
  --g-neutral-0:   #FFFFFF;
  --g-neutral-50:  #F8FAFC;
  --g-neutral-100: #F1F5F9;
  --g-neutral-200: #E2E8F0;
  --g-neutral-300: #CBD5E1;
  --g-neutral-400: #94A3B8;
  --g-neutral-500: #64748B;
  --g-neutral-600: #475569;
  --g-neutral-700: #334155;
  --g-neutral-800: #1E293B;
  --g-neutral-900: #0F172A;
  --g-neutral-950: #020617;

  /* ── Semantic: Success (Emerald) ───────────────────────── */
  --g-emerald-50:  #ECFDF5;
  --g-emerald-100: #D1FAE5;
  --g-emerald-400: #34D399;
  --g-emerald-500: #10B981;
  --g-emerald-600: #059669;
  --g-emerald-700: #047857;
  --g-emerald-900: #064E3B;

  /* ── Semantic: Warning (Amber) ─────────────────────────── */
  --g-amber-50:  #FFFBEB;
  --g-amber-100: #FEF3C7;
  --g-amber-400: #FBBF24;
  --g-amber-500: #F59E0B;
  --g-amber-600: #D97706;
  --g-amber-700: #B45309;
  --g-amber-900: #78350F;

  /* ── Semantic: Danger (Ruby) ───────────────────────────── */
  --g-ruby-50:  #FEF2F2;
  --g-ruby-100: #FEE2E2;
  --g-ruby-400: #F87171;
  --g-ruby-500: #EF4444;
  --g-ruby-600: #DC2626;
  --g-ruby-700: #B91C1C;
  --g-ruby-900: #7F1D1D;

  /* ── Semantic: Info (Sky) ──────────────────────────────── */
  --g-sky-50:  #F0F9FF;
  --g-sky-100: #E0F2FE;
  --g-sky-400: #38BDF8;
  --g-sky-500: #0EA5E9;
  --g-sky-600: #0284C7;
  --g-sky-700: #0369A1;
  --g-sky-900: #0C4A6E;

  /* ── Typography ────────────────────────────────────────── */
  --g-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --g-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --g-text-xs:    0.75rem;    /* 12px */
  --g-text-sm:    0.8125rem;  /* 13px */
  --g-text-base:  0.875rem;   /* 14px — dashboard default */
  --g-text-md:    1rem;       /* 16px */
  --g-text-lg:    1.125rem;   /* 18px */
  --g-text-xl:    1.25rem;    /* 20px */
  --g-text-2xl:   1.5rem;     /* 24px */
  --g-text-3xl:   1.875rem;   /* 30px */
  --g-text-4xl:   2.25rem;    /* 36px */
  --g-text-5xl:   3rem;       /* 48px */

  --g-leading-tight:  1.2;
  --g-leading-snug:   1.35;
  --g-leading-normal: 1.5;
  --g-leading-relaxed: 1.625;

  --g-tracking-tight:  -0.025em;
  --g-tracking-normal:  0;
  --g-tracking-wide:    0.025em;
  --g-tracking-wider:   0.05em;

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

  /* ── Spacing (4px base) ────────────────────────────────── */
  --g-space-0:  0;
  --g-space-px: 1px;
  --g-space-0-5: 0.125rem;  /* 2px */
  --g-space-1:  0.25rem;    /* 4px */
  --g-space-1-5: 0.375rem;  /* 6px */
  --g-space-2:  0.5rem;     /* 8px */
  --g-space-2-5: 0.625rem;  /* 10px */
  --g-space-3:  0.75rem;    /* 12px */
  --g-space-4:  1rem;       /* 16px */
  --g-space-5:  1.25rem;    /* 20px */
  --g-space-6:  1.5rem;     /* 24px */
  --g-space-8:  2rem;       /* 32px */
  --g-space-10: 2.5rem;     /* 40px */
  --g-space-12: 3rem;       /* 48px */
  --g-space-16: 4rem;       /* 64px */
  --g-space-20: 5rem;       /* 80px */
  --g-space-24: 6rem;       /* 96px */

  /* ── Border Radius ─────────────────────────────────────── */
  --g-radius-sm:   6px;     /* inputs, small buttons */
  --g-radius-md:   10px;    /* cards, standard panels */
  --g-radius-lg:   16px;    /* large panels, sections */
  --g-radius-xl:   24px;    /* modals, hero cards */
  --g-radius-2xl:  20px;    /* bento cards, premium panels */
  --g-radius-3xl:  28px;    /* showcase elements */
  --g-radius-full: 9999px;  /* pills, avatars */

  /* ── Shadows ───────────────────────────────────────────── */
  --g-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --g-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --g-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --g-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
  --g-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* ── Glassmorphism: Blur Intensities ───────────────────── */
  --g-blur-sm:    8px;
  --g-blur-md:    16px;
  --g-blur-lg:    24px;
  --g-blur-xl:    40px;

  /* ── Transitions ───────────────────────────────────────── */
  --g-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --g-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --g-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --g-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --g-duration-fast:    120ms;
  --g-duration-normal:  200ms;
  --g-duration-slow:    350ms;
  --g-duration-slower:  500ms;

  /* ── Z-Index Scale ─────────────────────────────────────── */
  --g-z-base:     0;
  --g-z-raised:   10;
  --g-z-dropdown: 100;
  --g-z-sticky:   200;
  --g-z-overlay:  300;
  --g-z-modal:    400;
  --g-z-toast:    500;
  --g-z-max:      9999;

  /* ── Layout ────────────────────────────────────────────── */
  --g-sidebar-width:     260px;
  --g-sidebar-collapsed: 72px;
  --g-topbar-height:     56px;
  --g-content-max-width: 1280px;
}


/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root,
[data-theme="light"] {

  /* ── Canvas ────────────────────────────────────────────── */
  --g-canvas:         #F1F4F9;
  --g-canvas-subtle:  #F8FAFC;

  /* ── Surfaces (elevation system) ───────────────────────── */
  --g-surface-0:      #FFFFFF;                          /* base cards */
  --g-surface-1:      rgba(255, 255, 255, 0.82);       /* glass panels */
  --g-surface-2:      rgba(255, 255, 255, 0.68);       /* dropdowns on glass */
  --g-surface-3:      rgba(255, 255, 255, 0.55);       /* nested overlays */
  --g-surface-raised: #FFFFFF;                          /* elevated cards */
  --g-surface-inset:  #EDF1F7;                          /* input backgrounds */

  /* ── Glassmorphism ─────────────────────────────────────── */
  --g-glass-bg:       rgba(255, 255, 255, 0.72);
  --g-glass-bg-bold:  rgba(255, 255, 255, 0.85);
  --g-glass-border:   rgba(255, 255, 255, 0.60);
  --g-glass-highlight: rgba(255, 255, 255, 0.90);
  --g-glass-blur:     var(--g-blur-md);
  --g-glass-blur-bold: var(--g-blur-lg);

  /* ── Ink (text hierarchy) ──────────────────────────────── */
  --g-ink-primary:    var(--g-neutral-900);    /* #0F172A — headings, primary text */
  --g-ink-secondary:  var(--g-neutral-600);    /* #475569 — supporting text */
  --g-ink-tertiary:   var(--g-neutral-500);    /* #64748B — metadata, labels */
  --g-ink-muted:      var(--g-neutral-400);    /* #94A3B8 — placeholders, disabled */
  --g-ink-inverse:    var(--g-neutral-0);      /* #FFFFFF — on dark/accent bg */

  /* ── Borders ───────────────────────────────────────────── */
  --g-border-default: rgba(15, 23, 42, 0.08);     /* standard separation */
  --g-border-subtle:  rgba(15, 23, 42, 0.05);     /* softer separation */
  --g-border-strong:  rgba(15, 23, 42, 0.15);     /* emphasis */
  --g-border-focus:   var(--g-royal-500);          /* focus rings */

  /* ── Accent (Royal Blue) ───────────────────────────────── */
  --g-accent:         var(--g-royal-600);
  --g-accent-hover:   var(--g-royal-700);
  --g-accent-active:  var(--g-royal-800);
  --g-accent-subtle:  var(--g-royal-50);
  --g-accent-muted:   var(--g-royal-100);  /* Numbered aliases (used in inline styles) */
  --g-accent-50:      var(--g-royal-50);
  --g-accent-100:     var(--g-royal-100);
  --g-accent-300:     var(--g-royal-300);
  --g-accent-600:     var(--g-royal-600);
  /* ── Semantic surfaces ─────────────────────────────────── */
  --g-success-bg:     var(--g-emerald-50);
  --g-success-text:   var(--g-emerald-700);
  --g-success-border: var(--g-emerald-400);
  --g-success-icon:   var(--g-emerald-500);

  --g-warning-bg:     var(--g-amber-50);
  --g-warning-text:   var(--g-amber-700);
  --g-warning-border: var(--g-amber-400);
  --g-warning-icon:   var(--g-amber-500);

  --g-danger-bg:      var(--g-ruby-50);
  --g-danger-text:    var(--g-ruby-700);
  --g-danger-border:  var(--g-ruby-400);
  --g-danger-icon:    var(--g-ruby-500);

  --g-info-bg:        var(--g-sky-50);
  --g-info-text:      var(--g-sky-700);
  --g-info-border:    var(--g-sky-400);
  --g-info-icon:      var(--g-sky-500);

  /* ── Controls ──────────────────────────────────────────── */
  --g-control-bg:     var(--g-neutral-50);
  --g-control-border: var(--g-neutral-300);
  --g-control-hover:  var(--g-neutral-100);
  --g-control-focus-ring: rgba(26, 86, 219, 0.25);

  /* ── Shield Pulse (signature glow) ─────────────────────── */
  --g-pulse-color:    rgba(26, 86, 219, 0.15);
  --g-pulse-ring:     rgba(26, 86, 219, 0.08);

  /* ── Overlay ───────────────────────────────────────────── */
  --g-overlay:        rgba(15, 23, 42, 0.40);
  --g-overlay-light:  rgba(15, 23, 42, 0.20);
}


/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {

  /* ── Canvas ────────────────────────────────────────────── */
  --g-canvas:         #0B1121;
  --g-canvas-subtle:  #0F172A;

  /* ── Surfaces ──────────────────────────────────────────── */
  --g-surface-0:      #151E31;
  --g-surface-1:      rgba(21, 30, 49, 0.82);
  --g-surface-2:      rgba(25, 36, 58, 0.78);
  --g-surface-3:      rgba(30, 41, 63, 0.72);
  --g-surface-raised: #1A2540;
  --g-surface-inset:  #0D1526;

  /* ── Glassmorphism ─────────────────────────────────────── */
  --g-glass-bg:       rgba(15, 23, 42, 0.65);
  --g-glass-bg-bold:  rgba(15, 23, 42, 0.82);
  --g-glass-border:   rgba(255, 255, 255, 0.08);
  --g-glass-highlight: rgba(255, 255, 255, 0.04);
  --g-glass-blur:     var(--g-blur-md);
  --g-glass-blur-bold: var(--g-blur-lg);

  /* ── Ink ───────────────────────────────────────────────── */
  --g-ink-primary:    #F1F5F9;
  --g-ink-secondary:  #94A3B8;
  --g-ink-tertiary:   #64748B;
  --g-ink-muted:      #475569;
  --g-ink-inverse:    #0F172A;

  /* ── Borders ───────────────────────────────────────────── */
  --g-border-default: rgba(255, 255, 255, 0.08);
  --g-border-subtle:  rgba(255, 255, 255, 0.04);
  --g-border-strong:  rgba(255, 255, 255, 0.14);
  --g-border-focus:   var(--g-royal-400);

  /* ── Accent (Royal Blue — slightly lighter for dark bg) ── */
  --g-accent:         var(--g-royal-500);
  --g-accent-hover:   var(--g-royal-400);
  --g-accent-active:  var(--g-royal-600);
  --g-accent-subtle:  rgba(26, 86, 219, 0.15);
  --g-accent-muted:   rgba(26, 86, 219, 0.10);
  /* Numbered aliases (dark-adapted) */
  --g-accent-50:      rgba(26, 86, 219, 0.08);
  --g-accent-100:     rgba(26, 86, 219, 0.12);
  --g-accent-300:     var(--g-royal-400);
  --g-accent-600:     var(--g-royal-500);

  /* ── Semantic (slightly desaturated for dark mode) ─────── */
  --g-success-bg:     rgba(5, 150, 105, 0.12);
  --g-success-text:   #6EE7B7;
  --g-success-border: rgba(52, 211, 153, 0.25);
  --g-success-icon:   #34D399;

  --g-warning-bg:     rgba(217, 119, 6, 0.12);
  --g-warning-text:   #FCD34D;
  --g-warning-border: rgba(251, 191, 36, 0.25);
  --g-warning-icon:   #FBBF24;

  --g-danger-bg:      rgba(220, 38, 38, 0.12);
  --g-danger-text:    #FCA5A5;
  --g-danger-border:  rgba(248, 113, 113, 0.25);
  --g-danger-icon:    #F87171;

  --g-info-bg:        rgba(2, 132, 199, 0.12);
  --g-info-text:      #7DD3FC;
  --g-info-border:    rgba(56, 189, 248, 0.25);
  --g-info-icon:      #38BDF8;

  /* ── Controls ──────────────────────────────────────────── */
  --g-control-bg:     rgba(255, 255, 255, 0.04);
  --g-control-border: rgba(255, 255, 255, 0.10);
  --g-control-hover:  rgba(255, 255, 255, 0.06);
  --g-control-focus-ring: rgba(59, 111, 246, 0.30);

  /* ── Shield Pulse ──────────────────────────────────────── */
  --g-pulse-color:    rgba(59, 111, 246, 0.20);
  --g-pulse-ring:     rgba(59, 111, 246, 0.10);

  /* ── Overlay ───────────────────────────────────────────── */
  --g-overlay:        rgba(0, 0, 0, 0.60);
  --g-overlay-light:  rgba(0, 0, 0, 0.35);

  /* ── Shadow adjustments for dark mode ──────────────────── */
  --g-shadow-xs:  0 1px 2px rgba(0,0,0,0.20);
  --g-shadow-sm:  0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.20);
  --g-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.30), 0 2px 4px -2px rgba(0,0,0,0.20);
  --g-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.20);
  --g-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.40), 0 8px 10px -6px rgba(0,0,0,0.20);
}