/* @gem tokens — brand "storefront" (Storefront).
 * Generated by @gemsofthq/tokens. Do not edit; edit the seed and regenerate.
 */

:root {
  color-scheme: light dark;
  --gem-spacing: 4.75px;
  --gem-font-sans: 'DS Sans', ui-sans-serif, system-ui, sans-serif;
  --gem-font-serif: 'DS Serif', Georgia, 'Times New Roman', serif;
  --gem-font-display: var(--gem-font-sans);
  --gem-display-weight: 600;
  --gem-icon-stroke: 1.75;
  --gem-radius-xs: 4px;
  --gem-radius-sm: 6px;
  --gem-radius-md: 8px;
  --gem-radius-lg: 12px;
  --gem-radius-xl: 16px;
  --gem-radius-pill: 9999px;
  --gem-text-2xs: .6875rem;
  --gem-text-xs: .75rem;
  --gem-text-sm: .8125rem;
  --gem-text-md: .875rem;
  --gem-text-base: .9375rem;
  --gem-text-lg: 1.0625rem;
  --gem-text-xl: 1.3125rem;
  --gem-text-2xl: 1.625rem;
  --gem-text-display: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  --gem-leading-tight: 1.18;
  --gem-leading-snug: 1.35;
  --gem-leading-base: 1.55;
  --gem-tracking-display: -.032em;
  --gem-tracking-title: -.018em;
  --gem-tracking-body: -.005em;
  --gem-dur-1: 88ms;
  --gem-dur-2: 144ms;
  --gem-dur-3: 256ms;
  --gem-ease: cubic-bezier(.32, .72, 0, 1);
  --gem-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  
  --gem-canvas: #f8f8f7;
  --gem-surface: #fdfdfc;
  --gem-surface-raised: #ffffff;
  --gem-surface-sunken: #f1f1f0;
  --gem-surface-hover: #f1f1f0;
  --gem-text: #1f1e1d;
  --gem-text-muted: #5e5c59;
  --gem-text-subtle: #6e6c6a;
  --gem-text-on-solid: #ffffff;
  --gem-border-subtle: #dbdad9;
  --gem-border: #d0cfcd;
  --gem-border-strong: #bcbab8;
  --gem-focus: #007f89;
  --gem-brand-solid: #007f89;
  --gem-brand-solid-hover: #007079;
  --gem-brand-on-solid: #ffffff;
  --gem-brand-text: #00676f;
  --gem-brand-bg: #e5f5f6;
  --gem-brand-bg-hover: #daeff2;
  --gem-brand-border: #c0e2e6;
  --gem-brand-depth: #007079;
  --gem-success-solid: #35814e;
  --gem-success-solid-hover: #247341;
  --gem-success-on-solid: #ffffff;
  --gem-success-text: #2e6841;
  --gem-success-bg: #e9f5ec;
  --gem-success-border: #cae2cf;
  --gem-success-depth: #247341;
  --gem-warning-solid: #9b6900;
  --gem-warning-solid-hover: #895c00;
  --gem-warning-on-solid: #ffffff;
  --gem-warning-text: #7d5400;
  --gem-warning-bg: #f9f0e3;
  --gem-warning-border: #ecd8bc;
  --gem-warning-depth: #895c00;
  --gem-danger-solid: #bc514e;
  --gem-danger-solid-hover: #ac4240;
  --gem-danger-on-solid: #ffffff;
  --gem-danger-text: #95423f;
  --gem-danger-bg: #ffecea;
  --gem-danger-border: #f8d0cc;
  --gem-danger-depth: #ac4240;
  --gem-info-solid: #147ab0;
  --gem-info-solid-hover: #006b9f;
  --gem-info-on-solid: #ffffff;
  --gem-info-text: #1a628c;
  --gem-info-bg: #e7f3fc;
  --gem-info-border: #c4dff3;
  --gem-info-depth: #006b9f;
  --gem-chart-grid: #e4e3e2;
  --gem-chart-line: #bcbab8;
  --gem-chart-accent: #007f89;
  --gem-avatar-1-bg: #e3f5f7;
  --gem-avatar-1-text: #00676f;
  --gem-avatar-1-ring: #bce3e7;
  --gem-avatar-2-bg: #e8f2fe;
  --gem-avatar-2-text: #2d5f93;
  --gem-avatar-2-ring: #c7ddf6;
  --gem-avatar-3-bg: #e7f5ed;
  --gem-avatar-3-text: #026a48;
  --gem-avatar-3-ring: #c3e4d2;
  --gem-avatar-4-bg: #f3effc;
  --gem-avatar-4-text: #68508f;
  --gem-avatar-4-ring: #dfd5f3;
  --gem-shadow-rgb: 52 38 21;
  --gem-brand-rgb: 0 127 137;
  --gem-shadow-xs: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.07);
  --gem-shadow-sm: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.07), 0 2px 4px -1px rgb(var(--gem-shadow-rgb) / 0.06);
  --gem-shadow-md: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.07), 0 3px 6px -2px rgb(var(--gem-shadow-rgb) / 0.06), 0 8px 16px -6px rgb(var(--gem-shadow-rgb) / 0.05);
  --gem-shadow-lg: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.07), 0 4px 8px -2px rgb(var(--gem-shadow-rgb) / 0.06), 0 12px 24px -8px rgb(var(--gem-shadow-rgb) / 0.05), 0 24px 48px -16px rgb(var(--gem-shadow-rgb) / 0.035);
  --gem-bevel: inset 0 -1px 0 0 rgb(var(--gem-shadow-rgb) / .07);
  --gem-bevel-solid: inset 0 1px 0 0 rgb(255 255 255 / 0.22);
  --gem-hairline: var(--gem-shadow-rgb);
  --gem-hairline-a: 0.08;
  --gem-well-a: 0.055;
  --gem-well-a-strong: 0.11;
  --gem-brand-gradient: linear-gradient(180deg, var(--gem-brand-solid), var(--gem-brand-depth));
  --gem-success-gradient: linear-gradient(180deg, var(--gem-success-solid), var(--gem-success-depth));
  --gem-warning-gradient: linear-gradient(180deg, var(--gem-warning-solid), var(--gem-warning-depth));
  --gem-danger-gradient: linear-gradient(180deg, var(--gem-danger-solid), var(--gem-danger-depth));
  --gem-info-gradient: linear-gradient(180deg, var(--gem-info-solid), var(--gem-info-depth));
  --gem-grain-a: 0.055;
  --gem-glow-a: 0.06;
}

