@layer reset, base, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  table { border-collapse: collapse; }
}

@layer base {
  :root {
    --primary: oklch(0.15 0.005 70); /* Near-black, warm */
    --primary-text: oklch(100 0 0); /* White */
    --secondary: oklch(80 0.01 70); /* Light warm gray */
    --accent: oklch(0.15 0.005 70); /* Black accent (buttons, etc) */
    --text: oklch(0.2 0.01 70); /* Warm near-black text */
    --muted: oklch(0.45 0.015 70); /* Muted gray text */
    --background: oklch(0.93 0.015 75); /* Kraft paper base */
    --surface: oklch(0.97 0.008 80); /* Card surface */
    --border: oklch(0.75 0.015 70); /* Medium gray borders */
    --danger: oklch(0.5 0.2 25); /* Red for errors */
    --ok: oklch(0.5 0.15 145); /* Green for success */
    --link: oklch(0.2 0.01 70); /* Black links */
    --brand: var(--primary);
    --brand-contrast: var(--primary-text);
    --ink: var(--text);
    --paper: var(--background);
    --line: var(--border);
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --radius: 10px;
    --space: 1rem;
  }

  body {
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--text);
    line-height: 1.55;
    background-color: var(--background);
    background-image: var(--paper-grain);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    color: var(--ink);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.01em;
  }

  a { color: var(--brand); text-decoration: none; }
  a:hover { text-decoration: underline; }
}

@layer components {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space) calc(var(--space) * 1.5);
    border-block-end: 1px solid var(--line);

    & .brand {
      font-size: 1.25rem;
      color: var(--ink);
      & strong { color: var(--brand); }
    }
    & nav {
      display: flex;
      gap: var(--space);
      align-items: center;
    }
  }

  /* The cookie-driven language choice in both navigation bars (issue 32). */
  .language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;

    & select { font-size: inherit; }
  }

  main {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding: calc(var(--space) * 1.5);
    display: grid;
    gap: calc(var(--space) * 1.25);
  }

  .lead { color: oklch(0.45 0.02 260); margin-top: calc(var(--space) / -2); }

  .panel {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space);

    & h2 { margin-block-start: 0; font-size: 1.05rem; }
    &.success { border-color: var(--ok); }
  }

  /* A finished action answered once, after the redirect that ended it (issue 50). */
  .flash {
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 600;
    color: var(--ok);
  }

  /* A button that is a secondary action on the page, so it must not look like Save. */
  .linklike {
    justify-self: start;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--link);
    text-decoration: underline;
    cursor: pointer;
  }

  table {
    inline-size: 100%;
    & th, & td {
      text-align: start;
      padding: 0.5rem 0.6rem;
      border-block-end: 1px solid var(--line);
    }
    & th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }
    & tbody tr:last-child td { border-block-end: 0; }
  }

  .badge {
    &[data-status="compliant"], &[data-status="registered"] {
      color: var(--ok); font-weight: 600;
    }
    &[data-status="action_required"], &[data-status="pending_registration"] {
      color: var(--danger); font-weight: 600;
    }
  }

  .steps {
    display: flex;
    gap: calc(var(--space) * 0.75);
    list-style: none;
    padding: 0;
    & li { color: oklch(0.55 0.02 260); }
    & li[aria-current="step"] { color: var(--brand); font-weight: 700; }
  }

  form {
    display: grid;
    gap: var(--space);
    max-inline-size: 28rem;

    /* The mapping page carries a table of packaging rows; four cells do not fit a 28rem column. */
    &.wide { max-inline-size: none; }

    & fieldset {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: var(--space);
      display: grid;
      gap: 0.75rem;
      & legend { font-weight: 600; padding-inline: 0.4rem; }
    }
    & label {
      display: grid;
      gap: 0.25rem;
      font-size: 0.9rem;
      font-weight: 500;
    }
    & input, & select {
      font: inherit;
      padding: 0.5rem 0.6rem;
      border: 1px solid var(--line);
      border-radius: 6px;
      &:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 1px;
      }
    }
    & .error {
      color: var(--danger);
      font-weight: 500;
      font-size: 0.85rem;
      /* The error belongs to the field above it, so it sits closer than the grid gap. */
      margin-block-start: -0.45rem;
    }
    & button {
      font: inherit;
      font-weight: 600;
      color: var(--brand-contrast);
      background: var(--brand);
      border: 0;
      border-radius: 6px;
      padding: 0.6rem 1.2rem;
      cursor: pointer;
      justify-self: start;
      &:hover { filter: brightness(1.08); }
    }
  }

  /* A first-class action that is a link, not a form submit (e.g. "Add product"). */
  .button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    color: var(--brand-contrast);
    background: var(--brand);
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    &:hover { filter: brightness(1.08); }
  }

  .login-card {
    max-inline-size: 22rem;
    margin-inline: auto;
    margin-block-start: 15vh;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: calc(var(--space) * 1.5);
    & .error { color: var(--danger); font-weight: 500; }
  }

  .site-footer {
    padding: var(--space);
    text-align: center;
    color: oklch(0.5 0.02 260);
  }
}