/* ============================================================
   Design tokens
   ------------------------------------------------------------
   Single source of truth for colour, type and spacing.

   RULE: no hex code, font name or pixel size appears in a
   template or component. Everything references a variable
   from this file.
   ============================================================ */

:root {

  /* --- Colour ------------------------------------ */

  --color-ink:            #19324A;   /* Main text */
  --color-ink-muted:      #526477;   /* Metadata and captions */
  --color-page:           #FFFDF8;   /* Warm off-white page background */
  --color-surface:        #FFFFFF;   /* Cards and panels */

  --color-brand:          #126B61;   /* Primary button, key emphasis */
  --color-brand-ink:      #FFFFFF;   /* Text sitting ON the brand colour */

  --color-border:         #D8DEE3;   /* Fine rules and card edges */
  --color-link:           #126B61;   /* Text links */
  --color-focus:          #C3434E;   /* Keyboard focus ring */

  /* Collection Accents (Logo Palette) */
  --color-accent-leaf:    #91BE43;   /* Leaf green */
  --color-accent-yellow:  #F4C344;   /* Sunshine yellow */
  --color-accent-sky:     #59B9DE;   /* Sky blue */
  --color-accent-coral:   #E85C63;   /* Coral */

  /* Contrast requirement, checked at build time:
       --color-ink   on --color-page      >= 4.5:1
       --color-ink   on --color-surface   >= 4.5:1
       --color-brand-ink on --color-brand >= 4.5:1 */


  /* --- Typography -------------------------------- */

  --font-display: 'Fredoka', 'Quicksand', sans-serif;
  --font-body:    'Fira Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --size-body:        1rem;      /* 16px baseline */
  --size-body-mobile: 1rem;
  --line-height-body: 1.6;

  --size-h1: 2.25rem;
  --size-h2: 1.65rem;
  --size-h3: 1.25rem;

  --letter-spacing-display: -0.01em;


  /* --- Layout and shape ------------------------- */

  --max-width: 1240px;   /* content column cap */
  --radius:    12px;     /* cards and buttons rounded-xl */
  --gap:       20px;     /* grid gap */
  --space:     8px;      /* base spacing unit */

  --cover-cols-desktop: 4;
  --cover-cols-tablet:  3;
  --cover-cols-phone:   2;

  --cover-fit: whole;

}

.max-w-custom {
  max-width: var(--max-width);
}

.text-2xs { font-size: 0.7rem; line-height: 1.2; }   /* ~11px */
.text-3xs { font-size: 0.625rem; line-height: 1.2; } /* 10px */
.text-4xs { font-size: 0.55rem; line-height: 1.2; }  /* ~8.8px */


/* ============================================================
   Derived, not authored
   Do not put new brand decisions below this line.
   ============================================================ */

.grid-covers {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cover-cols-phone), 1fr);
}

@media (min-width: 640px) {
  .grid-covers {
    grid-template-columns: repeat(var(--cover-cols-tablet), 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-covers {
    grid-template-columns: repeat(var(--cover-cols-desktop), 1fr);
  }
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-body);
}

@media (max-width: 640px) {
  body { font-size: var(--size-body-mobile); }
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.25;
}

h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

a       { color: var(--color-link); }
.muted  { color: var(--color-ink-muted); }

.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.bg-pattern {
  background-image: url('/assets/pattern.svg');
  background-repeat: repeat;
  background-size: 260px 260px;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}