/* An explicit choice wins over the system preference, in both directions. */
[data-scheme="dark"] {
  --gem-canvas: #111111;
  --gem-surface: #191918;
  --gem-surface-raised: #232221;
  --gem-surface-sunken: #111111;
  --gem-surface-hover: #2b2b2a;
  --gem-text: #f0f0ef;
  --gem-text-muted: #9f9d9c;
  --gem-text-subtle: #8c8a88;
  --gem-text-on-solid: #ffffff;
  --gem-border-subtle: #3f3e3d;
  --gem-border: #4e4d4b;
  --gem-border-strong: #666462;
  --gem-focus: #007f89;
  --gem-brand-solid: #007f89;
  --gem-brand-solid-hover: #00919b;
  --gem-brand-on-solid: #ffffff;
  --gem-brand-text: #6fa8ae;
  --gem-brand-bg: #0e2729;
  --gem-brand-bg-hover: #0e3134;
  --gem-brand-border: #12474b;
  --gem-brand-depth: #006f77;
  --gem-success-solid: #35814e;
  --gem-success-solid-hover: #45915d;
  --gem-success-on-solid: #ffffff;
  --gem-success-text: #81a88a;
  --gem-success-bg: #17271b;
  --gem-success-border: #274730;
  --gem-success-depth: #237240;
  --gem-warning-solid: #9b6900;
  --gem-warning-solid-hover: #af7700;
  --gem-warning-on-solid: #ffffff;
  --gem-warning-text: #b8996c;
  --gem-warning-bg: #2c200d;
  --gem-warning-border: #523912;
  --gem-warning-depth: #885b00;
  --gem-danger-solid: #bc514e;
  --gem-danger-solid-hover: #ce615d;
  --gem-danger-on-solid: #ffffff;
  --gem-danger-text: #cb8d88;
  --gem-danger-bg: #331b19;
  --gem-danger-border: #5e2f2c;
  --gem-danger-depth: #ab413f;
  --gem-info-solid: #147ab0;
  --gem-info-solid-hover: #2c89c1;
  --gem-info-on-solid: #ffffff;
  --gem-info-text: #78a3c3;
  --gem-info-bg: #122431;
  --gem-info-border: #1e425a;
  --gem-info-depth: #006a9d;
  --gem-chart-grid: #343332;
  --gem-chart-line: #666462;
  --gem-chart-accent: #007f89;
  --gem-avatar-1-bg: #09272a;
  --gem-avatar-1-text: #66a9b0;
  --gem-avatar-1-ring: #01484d;
  --gem-avatar-2-bg: #152333;
  --gem-avatar-2-text: #7ea1c8;
  --gem-avatar-2-ring: #25405e;
  --gem-avatar-3-bg: #11281d;
  --gem-avatar-3-text: #74aa8f;
  --gem-avatar-3-ring: #1a4834;
  --gem-avatar-4-bg: #251e31;
  --gem-avatar-4-text: #a596c4;
  --gem-avatar-4-ring: #43375a;
  --gem-shadow-rgb: 1 0 0;
  --gem-brand-rgb: 0 127 137;
  --gem-shadow-xs: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4);
  --gem-shadow-sm: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4), 0 2px 4px -1px rgb(var(--gem-shadow-rgb) / 0.32);
  --gem-shadow-md: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4), 0 3px 6px -2px rgb(var(--gem-shadow-rgb) / 0.32), 0 8px 16px -6px rgb(var(--gem-shadow-rgb) / 0.26);
  --gem-shadow-lg: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4), 0 4px 8px -2px rgb(var(--gem-shadow-rgb) / 0.32), 0 12px 24px -8px rgb(var(--gem-shadow-rgb) / 0.26), 0 24px 48px -16px rgb(var(--gem-shadow-rgb) / 0.2);
  --gem-bevel: inset 0 1px 0 0 rgb(255 255 255 / .06);
  --gem-bevel-solid: inset 0 1px 0 0 rgb(255 255 255 / 0.16);
  --gem-hairline: 255 255 255;
  --gem-hairline-a: 0.1;
  --gem-well-a: 0.3;
  --gem-well-a-strong: 0.26;
  --gem-brand-gradient: linear-gradient(180deg, var(--gem-brand-solid), var(--gem-brand-depth));
  --gem-success-gradient: linear-gradient(180deg, var(--gem-success-solid), var(--gem-success-depth));
  --gem-warning-gradient: linear-gradient(180deg, var(--gem-warning-solid), var(--gem-warning-depth));
  --gem-danger-gradient: linear-gradient(180deg, var(--gem-danger-solid), var(--gem-danger-depth));
  --gem-info-gradient: linear-gradient(180deg, var(--gem-info-solid), var(--gem-info-depth));
  --gem-grain-a: 0.07;
  --gem-glow-a: 0.09;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --gem-canvas: #111111;
    --gem-surface: #191918;
    --gem-surface-raised: #232221;
    --gem-surface-sunken: #111111;
    --gem-surface-hover: #2b2b2a;
    --gem-text: #f0f0ef;
    --gem-text-muted: #9f9d9c;
    --gem-text-subtle: #8c8a88;
    --gem-text-on-solid: #ffffff;
    --gem-border-subtle: #3f3e3d;
    --gem-border: #4e4d4b;
    --gem-border-strong: #666462;
    --gem-focus: #007f89;
    --gem-brand-solid: #007f89;
    --gem-brand-solid-hover: #00919b;
    --gem-brand-on-solid: #ffffff;
    --gem-brand-text: #6fa8ae;
    --gem-brand-bg: #0e2729;
    --gem-brand-bg-hover: #0e3134;
    --gem-brand-border: #12474b;
    --gem-brand-depth: #006f77;
    --gem-success-solid: #35814e;
    --gem-success-solid-hover: #45915d;
    --gem-success-on-solid: #ffffff;
    --gem-success-text: #81a88a;
    --gem-success-bg: #17271b;
    --gem-success-border: #274730;
    --gem-success-depth: #237240;
    --gem-warning-solid: #9b6900;
    --gem-warning-solid-hover: #af7700;
    --gem-warning-on-solid: #ffffff;
    --gem-warning-text: #b8996c;
    --gem-warning-bg: #2c200d;
    --gem-warning-border: #523912;
    --gem-warning-depth: #885b00;
    --gem-danger-solid: #bc514e;
    --gem-danger-solid-hover: #ce615d;
    --gem-danger-on-solid: #ffffff;
    --gem-danger-text: #cb8d88;
    --gem-danger-bg: #331b19;
    --gem-danger-border: #5e2f2c;
    --gem-danger-depth: #ab413f;
    --gem-info-solid: #147ab0;
    --gem-info-solid-hover: #2c89c1;
    --gem-info-on-solid: #ffffff;
    --gem-info-text: #78a3c3;
    --gem-info-bg: #122431;
    --gem-info-border: #1e425a;
    --gem-info-depth: #006a9d;
    --gem-chart-grid: #343332;
    --gem-chart-line: #666462;
    --gem-chart-accent: #007f89;
    --gem-avatar-1-bg: #09272a;
    --gem-avatar-1-text: #66a9b0;
    --gem-avatar-1-ring: #01484d;
    --gem-avatar-2-bg: #152333;
    --gem-avatar-2-text: #7ea1c8;
    --gem-avatar-2-ring: #25405e;
    --gem-avatar-3-bg: #11281d;
    --gem-avatar-3-text: #74aa8f;
    --gem-avatar-3-ring: #1a4834;
    --gem-avatar-4-bg: #251e31;
    --gem-avatar-4-text: #a596c4;
    --gem-avatar-4-ring: #43375a;
    --gem-shadow-rgb: 1 0 0;
    --gem-brand-rgb: 0 127 137;
    --gem-shadow-xs: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4);
    --gem-shadow-sm: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4), 0 2px 4px -1px rgb(var(--gem-shadow-rgb) / 0.32);
    --gem-shadow-md: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4), 0 3px 6px -2px rgb(var(--gem-shadow-rgb) / 0.32), 0 8px 16px -6px rgb(var(--gem-shadow-rgb) / 0.26);
    --gem-shadow-lg: 0 1px 1px rgb(var(--gem-shadow-rgb) / 0.4), 0 4px 8px -2px rgb(var(--gem-shadow-rgb) / 0.32), 0 12px 24px -8px rgb(var(--gem-shadow-rgb) / 0.26), 0 24px 48px -16px rgb(var(--gem-shadow-rgb) / 0.2);
    --gem-bevel: inset 0 1px 0 0 rgb(255 255 255 / .06);
    --gem-bevel-solid: inset 0 1px 0 0 rgb(255 255 255 / 0.16);
    --gem-hairline: 255 255 255;
    --gem-hairline-a: 0.1;
    --gem-well-a: 0.3;
    --gem-well-a-strong: 0.26;
    --gem-brand-gradient: linear-gradient(180deg, var(--gem-brand-solid), var(--gem-brand-depth));
    --gem-success-gradient: linear-gradient(180deg, var(--gem-success-solid), var(--gem-success-depth));
    --gem-warning-gradient: linear-gradient(180deg, var(--gem-warning-solid), var(--gem-warning-depth));
    --gem-danger-gradient: linear-gradient(180deg, var(--gem-danger-solid), var(--gem-danger-depth));
    --gem-info-gradient: linear-gradient(180deg, var(--gem-info-solid), var(--gem-info-depth));
    --gem-grain-a: 0.07;
    --gem-glow-a: 0.09;
  }
}

