/*
 * Design tokens for the Dojo Zen course surfaces.
 * Scoped, not :root, so nothing leaks into the theme. The hex values are the
 * site's Kadence palette, repeated here only because the enrollments panel
 * renders without Kadence. This is the only file with color literals.
 */
.dojo-landing,
.dojo-panel,
.dojo-cancel,
.dojo-reviews,
.dojo-edition,
.dojo-next-course,
.dojo-hero-row,
.dojo-login,
.dojo-enrollment {
  /* Colour (Kadence palette 1, 2, 3, 4, 5, 7, 9, 11) */
  --dojo-seal: #d9261b;
  --dojo-seal-deep: #921810;
  --dojo-ink: #1a202c;
  --dojo-text: #2d3748;
  --dojo-muted: #4a5568;
  --dojo-wash: #f1f1f1;
  --dojo-paper: #ffffff;
  --dojo-ok: #13612e;
  --dojo-warn: #b45309; /* pending: amber, 5:1 on white */
  --dojo-rule: #cbd5e0;
  --dojo-backdrop: rgb(26 32 44 / 60%);

  /* Sumi ink: the dark bands. The light red is for small text on ink (the seal red is 3.9:1 there, this is 6.3:1). */
  --dojo-sumi: #0d0e11;
  --dojo-on-ink: #e6e8ec;
  --dojo-on-ink-muted: #b4bbc6;
  --dojo-on-ink-edge: rgb(230 232 236 / 22%);
  --dojo-seal-on-ink: #ff5a4d;

  /* Contextual colours: components read --dojo-c-*, and a band (light, ink or red) decides what they mean by
     setting --dojo-band-*. The band value inherits down to the component's own scope, where it is read again. */
  --dojo-c-strong: var(--dojo-band-strong, var(--dojo-ink));
  --dojo-c-text: var(--dojo-band-text, var(--dojo-text));
  --dojo-c-muted: var(--dojo-band-muted, var(--dojo-muted));
  --dojo-c-edge: var(--dojo-band-edge, var(--dojo-rule));
  --dojo-c-field: var(--dojo-band-field, var(--dojo-field-edge));
  --dojo-c-accent: var(--dojo-band-accent, var(--dojo-seal-deep));
  --dojo-c-dash: var(--dojo-band-dash, var(--dojo-seal));
  --dojo-c-focus: var(--dojo-band-focus, var(--dojo-ink));
  --dojo-c-inverse: var(--dojo-band-inverse, var(--dojo-paper));

  /* Landing: red is a seal, a button or large text, never text on the wash (4.38:1). */
  --dojo-seal-edge: color-mix(in srgb, var(--dojo-paper) 55%, transparent);
  --dojo-error: var(--dojo-seal-deep);
  --dojo-field-edge: var(--dojo-muted);
  --dojo-lift: 0 1.25rem 2.5rem -1.25rem color-mix(in srgb, var(--dojo-ink) 35%, transparent);


  /* Zen motifs: decorative only, always behind text on a solid surface. The enso is a mask: any colour can paint it. */
  --dojo-washi: #f6f3ee;
  --dojo-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .28  0 0 0 .9 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dojo-motif-enso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%231a202c' stroke-linecap='round'%3E%3Cpath d='M42.7 59.8A70 70 0 1 1 30.3 106.1' stroke-width='9'/%3E%3Cpath d='M46 55.5A73 73 0 1 1 27 100' stroke-width='2.5' opacity='.6'/%3E%3Cpath d='M50 66A62 62 0 0 1 130 44' stroke-width='1.5' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");

  /* Type: only faces the site already loads; system fallbacks elsewhere */
  --dojo-font-text: montserrat, system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --dojo-font-display: "Abhaya Libre", "Iowan Old Style", "Palatino Linotype", georgia, serif;

  /* Utopia fluid type: 320 to 1240px, 16 to 18px base, ratio 1.2 to 1.25 */
  --dojo-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
  /* The one exception under the floor: short uppercase labels (the hero tags), where capitals read larger. */
  --dojo-step-label: 0.8125rem;
  --dojo-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --dojo-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4062rem);
  --dojo-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
  --dojo-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
  --dojo-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
  --dojo-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
  --dojo-step-6: clamp(2.986rem, 2.3rem + 3.4vw, 5.25rem);
  --dojo-step-7: clamp(3.583rem, 2.45rem + 4.3vw, 6.3rem);

  /* Utopia fluid space */
  --dojo-space-3xs: clamp(0.25rem, 0.2391rem + 0.0543vw, 0.2812rem);
  --dojo-space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --dojo-space-xs: clamp(0.75rem, 0.7174rem + 0.163vw, 0.8438rem);
  --dojo-space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --dojo-space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --dojo-space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --dojo-space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --dojo-space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --dojo-space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);

  /* Shape and interaction */
  --dojo-radius: 0.125rem;
  --dojo-border: 0.125rem;
  --dojo-target: 2.75rem;
  --dojo-measure: 62ch;
  --dojo-hairline: 0.0625rem;
  --dojo-wide: 72rem;
  --dojo-gutter: var(--dojo-space-m);
  /* The landing's own sticky header: anchors leave this much room above their target. */
  --dojo-header-height: 4.5rem;
}

.dojo-landing :focus-visible,
.dojo-panel :focus-visible,
.dojo-cancel :focus-visible,
.dojo-reviews :focus-visible,
.dojo-edition :focus-visible,
.dojo-enrollment :focus-visible {
  outline: 0.125rem solid var(--dojo-c-focus);
  outline-offset: 0.125rem;
}