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

export const highwayInterstate: StyleOption = {
    id: 'highway-interstate',
    name: 'Highway Interstate',
    category: 'Urban',
    description: 'Road signage aesthetic. Reflective white text on deep highway green backgrounds.',
    vibe: 'Functional, Travel, Signage',
    googleFontsImport: 'https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&family=Public+Sans:wght@400;700&display=swap',
    wordConfig: {
      heading1: { 
        font: "Overpass", size: 36, color: "FFFFFF", bold: true, align: 'left',
        spacing: { before: 400, after: 200, line: 240 },
        shading: { fill: "00695C", color: "auto", style: "clear" },
        border: { 
          bottom: { color: "FFFFFF", space: 4, style: "single", size: 12 },
          top: { color: "FFFFFF", space: 4, style: "single", size: 12 }
        }
      },
      heading2: { 
        font: "Public Sans", size: 18, color: "004D40", bold: true, align: 'left',
        spacing: { before: 320, after: 160, line: 240 }
      },
      body: { 
        font: "Public Sans", size: 11, color: "212121", align: 'left',
        spacing: { before: 0, after: 160, line: 280 } 
      },
      accentColor: "00695C"
    },
    previewCss: `
      font-family: 'Public Sans', sans-serif;
      h1 { font-family: 'Overpass', sans-serif; font-size: 36pt; font-weight: 700; color: #FFFFFF; background: #00695C; padding: 16px; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; margin-bottom: 24px; border-radius: 8px; }
      h2 { font-size: 18pt; font-weight: 700; color: #004D40; margin-top: 32px; margin-bottom: 16px; text-transform: uppercase; }
      p { font-size: 11pt; line-height: 1.5; color: #212121; margin-bottom: 14px; }
      blockquote { background: #FFEB3B; color: #000; padding: 16px; margin: 24px 0; border: 4px solid #000; transform: skewX(-10deg); width: fit-content; }
    `
  };