:root:lang(ar) {
  --gem-leading-tight: 1.4;
  --gem-leading-snug: 1.6;
  --gem-leading-base: 1.85;
  --gem-tracking-display: 0;
  --gem-tracking-title: 0;
  --gem-tracking-body: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gem-dur-1: 1ms;
    --gem-dur-2: 1ms;
    --gem-dur-3: 1ms;
  }
}

/*
 * The storefront's brand surface -- graded by `pnpm brand`. Logical
 * properties only, per AGENTS.md: no `left`, no `right`, so the layout
 * follows `dir` on its own rather than needing a mirrored stylesheet for
 * Arabic.
 *
 * Every colour here is a `--gem-*` custom property declared by
 * `generated/tokens.css`, which is emitted from the four numbers in
 * `brands/storefront.seed.json`. The two files are served as one response by
 * `/storefront.css`, generated first.
 */

body {
  margin-inline: auto;
  margin-block: 0;
  padding-inline: 1.5rem;
  padding-block: 2rem;
  max-inline-size: 40rem;
  text-align: start;
  background: var(--gem-canvas);
  color: var(--gem-text);
  font-family: var(--gem-font-sans);
  font-size: var(--gem-text-base);
  line-height: var(--gem-leading-base);
}

nav.language-switcher {
  text-align: end;
  font-size: var(--gem-text-sm);
}

