@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
All colors MUST be HSL.
*/

@layer base {
  /* Theme: UK (Red, White, Blue) - Default */
  :root, [data-theme="uk"] {
    --background: 0 0% 98%;
    --foreground: 215 25% 15%;
    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;
    --primary: 215 72% 24%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 215 65% 35%;
    --secondary: 354 70% 54%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 354 70% 45%;
    --accent: 215 20% 92%;
    --accent-foreground: 215 25% 15%;
    --muted: 215 20% 95%;
    --muted-foreground: 215 15% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 215 25% 15%;
    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 215 20% 88%;
    --input: 215 20% 88%;
    --ring: 215 72% 24%;
    --radius: 0.75rem;
    --gradient-hero: linear-gradient(135deg, hsl(215 72% 24%) 0%, hsl(354 70% 54%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(215 20% 98%) 100%);
    --shadow-glow: 0 0 20px hsl(215 72% 24% / 0.2);
    --theme-bar: 0 70% 50% ;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: High Contrast (Black, Grey, White) */
  [data-theme="contrast"] {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 0 0% 10%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 0 0% 25%;
    --secondary: 0 0% 50%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 0 0% 40%;
    --accent: 0 0% 95%;
    --accent-foreground: 0 0% 0%;
    --muted: 0 0% 90%;
    --muted-foreground: 0 0% 30%;
    --success: 142 71% 35%;
    --success-foreground: 0 0% 100%;
    --warning: 38 100% 50%;
    --warning-foreground: 0 0% 0%;
    --destructive: 354 100% 45%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 80%;
    --input: 0 0% 80%;
    --ring: 0 0% 10%;
    --gradient-hero: linear-gradient(135deg, hsl(0 0% 10%) 0%, hsl(0 0% 50%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
    --shadow-glow: 0 0 20px hsl(0 0% 10% / 0.3);
    --theme-bar: 0 0% 50%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: Ireland (Red, White, Dark Orange) */
  [data-theme="ireland"] {
    --background: 25 25% 97%;
    --foreground: 25 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 25 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 25 40% 15%;
    --primary: 354 70% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 354 65% 60%;
    --secondary: 25 85% 35%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 25 85% 25%;
    --accent: 25 25% 92%;
    --accent-foreground: 25 40% 15%;
    --muted: 25 20% 94%;
    --muted-foreground: 25 20% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 25 40% 15%;
    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 25 20% 85%;
    --input: 25 20% 85%;
    --ring: 354 70% 50%;
    --gradient-hero: linear-gradient(135deg, hsl(354 70% 50%) 0%, hsl(143, 66%, 18%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(152, 63%, 18%) 100%);
    --shadow-glow: 0 0 20px hsl(354 70% 50% / 0.2);
    --theme-bar: 121 100% 26%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: Italy (Green, White, Red) */
  [data-theme="italy"] {
    --background: 145 20% 97%;
    --foreground: 145 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 145 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 145 40% 15%;
    --primary: 145 60% 35%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 145 55% 45%;
    --secondary: 354 70% 50%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 354 70% 40%;
    --accent: 145 20% 92%;
    --accent-foreground: 145 40% 15%;
    --muted: 145 20% 94%;
    --muted-foreground: 145 20% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 145 40% 15%;
    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 145 20% 85%;
    --input: 145 20% 85%;
    --ring: 145 60% 35%;
    --gradient-hero: linear-gradient(135deg, hsl(145 60% 35%) 0%, hsl(354 70% 50%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(145 20% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(145 60% 35% / 0.2);
    --theme-bar: 353 68% 50%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: France (Blue, White, Red) */
  [data-theme="france"] {
    --background: 220 25% 97%;
    --foreground: 220 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 220 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 40% 15%;
    --primary: 220 75% 30%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 220 70% 40%;
    --secondary: 354 70% 50%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 354 70% 40%;
    --accent: 220 25% 92%;
    --accent-foreground: 220 40% 15%;
    --muted: 220 20% 94%;
    --muted-foreground: 220 20% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 220 40% 15%;
    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 20% 85%;
    --input: 220 20% 85%;
    --ring: 220 75% 30%;
    --gradient-hero: linear-gradient(135deg, hsl(220 75% 30%) 0%, hsl(354 70% 50%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(220 25% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(220 75% 30% / 0.2);
    --theme-bar: 351 82% 47%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: Germany (Black, Red, Dark Yellow) */
  [data-theme="germany"] {
    --background: 45 20% 97%;
    --foreground: 0 0% 15%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 15%;
    --primary: 0 0% 15%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 0 0% 30%;
    --secondary: 0 80% 45%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 0 80% 35%;
    --accent: 45 20% 92%;
    --accent-foreground: 0 0% 15%;
    --muted: 45 15% 94%;
    --muted-foreground: 0 0% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 45 90% 45%;
    --warning-foreground: 0 0% 15%;
    --destructive: 0 80% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 45 15% 85%;
    --input: 45 15% 85%;
    --ring: 0 0% 15%;
    --gradient-hero: linear-gradient(135deg, hsl(0 0% 15%) 0%, hsl(0 80% 45%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(45 20% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(0 0% 15% / 0.3);
    --theme-bar: 48 100% 50%;
    --theme-bar-foreground: 0 0% 0%;
  }

  /* Theme: Spain (Red, Dark Yellow) */
  [data-theme="spain"] {
    --background: 45 25% 97%;
    --foreground: 0 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 0 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 40% 15%;
    --primary: 354 75% 45%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 354 70% 55%;
    --secondary: 35 80% 35%;
    --secondary-foreground: 0 0% 100%;
    --secondary-dark: 35 80% 25%;
    --accent: 45 25% 92%;
    --accent-foreground: 0 40% 15%;
    --muted: 45 20% 94%;
    --muted-foreground: 0 30% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 40% 15%;
    --destructive: 354 75% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 45 20% 85%;
    --input: 45 20% 85%;
    --ring: 354 75% 45%;
    --gradient-hero: linear-gradient(135deg, hsl(354 75% 45%) 0%, hsl(35 80% 35%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(45 25% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(354 75% 45% / 0.2);
    --theme-bar: 353 68% 50%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: Portugal (Green, Yellow, Red) */
  [data-theme="portugal"] {
    --background: 145 20% 97%;
    --foreground: 145 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 145 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 145 40% 15%;
    --primary: 145 100% 20%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 145 90% 30%;
    --secondary: 45 100% 50%;
    --secondary-foreground: 145 40% 15%;
    --secondary-dark: 45 100% 40%;
    --accent: 145 20% 92%;
    --accent-foreground: 145 40% 15%;
    --muted: 145 20% 94%;
    --muted-foreground: 145 30% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 145 40% 15%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 145 20% 85%;
    --input: 145 20% 85%;
    --ring: 145 100% 20%;
    --gradient-hero: linear-gradient(135deg, hsl(145 100% 20%) 0%, hsl(45 100% 50%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(145 20% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(145 100% 20% / 0.2);
    --theme-bar: 0 100% 50%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Theme: Sweden (Blue, Yellow) */
  [data-theme="sweden"] {
    --background: 205 25% 97%;
    --foreground: 205 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 205 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 205 40% 15%;
    --primary: 205 100% 33%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 205 90% 43%;
    --secondary: 48 100% 50%;
    --secondary-foreground: 205 40% 15%;
    --secondary-dark: 48 100% 40%;
    --accent: 205 25% 92%;
    --accent-foreground: 205 40% 15%;
    --muted: 205 20% 94%;
    --muted-foreground: 205 30% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 205 40% 15%;
    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 205 20% 85%;
    --input: 205 20% 85%;
    --ring: 205 100% 33%;
    --gradient-hero: linear-gradient(135deg, hsl(205 100% 33%) 0%, hsl(48 100% 50%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(205 25% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(205 100% 33% / 0.2);
        --theme-bar: 48 100% 50%;
    --theme-bar-foreground: 0 0% 0%;
  }

  /* Theme: Brazil (Green, Yellow, Blue) */
  [data-theme="brazil"] {
    --background: 145 25% 97%;
    --foreground: 145 40% 15%;
    --card: 0 0% 100%;
    --card-foreground: 145 40% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 145 40% 15%;
    --primary: 145 100% 30%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 145 90% 40%;
    --secondary: 48 100% 50%;
    --secondary-foreground: 145 40% 15%;
    --secondary-dark: 48 100% 40%;
    --accent: 145 25% 92%;
    --accent-foreground: 145 40% 15%;
    --muted: 145 20% 94%;
    --muted-foreground: 145 30% 45%;
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 145 40% 15%;
    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;
    --border: 145 20% 85%;
    --input: 145 20% 85%;
    --ring: 145 100% 30%;
    --gradient-hero: linear-gradient(135deg, hsl(145 100% 30%) 0%, hsl(48 100% 50%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(145 25% 97%) 100%);
    --shadow-glow: 0 0 20px hsl(145 100% 30% / 0.2);
    --theme-bar: 217 100% 24%;
    --theme-bar-foreground: 0 0% 100%;
  }

  /* Dark Mode Override */
  .dark {
    --background: 0 0% 8%;
    --foreground: 0 0% 95%;

    --card: 0 0% 10%;
    --card-foreground: 0 0% 95%;

    --popover: 0 0% 10%;
    --popover-foreground: 0 0% 95%;

    --primary: 215 65% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 354 70% 54%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 65%;

    --accent: 0 0% 15%;
    --accent-foreground: 0 0% 95%;

    --destructive: 354 70% 54%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 215 65% 55%;

    --gradient-hero: linear-gradient(135deg, hsl(215 65% 35%) 0%, hsl(215 50% 25%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 10%) 0%, hsl(0 0% 8%) 100%);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Accessibility: Font Sizes */
  html.text-normal { font-size: 16px; }
  html.text-large { font-size: 18px; }
  html.text-xlarge { font-size: 20px; }

  /* Accessibility: Dyslexia Font */
  html.dyslexia-font * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', Arial, sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
    line-height: 1.8;
  }

  /* Accessibility: Reduced Motion */
  html.reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* ===== EMBED MODE: LAYOUT + THEME FOR TOOL ===== */

/* Outer embed container (for iframe view) */
#embed {
  margin: 0;
  padding: 0;
  #min-height: 100vh;               /* fill iframe height */
  display: flex;
  justify-content: center;         /* center horizontally */
  align-items: flex-start;         /* sit at top, not middle */
  background: #ffffff;             /* dark background behind white card */
}

/* Neutralise any top-8 / positioning and center the wrapper */
/* Embed mode: reset Tailwind transforms so the tool can center properly */
#embed #validator-container {
  position: static !important;        /* ignore relative/absolute + top-8 etc */
  top: auto !important;
  left: auto !important;

  /* kill Tailwind translate used for centering in hero */
  --tw-translate-x: 0 !important;
  --tw-translate-y: 0 !important;
  transform: none !important;

  margin: 0rem auto 0 auto !important;  /* keep your desired top and centering */
  max-width: 42rem;
  width: 100%;
}



/* The actual white card inside */
#embed #validator-container > div {
  background-color: #ffffff !important;  /* solid white card */
  color: #000000 !important;             /* dark text */
}

/* ----- Inputs in light mode ----- */
#embed #validator-container input,
#embed #validator-container textarea,
#embed #validator-container select {
  background-color: #ffffff;
  color: #000000;
  border-color: #d1d5db;
}

#embed #validator-container ::placeholder {
  color: #6b7280;
}

/* ----- Button colours in embed mode ----- */
/* ===== EMBED MODE: BUTTON COLOURS, MAIN-PAGE-LIKE ===== */

/* Primary action: Basic Check */
#embed #basic-check {
  background-color: #2563eb !important;       /* blue */
  color: #ffffff !important;                  /* white text */
  /* keep existing radius, padding, font, transition from classes */
}

/* Stronger action: Advanced Scan */
#embed #advanced-check {
  background-color: #16a34a !important;       /* green */
  color: #ffffff !important;
}

/* Secondary actions: upload + clear, lighter look on white card */
#embed #upload-btn,
#embed #clear-btn {
  background-color: #ffffff !important;       /* white like the card */
  color: #111827 !important;                  /* dark grey text */
  border: 1px solid #d1d5db !important;       /* subtle border */
}

/* Give Clear a hint of its orange accent via text */
#embed #clear-btn {
  color: #f97316 !important;                  /* orange text */
}

/* Hover behaviour similar to main page: subtle change, no harsh effects */
#embed #basic-check:hover,
#embed #advanced-check:hover,
#embed #upload-btn:hover,
#embed #clear-btn:hover {
  filter: brightness(1.05);
}





/* Optional: slight hover brightness */
#embed button:hover {
  filter: brightness(1.1);
}


/* Hide by default */
#validator-back {
  display: none;
}

/* When the tool is embedded inside #embed, show it */
#embed #validator-back {
  display: inline-flex;
}
 #theme-panel {
   background-color: #f9ecde !important;
}