Goa-gel-fullstack/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      colors: {
        // DBIM Primary Colour Group - Blue (selected for blockchain/tech platform)
        'dbim': {
          // Blue colour group variants
          'blue-dark': '#1D0A69',      // Key colour - footer, primary headers, sidebar
          'blue-mid': '#2563EB',       // Primary buttons, active states
          'blue-light': '#3B82F6',     // Hover states, links
          'blue-lighter': '#60A5FA',   // Card accents
          'blue-subtle': '#DBEAFE',    // Subtle backgrounds

          // Functional palette (mandatory)
          'white': '#FFFFFF',          // Inclusive White - page backgrounds
          'linen': '#EBEAEA',          // Background secondary - cards, quotes
          'brown': '#150202',          // Deep Earthy Brown - text on light bg
          'black': '#000000',          // State Emblem on light bg
          'deep-blue': '#1D0A69',      // Gov.In identity colour

          // Status colours (fixed by DBIM)
          'success': '#198754',        // Liberty Green - approved, confirmed
          'warning': '#FFC107',        // Mustard Yellow - pending, in-review
          'error': '#DC3545',          // Coral Red - rejected, failed
          'info': '#0D6EFD',           // Blue - information, hyperlinks

          // Grey palette
          'grey-1': '#C6C6C6',
          'grey-2': '#8E8E8E',
          'grey-3': '#606060',
        },

        // Blockchain/Crypto accent colours (within DBIM compliance)
        'crypto': {
          'purple': '#8B5CF6',
          'indigo': '#6366F1',
          'cyan': '#06B6D4',
          'emerald': '#10B981',
        }
      },
      fontFamily: {
        'sans': ['Noto Sans', 'sans-serif'],  // DBIM mandatory font
      },
      fontSize: {
        // Desktop scale (DBIM)
        'h1': ['36px', { lineHeight: '1.2', fontWeight: '700' }],
        'h2': ['24px', { lineHeight: '1.3', fontWeight: '600' }],
        'h3': ['20px', { lineHeight: '1.4', fontWeight: '600' }],
        'p1': ['16px', { lineHeight: '1.5', fontWeight: '400' }],
        'p2': ['14px', { lineHeight: '1.5', fontWeight: '400' }],
        'small': ['12px', { lineHeight: '1.4', fontWeight: '400' }],
      },
      boxShadow: {
        'card': '0 2px 8px rgba(29, 10, 105, 0.08)',
        'card-hover': '0 4px 16px rgba(29, 10, 105, 0.12)',
        'elevated': '0 8px 32px rgba(29, 10, 105, 0.16)',
        'glow': '0 0 20px rgba(99, 102, 241, 0.3)',
        'glow-success': '0 0 20px rgba(25, 135, 84, 0.3)',
      },
      backgroundImage: {
        'gradient-dbim': 'linear-gradient(135deg, #1D0A69 0%, #2563EB 100%)',
        'gradient-blue': 'linear-gradient(135deg, #2563EB 0%, #3B82F6 100%)',
        'gradient-crypto': 'linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)',
        'mesh-pattern': 'radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)',
      },
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'glow': 'glow 2s ease-in-out infinite alternate',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'fade-in': 'fadeIn 0.3s ease-out',
        'counter': 'counter 1.5s ease-out forwards',
      },
      keyframes: {
        glow: {
          '0%': { boxShadow: '0 0 5px rgba(99, 102, 241, 0.3)' },
          '100%': { boxShadow: '0 0 20px rgba(99, 102, 241, 0.6)' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        counter: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
      borderRadius: {
        'xl': '12px',
        '2xl': '16px',
        '3xl': '24px',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}