a {
  color: var(--gem-brand-text);
}

h1 {
  font-family: var(--gem-font-display);
  font-size: var(--gem-text-display);
  font-weight: var(--gem-display-weight);
  line-height: var(--gem-leading-tight);
  letter-spacing: var(--gem-tracking-display);
  margin-block: calc(var(--gem-spacing) * 4) calc(var(--gem-spacing) * 3);
}

h2 {
  font-size: var(--gem-text-xl);
  line-height: var(--gem-leading-snug);
  letter-spacing: var(--gem-tracking-title);
  margin-block: calc(var(--gem-spacing) * 8) calc(var(--gem-spacing) * 3);
}

p.intro {
  font-size: var(--gem-text-lg);
  color: var(--gem-text-muted);
}

p.note,
span.help {
  font-size: var(--gem-text-sm);
  color: var(--gem-text-subtle);
}

ul.points,
ul.package-list {
  list-style: none;
  padding-inline: 0;
  margin-block: calc(var(--gem-spacing) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gem-spacing) * 3);
}

ul.points li {
  padding-inline-start: calc(var(--gem-spacing) * 3);
  border-inline-start: 2px solid var(--gem-brand-border);
}

li.package {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gem-spacing) * 2);
  justify-content: space-between;
  align-items: baseline;
  padding-inline: calc(var(--gem-spacing) * 3);
  padding-block: calc(var(--gem-spacing) * 3);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border-subtle);
  border-radius: var(--gem-radius-lg);
}

