:root {
  --gg-surface-ink: #16262e;
  --gg-surface-paper: #faf9f6;
  --gg-surface-sky: #d6e9f2;
  --gg-surface-sea: #5ba4bd;
  --gg-surface-sand: #efe3bd;
  --gg-surface-green: #1d4a35;
  --gg-surface-green-dark: #12362a;
  --gg-surface-charcoal: #3c4145;
  --gg-surface-cloud-pattern: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22160%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%22.23%22%3E%3Cpath d=%22M40,50 a12,12 0 0 1 12,-12 a14,14 0 0 1 26,-4 a10,10 0 0 1 14,10 a8,8 0 0 1 -6,6 L46,50 Z%22/%3E%3Cpath d=%22M160,120 a10,10 0 0 1 10,-10 a12,12 0 0 1 22,-3 a8,8 0 0 1 12,8 a7,7 0 0 1 -5,5 L165,120 Z%22/%3E%3C/g%3E%3C/svg%3E");
  --gg-surface-paper-pattern: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22120%22%3E%3Cg fill=%22none%22 stroke=%22%23d7caa6%22 stroke-opacity=%22.28%22 stroke-width=%221.5%22%3E%3Cpath d=%22M18 28h22M29 17v22M138 82h18M147 73v18%22/%3E%3C/g%3E%3C/svg%3E");
  --gg-surface-grass-pattern: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22150%22 height=%22110%22%3E%3Cg fill=%22none%22 stroke=%22%231d4a35%22 stroke-opacity=%22.09%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M30 50q-2-9-6-13m6 13q0-10 1-15m-1 15q3-8 8-12M112 92q-2-9-6-13m6 13q0-10 1-15m-1 15q3-8 8-12%22/%3E%3C/g%3E%3C/svg%3E");
  --gg-surface-wave-pattern: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%2280%22%3E%3Cg fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.12%22 stroke-width=%222.5%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M10,24 q7,-8 14,0 q7,8 14,0 q7,-8 14,0%22/%3E%3Cpath d=%22M70,60 q7,-8 14,0 q7,8 14,0%22/%3E%3C/g%3E%3C/svg%3E");
  --gg-surface-charcoal-pattern: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22150%22 height=%22120%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%22.06%22%3E%3Crect x=%2220%22 y=%2230%22 width=%2226%22 height=%224%22 rx=%222%22/%3E%3Crect x=%2295%22 y=%2288%22 width=%2226%22 height=%224%22 rx=%222%22/%3E%3C/g%3E%3C/svg%3E");
  --gg-surface-stripe-pattern: repeating-linear-gradient(90deg, rgba(250, 249, 246, 0.045) 0 3px, transparent 3px 26px);
  --gg-surface-accent-edge: linear-gradient(90deg, #ee5a24, #f5ba61 45%, #5ba4bd);
}

.gg-surface--sky,
.gg-surface--sky-edge {
  background-color: var(--gg-surface-sky);
  background-image:
    radial-gradient(circle at 83% 20%, rgba(255, 255, 255, 0.46) 0 4%, transparent 4.2%),
    var(--gg-surface-cloud-pattern);
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: auto, 240px 160px;
}

.gg-surface--sky-edge {
  background-image:
    var(--gg-surface-accent-edge),
    radial-gradient(circle at 83% 20%, rgba(255, 255, 255, 0.46) 0 4%, transparent 4.2%),
    var(--gg-surface-cloud-pattern);
  background-position: bottom left, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 7px, auto, 240px 160px;
}

.gg-surface--paper {
  background-color: var(--gg-surface-paper);
  background-image: var(--gg-surface-paper-pattern);
  background-repeat: repeat;
  background-size: 180px 120px;
}

.gg-surface--sand {
  background-color: var(--gg-surface-sand);
  background-image: var(--gg-surface-grass-pattern);
  background-repeat: repeat;
  background-size: 150px 110px;
}

.gg-surface--waves {
  background-color: var(--gg-surface-sea);
  background-image: var(--gg-surface-wave-pattern);
  background-repeat: repeat;
  background-size: 120px 80px;
}

.gg-surface--green {
  background-color: var(--gg-surface-green);
  background-image: var(--gg-surface-stripe-pattern);
}

.gg-surface--green-dark {
  background-color: var(--gg-surface-green-dark);
  background-image: var(--gg-surface-stripe-pattern);
}

.gg-surface--charcoal {
  background-color: var(--gg-surface-charcoal);
  background-image: var(--gg-surface-charcoal-pattern);
  background-repeat: repeat;
  background-size: 150px 120px;
}