/* ==========================================================================
   GREEN ISLAND — Design System
   colors_and_type.css
   Brand: GREEN ISLAND · Szczecin waterfront development
   Developer: PCG · Architecture/Concept: 3XA ARCHITECTS
   --------------------------------------------------------------------------
   Two-typeface system (Google Fonts substitutes — see README "Fonts"):
     · Archivo        → neutral grotesque for titles, kickers, labels, UI
     · Hanken Grotesk → humanist grotesque for statements & body copy
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Core palette ----------------------------------------------------- */
  --gi-green:        #0B7A45;   /* PRIMARY — emerald. The brand. */
  --gi-green-deep:   #075C33;   /* pressed / hover-darker */
  --gi-green-bright: #16A35E;   /* over-photo panels read slightly brighter */
  --gi-green-tint:   #E4F2EA;   /* pale mint wash (cards / hovers on light) */

  --gi-ink:         #0A0A0A;   /* near-black text on light */
  --gi-black:       #000000;   /* hero / full-bleed black */
  --gi-paper:       #F9F8F6;   /* off-white — the default content background */
  --gi-white:       #FFFFFF;

  --gi-muted:       #86858F;   /* secondary text on light (questions, captions) */
  --gi-muted-2:     #B7B6BD;   /* tertiary / disabled */
  --gi-hairline:    #DEDDD9;   /* neutral hairline on paper */
  --gi-hairline-gr: rgba(11,122,69,.45); /* emerald hairline (rules, arrows) */
  --gi-on-green-soft:rgba(255,255,255,.62); /* secondary text on emerald */

  /* ---- Typefaces -------------------------------------------------------- */
  --gi-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;        /* titles, labels, UI */
  --gi-font-text:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; /* statements, body */

  /* ---- Type scale (deck = 1280×720 reference) --------------------------- */
  --gi-fs-display:   84px;   /* GREEN ISLAND hero wordmark */
  --gi-fs-h1:        46px;   /* slide titles */
  --gi-fs-statement: 34px;   /* big underlined / highlighted statements */
  --gi-fs-h2:        26px;   /* sub-heads */
  --gi-fs-list:      21px;   /* arrow-list items */
  --gi-fs-body:      18px;
  --gi-fs-kicker:    13px;   /* section labels / running header */
  --gi-fs-caption:   11px;   /* photo credits */

  --gi-lh-tight:     1.05;
  --gi-lh-statement: 1.42;
  --gi-lh-body:      1.55;

  --gi-track-kicker: 0.14em; /* tracked uppercase labels */
  --gi-track-caps:   0.04em;

  /* ---- Geometry --------------------------------------------------------- */
  --gi-radius:       0px;    /* the system is square — no rounded corners */
  --gi-radius-pill:  999px;  /* only the numbered badge circles are round */
  --gi-margin:       7%;     /* slide safe-margin (deck) */
  --gi-rule:         1px;    /* hairline weight */
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */

.gi-display {
  font-family: var(--gi-font-display);
  font-weight: 600;
  font-size: var(--gi-fs-display);
  line-height: var(--gi-lh-tight);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.gi-h1 {
  font-family: var(--gi-font-display);
  font-weight: 600;
  font-size: var(--gi-fs-h1);
  line-height: 1.1;
  letter-spacing: var(--gi-track-caps);
  text-transform: uppercase;
}

.gi-h2 {
  font-family: var(--gi-font-display);
  font-weight: 600;
  font-size: var(--gi-fs-h2);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--gi-track-caps);
}

/* The signature: large humanist statement, often underlined or highlighted */
.gi-statement {
  font-family: var(--gi-font-text);
  font-weight: 400;
  font-size: var(--gi-fs-statement);
  line-height: var(--gi-lh-statement);
  letter-spacing: 0;
}
.gi-statement--underline {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
/* inline marker highlight — emerald box, white text */
.gi-mark {
  background: var(--gi-green);
  color: var(--gi-white);
  padding: 0.04em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.gi-kicker {
  font-family: var(--gi-font-display);
  font-weight: 600;
  font-size: var(--gi-fs-kicker);
  letter-spacing: var(--gi-track-kicker);
  text-transform: uppercase;
}

.gi-body {
  font-family: var(--gi-font-text);
  font-weight: 400;
  font-size: var(--gi-fs-body);
  line-height: var(--gi-lh-body);
}

.gi-caption {
  font-family: var(--gi-font-display);
  font-weight: 500;
  font-size: var(--gi-fs-caption);
  letter-spacing: var(--gi-track-kicker);
  text-transform: uppercase;
  color: var(--gi-muted);
}

/* Arrow-list item: "→  PUBLIC SPACES" */
.gi-listitem {
  font-family: var(--gi-font-display);
  font-weight: 500;
  font-size: var(--gi-fs-list);
  letter-spacing: var(--gi-track-caps);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 1.4em;
}

/* ==========================================================================
   COLOR UTILITIES
   ========================================================================== */
.gi-bg-paper { background: var(--gi-paper); color: var(--gi-ink); }
.gi-bg-green  { background: var(--gi-green);  color: var(--gi-white); }
.gi-bg-black { background: var(--gi-black); color: var(--gi-white); }
.gi-fg-green  { color: var(--gi-green); }
.gi-fg-muted { color: var(--gi-muted); }