/* ==========================================================================
   Tecko Design System — Design Tokens
   Version: 1.0.0
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --tecko-yellow: #FFC107;
  --tecko-yellow-light: #FFD54F;
  --tecko-yellow-dark: #FFA000;

  --tecko-black: #1A1A1A;
  --tecko-dark-grey: #3D3D3D;
  --tecko-grey: #6B6B6B;
  --tecko-light-grey: #E5E5E5;
  --tecko-white: #FFFFFF;

  /* ---------- Semantic Colors ---------- */
  --tecko-success: #4CAF50;
  --tecko-success-light: #81C784;
  --tecko-success-dark: #388E3C;

  --tecko-warning: #FF9800;
  --tecko-warning-light: #FFB74D;
  --tecko-warning-dark: #F57C00;

  --tecko-error: #F44336;
  --tecko-error-light: #E57373;
  --tecko-error-dark: #D32F2F;

  --tecko-info: #2196F3;
  --tecko-info-light: #64B5F6;
  --tecko-info-dark: #1976D2;

  /* ---------- Theme Colors (light mode defaults) ---------- */
  --tecko-bg-primary: #E8E8EC;
  --tecko-bg-secondary: #DCDCE0;
  --tecko-bg-tertiary: #D0D0D6;

  --tecko-text-primary: #18181B;
  --tecko-text-secondary: #2E2E35;
  --tecko-text-muted: #44444D;
  --tecko-text-inverse: #FFFFFF;
  --tecko-text-accent: #FFC107;

  --tecko-card-bg: #F4F4F6;
  --tecko-border-light: #D4D4D8;
  --tecko-border-dark: #3F3F46;

  /* ---------- Interactive / Accent ---------- */
  --tecko-accent: var(--theme-accent, #FFC107);
  --tecko-accent-light: var(--theme-accent-light, #FFD54F);
  --tecko-accent-dark: var(--theme-accent-dark, #FFA000);
  --tecko-accent-text: var(--theme-accent-text, #1A1A1A);

  /* ---------- Typography ---------- */
  --tecko-font-primary: var(--theme-font-primary, 'Poppins', sans-serif);

  /* Font sizes — responsive clamp(min, preferred, max) */
  --tecko-text-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);       /* ~10-12px */
  --tecko-text-sm: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);     /* ~12-14px */
  --tecko-text-base: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);       /* ~14-16px */
  --tecko-text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);          /* ~16-18px */
  --tecko-text-xl: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);      /* ~18-20px */
  --tecko-text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);         /* ~20-24px */
  --tecko-text-3xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);           /* ~24-30px */
  --tecko-text-4xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);      /* ~30-36px */
  --tecko-text-5xl: clamp(2.25rem, 1.85rem + 2vw, 3rem);             /* ~36-48px */

  /* Font weights */
  --tecko-font-thin: 100;
  --tecko-font-extralight: 200;
  --tecko-font-light: 300;
  --tecko-font-regular: 400;
  --tecko-font-medium: 500;
  --tecko-font-semibold: 600;
  --tecko-font-bold: 700;
  --tecko-font-extrabold: 800;
  --tecko-font-black: 900;

  /* Line heights */
  --tecko-leading-none: 1;
  --tecko-leading-tight: 1.25;
  --tecko-leading-snug: 1.375;
  --tecko-leading-normal: 1.5;
  --tecko-leading-relaxed: 1.625;
  --tecko-leading-loose: 2;

  /* Letter spacing */
  --tecko-tracking-tighter: -0.05em;
  --tecko-tracking-tight: -0.025em;
  --tecko-tracking-normal: 0;
  --tecko-tracking-wide: 0.025em;
  --tecko-tracking-wider: 0.05em;
  --tecko-tracking-widest: 0.1em;
  --tecko-tracking-caps: 0.2em;

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

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

  /* ---------- Shadows ---------- */
  --tecko-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --tecko-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --tecko-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --tecko-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
  --tecko-shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.2);
  --tecko-shadow-accent: 0 4px 16px rgba(255, 193, 7, 0.3);
  --tecko-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.08);

  /* ---------- Transitions ---------- */
  --tecko-transition-fast: 150ms ease;
  --tecko-transition-base: 200ms ease;
  --tecko-transition-slow: 300ms ease;
  --tecko-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-Index ---------- */
  --tecko-z-dropdown: 1000;
  --tecko-z-sticky: 1010;
  --tecko-z-fixed: 1020;
  --tecko-z-modal-backdrop: 1030;
  --tecko-z-modal: 1040;
  --tecko-z-popover: 1050;
  --tecko-z-toast: 1060;
  --tecko-z-tooltip: 1070;

  /* ---------- Containers ---------- */
  --tecko-container-sm: 640px;
  --tecko-container-md: 768px;
  --tecko-container-lg: 1024px;
  --tecko-container-xl: 1280px;
  --tecko-container-2xl: 1536px;

  /* ---------- Table-specific ---------- */
  --tecko-table-header-bg: var(--tecko-black);
  --tecko-table-header-text: var(--tecko-white);
  --tecko-table-border: #999999;
  --tecko-table-stripe: rgba(0, 0, 0, 0.04);
  --tecko-table-hover: rgba(255, 193, 7, 0.15);
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-theme="dark"] {
  --tecko-bg-primary: #121212;
  --tecko-bg-secondary: #1E1E1E;
  --tecko-bg-tertiary: #2A2A2A;

  --tecko-text-primary: #F0F0F0;
  --tecko-text-secondary: #C0C0C0;
  --tecko-text-muted: #A0A0A0;
  --tecko-text-inverse: #1A1A1A;

  /* Invert the gray scale for dark backgrounds */
  --tecko-dark-grey: #C0C0C0;
  --tecko-grey: #9A9A9A;
  --tecko-light-grey: #3A3A3A;

  --tecko-card-bg: #1E1E1E;
  --tecko-border-light: #3A3A3A;
  --tecko-border-dark: #555555;

  --tecko-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --tecko-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --tecko-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
  --tecko-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.4);
  --tecko-shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.5);
  --tecko-shadow-accent: 0 4px 16px rgba(255, 193, 7, 0.2);
  --tecko-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  --tecko-table-header-bg: #2A2A2A;
  --tecko-table-header-text: #F0F0F0;
  --tecko-table-border: #4A4A4A;
  --tecko-table-stripe: rgba(255, 255, 255, 0.04);
  --tecko-table-hover: rgba(255, 193, 7, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tecko-bg-primary: #121212;
    --tecko-bg-secondary: #1E1E1E;
    --tecko-bg-tertiary: #2A2A2A;

    --tecko-text-primary: #F0F0F0;
    --tecko-text-secondary: #C0C0C0;
    --tecko-text-muted: #A0A0A0;
    --tecko-text-inverse: #1A1A1A;

    --tecko-dark-grey: #C0C0C0;
    --tecko-grey: #9A9A9A;
    --tecko-light-grey: #3A3A3A;

    --tecko-card-bg: #1E1E1E;
    --tecko-border-light: #3A3A3A;
    --tecko-border-dark: #555555;

    --tecko-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --tecko-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --tecko-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.35);
    --tecko-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.4);
    --tecko-shadow-2xl: 0 12px 48px rgba(0, 0, 0, 0.5);
    --tecko-shadow-accent: 0 4px 16px rgba(255, 193, 7, 0.2);
    --tecko-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    --tecko-table-header-bg: #2A2A2A;
    --tecko-table-header-text: #F0F0F0;
    --tecko-table-border: #4A4A4A;
    --tecko-table-stripe: rgba(255, 255, 255, 0.04);
    --tecko-table-hover: rgba(255, 193, 7, 0.18);
  }
}