/**
 * Tokeny designu wedlug systemu HydroNexis.
 *
 * Zrodlo: C:/Users/pzatorski/Documents/Z_SD/z_companies/hydronexis/HydroNexis_DesignSystem
 * Kolory pochodza z oficjalnego logo: azure #2C8ABD (Hydro), navy #23415B (Nexis),
 * highlight #8AC4DC. Neutralne sa chlodne, nigdy cieple szarosci.
 *
 * @type {import('tailwindcss').Config}
 */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        // Hydro Azure, glowny kolor marki. 500 to dokladny kolor z logo.
        blue: {
          50: '#EAF4FA',
          100: '#D0E7F3',
          200: '#A9D3E9',
          300: '#7CBEDD',
          400: '#4FA4CE',
          500: '#2C8ABD',
          600: '#2272A0',
          700: '#1C5B81',
          800: '#1B4A6A',
          900: '#173B55',
          950: '#102A3D',
        },
        // Navy, druga farba marki, czyli "Nexis"
        navy: {
          400: '#355D7E',
          500: '#2C5273',
          600: '#284862',
          700: '#23415B',
          800: '#1B3349',
          900: '#142839',
        },
        // Aqua, akcent uzywany oszczednie
        aqua: {
          50: '#E7F2F8',
          100: '#D2EAF4',
          200: '#B5D9EA',
          300: '#8AC4DC',
          400: '#5FB0D6',
          500: '#2C97C8',
          600: '#2179A6',
          700: '#1C6088',
        },
        // Chlodne neutralne, podmieniaja domyslny slate Tailwinda
        slate: {
          0: '#FFFFFF',
          25: '#F8FAFC',
          50: '#F1F5F9',
          100: '#E5EBF2',
          200: '#D2DBE6',
          300: '#B2BFCE',
          400: '#889AAE',
          500: '#61748B',
          600: '#475569',
          700: '#313F52',
          800: '#1E2A3A',
          900: '#0F1A28',
        },
        // Semantyka operacyjna: stany, nie ozdoby
        ok: { 50: '#E7F6EE', 500: '#16935C', 600: '#0F7549' },
        warn: { 50: '#FCF3E2', 500: '#D9870E', 600: '#B26B06' },
        alarm: { 50: '#FCEBEB', 500: '#D8392F', 600: '#B22720' },
        info: { 50: '#EAF4FA', 500: '#2C8ABD', 600: '#2272A0' },
      },
      fontFamily: {
        sans: ['IBM Plex Sans', 'system-ui', '-apple-system', 'Segoe UI', 'sans-serif'],
        // dane liczbowe, identyfikatory, terminy
        mono: ['IBM Plex Mono', 'ui-monospace', 'SF Mono', 'Menlo', 'monospace'],
      },
      fontSize: {
        '2xs': ['11px', { lineHeight: '1.4' }],
        xs: ['12px', { lineHeight: '1.4' }],
        sm: ['14px', { lineHeight: '1.5' }],
        base: ['16px', { lineHeight: '1.55' }],
        lg: ['18px', { lineHeight: '1.5' }],
        xl: ['22px', { lineHeight: '1.3' }],
        '2xl': ['28px', { lineHeight: '1.25' }],
        '3xl': ['36px', { lineHeight: '1.15' }],
        '4xl': ['46px', { lineHeight: '1.1' }],
      },
      letterSpacing: {
        tight: '-0.02em',
        caps: '0.08em',
      },
      borderRadius: {
        // umiarkowane zaokraglenia, enterprise a nie zabawka
        sm: '6px',
        DEFAULT: '8px',
        md: '8px',
        lg: '12px',
        xl: '16px',
        '2xl': '24px',
      },
      boxShadow: {
        // cienie z chlodnym odcieniem
        xs: '0 1px 2px rgba(15,26,40,.06)',
        sm: '0 1px 2px rgba(15,26,40,.06), 0 1px 3px rgba(15,26,40,.08)',
        md: '0 2px 6px rgba(15,26,40,.06), 0 6px 16px rgba(15,26,40,.08)',
        lg: '0 8px 24px rgba(15,26,40,.10), 0 2px 8px rgba(15,26,40,.06)',
        xl: '0 18px 48px rgba(11,57,100,.16)',
      },
      transitionTimingFunction: {
        // spokojny ruch, bez odbic i sprezyn
        standard: 'cubic-bezier(.2,.6,.2,1)',
        out: 'cubic-bezier(.16,.84,.44,1)',
      },
      transitionDuration: {
        fast: '120ms',
        base: '180ms',
        slow: '260ms',
      },
      maxWidth: {
        container: '1200px',
      },
      spacing: {
        sidebar: '256px',
        topbar: '60px',
      },
      backgroundImage: {
        // gradienty wylacznie na momenty marki, nigdy pod tekstem
        'gradient-hydro': 'linear-gradient(135deg, #23415B 0%, #2C8ABD 55%, #5FB0D6 100%)',
        'gradient-depth': 'linear-gradient(180deg, #23415B 0%, #142839 100%)',
      },
    },
  },
  plugins: [
    // Style dla tresci z edytora wizualnego (klasa `prose`). Dzieki temu
    // naglowki, listy i cytaty maja sensowny wyglad bez pisania wlasnego CSS
    // i bez dopuszczania atrybutu style w oczyszczanym HTML.
    require('@tailwindcss/typography'),
  ],
}