/* ============================================================
   CAMP MANDARINO · Climbing Wall — shared brand system
   Mediterranean, sunny, kid-friendly. Tied to the camp's
   mandarin-orange identity.
   ============================================================ */

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

:root {
  /* ---- Brand palette (oklch) ---- */
  --mandarin:      oklch(0.73 0.158 53);    /* primary — mandarin orange  */
  --mandarin-deep: oklch(0.63 0.155 45);    /* darker orange for text/edges */
  --mandarin-soft: oklch(0.93 0.055 65);    /* pale orange wash            */

  --sea:           oklch(0.60 0.095 218);   /* adriatic teal/blue          */
  --sea-deep:      oklch(0.45 0.075 225);   /* deep sea                    */
  --sea-soft:      oklch(0.93 0.030 215);   /* pale sea wash               */

  --sun:           oklch(0.85 0.135 92);    /* sunny yellow accent         */
  --olive:         oklch(0.62 0.085 145);   /* pine / olive green          */
  --coral:         oklch(0.70 0.155 25);    /* warm coral (extra hold)     */

  /* ---- Neutrals (warm) ---- */
  --sand:          oklch(0.975 0.013 80);   /* page background             */
  --paper:         oklch(0.995 0.006 85);   /* card / panel                */
  --ink:           oklch(0.28 0.022 55);    /* primary text                */
  --ink-soft:      oklch(0.46 0.020 60);    /* secondary text              */
  --line:          oklch(0.90 0.015 75);    /* hairlines                   */

  /* ---- Type ---- */
  --display: 'Fredoka', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  /* ---- Radii / shadow ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --shadow-sm: 0 2px 8px oklch(0.45 0.05 55 / 0.10);
  --shadow-md: 0 14px 40px oklch(0.45 0.06 55 / 0.14);
  --shadow-lg: 0 30px 70px oklch(0.40 0.07 50 / 0.20);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.01em;
}

p { line-height: 1.55; }

/* ---- Reusable bits ---- */

/* climbing "hold" dot */
.hold {
  position: absolute;
  border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%;
  display: grid;
  place-items: center;
}
.hold::after {
  content: "";
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.45);
}

/* little chalk-dot bullet */
.kicker {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

/* pill button */
.btn {
  font-family: var(--display);
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 0.85em 1.5em;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.btn-primary {
  background: var(--mandarin);
  color: oklch(0.99 0.01 85);
  box-shadow: 0 8px 22px oklch(0.63 0.15 50 / 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px oklch(0.63 0.15 50 / 0.45); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--sand); transform: translateY(-2px); }

/* image-slot defaults */
image-slot {
  display: block;
  background:
    repeating-linear-gradient(45deg,
      oklch(0.93 0.03 215) 0 14px,
      oklch(0.90 0.035 215) 14px 28px);
  color: var(--sea-deep);
  font-family: 'Hanken Grotesk', monospace;
}