import { StyleOption } from '../../../types';

export const weatherRadar: StyleOption = {
  id: 'weather-radar',
  name: 'Weather Radar',
  category: 'Scientific',
  description: 'Meteorological map aesthetic. Deep map green backgrounds with rainbow radar text colors.',
  vibe: 'Scientific, Map, Storm',
  googleFontsImport: 'https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=Sarpanch:wght@400;700&display=swap',
  typography: {
    fonts: {
      heading: 'Chakra Petch',
      body: 'Chakra Petch',
      code: 'Sarpanch'
    },
    colors: {
      text: 'E0F2F1',
      textSecondary: 'B2DFDB',
      background: '455A64',
      accent: 'FF1744',
      border: 'FF1744',
      codeBg: '37474F',
      blockquoteBorder: 'FFEA00'
    }
  },
  elements: {
    h1: {
      font: 'heading',
      size: 32,
      color: 'FF1744',
      bold: true,
      align: 'left',
      background: '263238',
      spacing: { before: 20, after: 10, line: 1.2 },
      borderLeft: { color: 'FF1744', width: 8, style: 'solid' },
      padding: 16
    },
    h2: {
      font: 'code',
      size: 16,
      color: '00E676',
      bold: true,
      align: 'left',
      background: '37474F',
      spacing: { before: 16, after: 8, line: 1.2 },
      padding: 8
    },
    h3: {
      font: 'code',
      size: 14,
      color: '69F0AE',
      bold: true,
      align: 'left',
      spacing: { before: 14, after: 7, line: 1.2 }
    },
    h4: {
      font: 'code',
      size: 12,
      color: '69F0AE',
      bold: true,
      align: 'left',
      spacing: { before: 12, after: 6, line: 1.2 }
    },
    h5: {
      font: 'code',
      size: 11,
      color: 'B9F6CA',
      bold: true,
      align: 'left',
      spacing: { before: 10, after: 5, line: 1.2 }
    },
    h6: {
      font: 'code',
      size: 10,
      color: 'B9F6CA',
      bold: true,
      align: 'left',
      spacing: { before: 8, after: 4, line: 1.2 }
    },
    p: {
      font: 'body',
      size: 11,
      color: 'E0F2F1',
      align: 'left',
      spacing: { before: 0, after: 8, line: 1.5 }
    },
    blockquote: {
      font: 'body',
      size: 10,
      color: 'FFEA00',
      spacing: { before: 12, after: 12, line: 1.5 },
      padding: 16,
      background: '263238',
      border: { color: 'FFEA00', width: 2, style: 'solid' }
    },
    code: {
      font: 'code',
      size: 10,
      color: 'FFEA00',
      background: '37474F'
    },
    pre: {
      font: 'code',
      size: 10,
      color: 'FFEA00',
      background: '37474F',
      spacing: { before: 12, after: 12, line: 1.4 },
      padding: 12
    },
    ul: {
      spacing: { before: 8, after: 8, line: 1.5 }
    },
    ol: {
      spacing: { before: 8, after: 8, line: 1.5 }
    },
    li: {
      font: 'body',
      size: 11,
      color: 'E0F2F1',
      spacing: { before: 4, after: 4, line: 1.5 }
    },
    strong: {
      bold: true
    },
    em: {
      italic: true
    },
    a: {
      color: 'FFEA00',
      underline: true
    },
    table: {
      spacing: { before: 12, after: 12, line: 1.4 }
    },
    th: {
      font: 'heading',
      size: 11,
      color: 'FF1744',
      bold: true,
      background: '263238',
      spacing: { before: 6, after: 6, line: 1.4 }
    },
    td: {
      font: 'body',
      size: 11,
      color: 'E0F2F1',
      background: '37474F',
      spacing: { before: 6, after: 6, line: 1.4 }
    },
    hr: {
      border: { color: 'FFEA00', width: 2, style: 'single' },
      spacing: { before: 12, after: 12, line: 1 }
    },
    img: {
      align: 'center',
      spacing: { before: 12, after: 12, line: 1 }
    }
  }
};
