/* =========================================
   BLADVERKSTADEN DESIGN SYSTEM V3 (CSS)
   ========================================= */

:root {
  /* --- 1. SPACING & GEOMETRY (The Core) --- */
  --base-unit: 4px; /* The heartbeat of the design */
  --site-max-width: 740px;
  
  /* Multipliers */
  --space-1: var(--base-unit);              /* 4px */
  --space-2: calc(var(--base-unit) * 2);    /* 8px */
  --space-3: calc(var(--base-unit) * 3);    /* 12px */
  --space-4: calc(var(--base-unit) * 4);    /* 16px */
  --space-5: calc(var(--base-unit) * 5);    /* 20px */
  --space-6: calc(var(--base-unit) * 6);    /* 24px */
  --space-8: calc(var(--base-unit) * 8);    /* 32px */
  --space-10: calc(var(--base-unit) * 10);  /* 40px */
  
  /* Dimensions */
  --border-width: var(--base-unit);
  --border-radius: calc(var(--base-unit) * 3); /* 12px */
  --shadow-offset: var(--base-unit);
  
  /* --- 2. TYPOGRAPHY --- */
  /* Fonts */
  --font-logo: 'Nunito', sans-serif;
  --font-ui: 'Nunito', sans-serif;       /* Buttons, Nav */
  --font-display: 'Berkshire Swash', cursive; /* H1 */
  --font-heading: 'Montserrat', sans-serif;   /* H2 */
  --font-body: 'Montserrat', sans-serif;      /* Body */
  --font-mono: 'IBM Plex Mono', monospace;    /* Meta, Labels */

  /* Scale */
  --size-h1: 38px;
  --size-h2: 24px;
  --size-h3: 18px;
  --size-body: 16px;
  --size-small: 13px;

  /* --- 3. COLORS (Palette) --- */
  /* Blacks */
  --pitchblack: #140E00;
  --pitchblacker: #140B00;
  --black: #000000;
  
  /* Whites & Papers */
  --floralwhite: #FFFAF0;
  --bisque: #FFE4C4;
  --kartong: #d2b48c;
  --kraft: #d2b48c;
  --paper: #f4efe5;
  --paper-natural: #EDE1CD;
  
  /* Brand Primaries */
  --cornflowerblue: #6495ED; 
  --yellow: #FFFF00;
  
  /* Brand Accents / Greens */
  --lawngreen: #7CFC00;
  --limegreen: #7fff00;
  --chartreuse: #7fff00;
  --radioactivegrassgreen: #5CD839;
  --lemonchiffon: #FFFACD;
  
  /* Semantic */
  --color-warning: #FFFD67;
  --color-success: #5CD839;
  --color-error: #E92B53;
  --amaranthred: #E92B53;
  --palevioletred: #DB7093;

  /* --- 4. THEME MAPPING (Light Mode Default) --- */
  --bg-body: var(--floralwhite);
  --bg-surface: oklch(1 0 0 / 0.8);
  --bg-surface-alt: var(--bisque);
  --ink-primary: var(--pitchblack);
  --ink-secondary: rgba(20, 14, 0, 0.85);
  --border-color: oklch(0 0 0 / 0.92);
  --shadow-color: oklch(0 0 0 / 0.9);
  
  /* Ink Opacities for "Stamped" effect */
  --opacity-h1: 0.92;
  --opacity-h2: 0.96;
  --opacity-p: 0.98;

  /* --- 5. LEGACY MAPPING (For backwards compatibility with existing HTML classes) --- */
  --ink: var(--ink-primary);
  --bg: var(--bg-surface);
  --stroke: var(--border-width);
  --radius: var(--border-radius);
  --gap: var(--space-4);
}

/* Dark Mode Preference (Optional Future Proofing based on system) */
@media (prefers-color-scheme: dark) {
  /* Commented out for now as strict light mode seems preferred for "Paper" aesthetic,
     but ready to implement if "Night Mode" is requested.
  :root {
      --bg-body: var(--pitchblack);
      --bg-surface: #2a2a2a;
      --ink-primary: var(--floralwhite);
  }
  */
}

/* =========================================
   RESET & GLOBAL STYLES
   ========================================= */
* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0; /* Managed by .wrap */
  background-color: var(--bg-body);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  /* subtle "graph paper" / dots from V1 */
  background-image: radial-gradient(rgba(0, 0, 0, .10) 0.55px, transparent 0.6px);
  background-size: 14px 14px;
  background-attachment: fixed;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================
   LAYOUT UTILITIES
   ========================================= */
.wrap {
  /* Mobile First Constraints */
  max-width: var(--site-max-width);
  margin: 0 auto;
  min-height: 100vh;
  
  /* Padding */
  padding: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-10);
  
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid.two {
  grid-template-columns: 1fr;
}

/* Mobile-first: 2 columns only on larger screens if needed, 
   but V3 suggests sticking to strict mobile width. 
   We keep this for legacy content that might need side-by-side. */
@media (min-width: 480px) {
  .grid.two {
      grid-template-columns: 1fr 1fr;
  }
}



/* =========================================
   TYPOGRAPHY SYSTEM
   ========================================= */
h1, h2, h3, p, ul { margin-top: 0; }