li.package span {
  color: var(--gem-text-muted);
  font-size: var(--gem-text-sm);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

p.field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gem-spacing) * 1);
  margin-block: 0;
}

label {
  font-size: var(--gem-text-sm);
  color: var(--gem-text-muted);
}

form input,
form select {
  padding-inline: 0.75rem;
  padding-block: 0.5rem;
  border-inline-start-width: 1px;
  border-inline-end-width: 1px;
  border-block-width: 1px;
  border-style: solid;
  border-color: var(--gem-border);
  border-radius: var(--gem-radius-md);
  background: var(--gem-surface-raised);
  color: var(--gem-text);
  font-family: inherit;
  font-size: var(--gem-text-base);
}

form input:focus-visible,
form select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gem-focus);
  outline-offset: 2px;
}

button {
  padding-inline: calc(var(--gem-spacing) * 4);
  padding-block: calc(var(--gem-spacing) * 2.5);
  border: none;
  border-radius: var(--gem-radius-md);
  background: var(--gem-brand-solid);
  color: var(--gem-brand-on-solid);
  font-family: inherit;
  font-size: var(--gem-text-base);
  cursor: pointer;
}

button:hover {
  background: var(--gem-brand-solid-hover);
}

.form-error {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--gem-danger-border);
  padding-inline-start: 0.75rem;
  padding-block: calc(var(--gem-spacing) * 2);
  background: var(--gem-danger-bg);
  color: var(--gem-danger-text);
  border-radius: var(--gem-radius-sm);
}

section.find {
  margin-block-start: calc(var(--gem-spacing) * 10);
  padding-block-start: calc(var(--gem-spacing) * 6);
  border-block-start: 1px solid var(--gem-border-subtle);
}