/* GS1 Ísland Design System — core tokens
 * Lifted directly from uploads/gs1-island-portal-design-system-v2.md.
 * Three-tier colour structure: brand / accessible / UI.
 * Danger red is explicitly NOT a brand colour.
 */

@font-face {
  font-family: 'Gothamoffice';
  src: url('../fonts/621c78ce995dfe751ca73a8c_GothamOffice-Regular.woff') format('woff'),
       url('../fonts/621c78ce995dfe15bca73b8c_GothamOffice-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gothamoffice';
  src: url('../fonts/621c78ce995dfe751ca73a8c_GothamOffice-Regular.woff') format('woff'),
       url('../fonts/621c78ce995dfe15bca73b8c_GothamOffice-Regular.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gothamoffice';
  src: url('../fonts/621c78ce995dfeeb10a73a85_GothamOffice-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ——————————————————————————————————————————
   * Tier 1 — GS1 brand colours
   * Large areas, top nav, hero, primary buttons, brand identity.
   * —————————————————————————————————————————— */
  --blue-brand:       #002C6C;  /* GS1 Blue — dominant brand colour */
  --orange-brand:     #F26334;  /* GS1 Orange — accent, callouts */
  --blue-4:           #001A4D;  /* Dark Blue — hover state on GS1 Blue (Ísland deviation) */

  /* ——————————————————————————————————————————
   * Tier 2 — Accessible colours
   * Text and small backgrounds. WCAG AA vs white / UI 1.
   * —————————————————————————————————————————— */
  --light-blue-3:     #008DBD;  /* Interactive blue — links, focus rings */
  --orange-3:         #CD3C0D;  /* Accessible orange — orange text on white */

  /* ——————————————————————————————————————————
   * Tier 3 — UI colours
   * Backgrounds, borders, surfaces, hierarchy.
   * —————————————————————————————————————————— */
  --light-blue:       #E5F0FC;  /* UI 1 — large soft on-brand background */
  --light-blue-2:     #C4D7ED;  /* UI 2 — soft borders, dividers */
  --light-grey:       #F0F5FA;  /* UI surface tinted — section headers, page bg */
  --gray:             #F8F8F8;  /* UI surface neutral — image/document panels */
  --surface-white:    #FFFFFF;
  --text-color:       #222222;  /* Body text, field values */
  --text-muted:       #6B7280;  /* Muted / helper text */
  --border-neutral:   #D1D5DB;
  --border-card:      #E5E7EB;

  /* ——————————————————————————————————————————
   * Danger red — UI colour, NOT brand.
   * Errors and destructive actions only.
   * —————————————————————————————————————————— */
  --error:            #DC2626;
  --error-bg:         #FFF5F5;
  --error-border:     #FECACA;
  --error-text-dark:  #991B1B;   /* for allergen "contains X" tags */
  --error-tag-bg:     #FEE2E2;

  /* ——————————————————————————————————————————
   * Semantic states (portal-specific extensions).
   * Pair colour with a leading icon — never colour alone.
   * —————————————————————————————————————————— */
  --success-text:     #276749;
  --success-border:   #C6F6D5;
  --success-bg:       #F0FFF4;

  --warning-text:     #975A16;
  --warning-border:   #FEFCBF;
  --warning-bg:       #FFFFF0;

  --info-text:        var(--blue-brand);
  --info-border:      var(--light-blue-2);
  --info-bg:          var(--light-blue);

  /* ——————————————————————————————————————————
   * Product-identity accents
   * NOT semantic colours — visual tags for product attribution only.
   * —————————————————————————————————————————— */
  --gtin:             #1FA84B;  /* GTIN service green */
  --vorukladdi:       #9481AF;  /* Vörukladdi service purple */
  --gln:              var(--orange-brand);     /* GLN uses orange chip on site */
  --gagnalaug:        var(--light-blue-3);     /* Gagnalaug uses light-blue chip */

  /* ——————————————————————————————————————————
   * Typography
   * —————————————————————————————————————————— */
  --font-display:     'Gothamoffice', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:        Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* Type scale (from live gs1.is, adapted for portal) */
  --fs-hero:          54px;  /* Landing hero H1 — Gothamoffice 700 */
  --fs-h1:            40px;  /* Page H1 — Gothamoffice 400 */
  --fs-h2:            27px;  /* Section H2 — Gothamoffice 500 */
  --fs-h3:            20px;  /* Card H3 — Gothamoffice 500 */
  --fs-h4:            16px;  /* Sub-heading — Gothamoffice 500 */
  --fs-body:          15px;  /* Body / field values */
  --fs-small:         13px;  /* Metadata, labels, helper text */
  --fs-tag:           12px;  /* Tags / chips */
  --fs-button:        15px;  /* Default button label */

  --lh-body:          1.5;
  --lh-heading:       1.2;

  /* ——————————————————————————————————————————
   * Spacing scale — strict 4-based.
   * Do not introduce arbitrary values.
   * —————————————————————————————————————————— */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-6:          24px;
  --space-8:          32px;
  --space-12:         48px;
  --space-16:         64px;
  --space-24:         96px;

  /* ——————————————————————————————————————————
   * Radii
   * —————————————————————————————————————————— */
  --radius-button:    4px;
  --radius-image:     4px;
  --radius-card:      6px;
  --radius-input:     6px;
  --radius-modal:     6px;
  --radius-pill:      999px;

  /* ——————————————————————————————————————————
   * Elevation — deliberately flat.
   * —————————————————————————————————————————— */
  --shadow-card:      0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-modal:     0 10px 25px rgba(0, 0, 0, 0.08);

  /* ——————————————————————————————————————————
   * Focus ring
   * —————————————————————————————————————————— */
  --focus-outline:    2px solid var(--light-blue-3);
  --focus-glow:       0 0 0 3px rgba(0, 141, 189, 0.2);

  /* ——————————————————————————————————————————
   * Layout
   * —————————————————————————————————————————— */
  --content-max:      1200px;
  --content-pad-x:    32px;

  /* ——————————————————————————————————————————
   * Motion
   * —————————————————————————————————————————— */
  --dur-fast:         150ms;
  --dur-std:          200ms;
  --dur-panel:        300ms;
  --dur-zoom:         600ms;
  --ease-standard:    ease;
  --ease-zoom:        cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ——————————————————————————————————————————————————————————————
 * Semantic element styles.
 * Pair with class="gs1" on the root of your artefact to scope.
 * —————————————————————————————————————————————————————————————— */

.gs1 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gs1 h1, .gs1 h2, .gs1 h3, .gs1 h4, .gs1 h5, .gs1 h6 {
  font-family: var(--font-display);
  color: var(--blue-brand);
  line-height: var(--lh-heading);
  margin: 0;
  font-weight: 500;
}

.gs1 h1 { font-size: var(--fs-h1); font-weight: 400; }
.gs1 h2 { font-size: var(--fs-h2); font-weight: 500; }
.gs1 h3 { font-size: var(--fs-h3); font-weight: 500; }
.gs1 h4 { font-size: var(--fs-h4); font-weight: 500; }

.gs1 .hero-h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
}

.gs1 p { margin: 0 0 var(--space-4) 0; }

.gs1 a {
  color: var(--light-blue-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.gs1 a:hover { text-decoration: underline; }

.gs1 small, .gs1 .meta {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.gs1 label, .gs1 .field-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-1);
}

.gs1 code, .gs1 kbd {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
}

.gs1 *:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-glow);
}