/**
 * KTG Connect — Design Tokens
 * ============================================================
 * All CSS custom properties live here.
 * Import this first in every HTML file.
 *
 * Usage: var(--color-primary), var(--space-4), etc.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Brand Colours ─────────────────────────────────────────────────── */
  --color-primary:        #068927;
  --color-primary-90:     #068927E5;
  --color-primary-80:     #068927CC;
  --color-primary-70:     #068927B2;
  --color-primary-60:     #06892799;
  --color-primary-40:     #06892766;
  --color-primary-15:     #06892726;

  /* ── Semantic Colours ──────────────────────────────────────────────── */
  --color-bg:             #FFFFFF;
  --color-text:           #0F1712;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #9CA3AF;
  --color-sidebar-bg:     #FFFFFF;
  --color-border:         #E5E7EB;
  --color-border-light:   #F3F4F6;
  --color-surface:        #F9FAFB;
  --color-surface-hover:  #F3F4F6;

  /* ── Status Colours ────────────────────────────────────────────────── */
  --color-success:        #068927;
  --color-success-bg:     #06892726;
  --color-error:          #DC2626;
  --color-error-bg:       #FEE2E2;
  --color-warning:        #D97706;
  --color-warning-bg:     #FEF3C7;
  --color-info:           #2563EB;
  --color-info-bg:        #DBEAFE;

  /* ── Badge / Tag Colours ───────────────────────────────────────────── */
  --badge-active-bg:      #06892726;
  --badge-active-text:    #068927;
  --badge-suspended-bg:   #FEE2E2;
  --badge-suspended-text: #DC2626;
  --badge-pending-bg:     #FEF3C7;
  --badge-pending-text:   #D97706;
  --badge-draft-bg:       #F3F4F6;
  --badge-draft-text:     #6B7280;
  --badge-official-bg:    #DBEAFE;
  --badge-official-text:  #2563EB;
  --badge-community-bg:   #F3E8FF;
  --badge-community-text: #7C3AED;
  --badge-security-bg:    #FEE2E2;
  --badge-security-text:  #DC2626;
  --badge-event-bg:       #FEF3C7;
  --badge-event-text:     #D97706;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-md:         1.0625rem;  /* 17px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */
  --font-size-4xl:        2.25rem;    /* 36px */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:    1.25;
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.625;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:  0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest:0.1em;

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

  /* ── Border Radius ─────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;   /* 4px  */
  --radius-md:   0.5rem;    /* 8px  */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* Coloured shadow for primary buttons */
  --shadow-primary: 0 4px 14px rgba(6, 137, 39, 0.3);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --sidebar-width:          240px;
  --sidebar-width-collapsed: 68px;
  --topbar-height:          64px;
  --content-max-width:      1280px;
  --content-padding:        var(--space-6);

  /* ── Z-index Stack ─────────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     100000;
  --z-toast:     500;
  --z-tooltip:   600;

  /* ── Transitions ───────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 400ms ease;

  /* ── Focus ring ────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(6, 137, 39, 0.25);
}

/* ── Dark mode prep (ready when needed) ────────────────────────────────── */
/* @media (prefers-color-scheme: dark) { :root { ... } } */