h1 {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  color: var(--ink-primary);
  opacity: var(--opacity-h1);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--size-h2);
  font-weight: 600;
  color: var(--ink-primary);
  opacity: var(--opacity-h2);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
  display: inline-block;
  padding-bottom: var(--space-1);
  width: 100%; /* Full width underline for sections usually looks better in practice */
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  letter-spacing: 0.02em;
  font-weight: 800;
  margin-bottom: var(--space-2);
}

p, li {
  opacity: var(--opacity-p);
  margin-bottom: var(--space-4);
}

ul {
  padding-left: var(--space-4);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--ink-secondary);
}

.mono {
  font-family: var(--font-mono);
}

.small {
  font-size: var(--size-small);
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ink-primary);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--border-width) dashed var(--border-color);
  margin: var(--space-8) 0;
}

svg.lucide {
  width: 42px;
  height: 42px;
  stroke-width: 1.8px;
}

/* =========================================
   COMPONENT: CARDS & SURFACES
   ========================================= */
.panel, .card {
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color);
  position: relative;
  margin-bottom: var(--space-6);
}

main > .panel, .panel.silent {
  background-color: transparent;
  border: unset;
  border-radius: unset;
  padding: unset;
  box-shadow: unset;
}

/* Texture classes */
.texture-kraft {
  background-color: var(--kraft);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
}

/* =========================================
   COMPONENT: BUTTONS & ACTIONS
   ========================================= */
.actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  justify-items: center;
  margin-top: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color);
  transition: transform 0.1s;
  background-color: #FFF;
  color: var(--black);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--shadow-color);
}

/* Variants */
.btn.primary { background-color: var(--yellow); }
.btn.secondary { 
  background-color: transparent; 
  box-shadow: none; 
}
.btn.secondary:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Link as secondary action ("or-link") */
.or-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  font-size: var(--size-small);
  text-transform: uppercase;
}

/* =========================================
   COMPONENT: HEADER & NAV
   ========================================= */
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand .mark {
  width: 55px;
  margin-left: -2px;
  margin-right: 12px;
  height: auto;
  opacity: var(--opacity-h2);
}

.brand .name {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 36px;
  margin-top: 12px;
  white-space: nowrap;
  opacity: var(--opacity-h2);
}

/* Menu Overlay */
.menuOverlay {
  position: fixed;
  inset: 0;
  background: var(--bg-body);
  z-index: 999;
  display: none;
  padding: var(--space-4);
}

body[data-menu="open"] .menuOverlay {
  display: block;
}

.menuCard {
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--shadow-color);
  min-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.menuBtn {
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

/* Hiding logic for Launch V1.0 */
#menuOpen, .navDesktop, .footerNav {
  display: none !important;
}

/* =========================================
   COMPONENT: FORMS
   ========================================= */
fieldset {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  background: var(--bg-surface);
}

legend {
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.form-group {
  display: flex;
  flex-direction: column-reverse;
}

label {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-ui);
  font-size: var(--size-small);
  letter-spacing: 0.1em;
  font-weight: 800;
  padding: var(--space-1) var(--space-2) 1px var(--space-2);
  margin-left: calc(var(--base-unit)*2);
  text-transform: uppercase;
  position: relative;
  background-color: var(--cornflowerblue);
  border: calc(var(--base-unit)/2) solid;
  border-radius: var(--base-unit) var(--base-unit) 0 0;
  margin-bottom: -3px;
  box-shadow: inset -1px -2px 3px oklch(0.57 0.14 261.35 / 0.75);
  opacity: 0.92;
}

.form-group input:required + label:after, .form-group textarea:required + label:after, .form-group select:required + label:after {
    position: absolute;
    font-size: 16px;
    height: 14px;
    line-height: 20px;
    top: -2px;
    margin-left: 14px;
    padding-left: var(--base-unit);
    padding-right: var(--base-unit);
    border: 2px solid oklch(0.29 0.02 75.47 / 0.72);
    border-radius: 3px;
    background-color: var(--kartong);
    content: '*';
    color: var(--amaranthred);
    opacity: 0.8;
}


input, textarea, select {
  width: 100%;
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  color: #000;
  appearance: none;
  margin-bottom: var(--space-4);
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  z-index: 2;
  box-shadow: 3px 3px 10px var(--yellow), -3px -3px #fff;
}

.form-group input:focus + label, .form-group textarea:focus + label, .form-group select:focus + label {
  margin-bottom: 0;
  border-bottom-color: var(--cornflowerblue);
  z-index: 1;
  box-shadow: inset -1px -8px 8px -1px oklch(0.37 0.1 261.35 / 0.7);
}

.input-error {
  border-color: var(--color-error) !important;
  background-color: #ffebee !important;
}

/* =========================================
   COMPONENT: FOOTER
   ========================================= */
.footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
}

/* =========================================
   UTILITIES / MISC
   ========================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--yellow);
  color: var(--pitchblack);
  border: var(--border-width) solid var(--border-color);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
  font-weight: 800;
  font-size: var(--size-small);
}

/* Facts Table */
.facts {
  display: grid;
  gap: var(--space-2);
}

.factRow {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: var(--space-1);
}

.factRow b { font-family: var(--font-mono); }
.factRow span { font-family: var(--font-mono); }

@media (min-width: 740px) {
  .btn {
    max-width: 360px;
  }
  .actions {
    justify-items: left;
  }
}