/* PhotoOra's interface brand. Edit fonts and purple here for every app page.
   Event themes and printable album/sign artwork have their own palettes. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-wordmark: var(--font-sans);
  --wordmark-weight: 500;
  --wordmark-tracking: -.055em;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --brand-primary: #7551e6;
  --brand-logo-purple: var(--brand-primary);
  --brand-mark: url('/img/brand/camera-p-soft-v3.svg');
  --brand-mark-scale: 100%;
  --brand-mark-ratio: 1.2555;
  --brand-hover: #6040d3;
  --brand-on-primary: #ffffff;
  --brand-on-dark: #c8b8ff;
  --brand-soft: color-mix(in srgb, var(--brand-primary) 10%, white);
  --brand-tint: color-mix(in srgb, var(--brand-primary) 3%, white);
  --brand-border: color-mix(in srgb, var(--brand-primary) 22%, white);
  --brand-border-strong: color-mix(in srgb, var(--brand-primary) 40%, white);
  --brand-focus: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --brand-shadow: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --brand-fill: linear-gradient(110deg, #8055e8, #6f47e3 55%, #7650e3);
  --brand-fill-hover: linear-gradient(110deg, #7450d7, #6340cf 55%, #6945d2);
  --brand-ink: #27272b;
  --brand-muted: #6e7079;
  --text-copy: #53555e;
  /* The legal page's reading style, shared by all interface screens. */
  --fw-heading: 550;
  --fw-subheading: 600;
  --fw-display: 600;
  --fw-emphasis: 600;
  --lh-heading: 1.25;
  --lh-subheading: 1.4;
  --lh-copy: 1.75;
  --lh-help: 1.6;
  --heading-tracking: -.025em;
  --space-title-copy: 8px;
  --control-radius: 10px;
  --page-gutter: 24px;
}
@media (max-width: 640px) { :root { --page-gutter: 12px; } }

/* Rounded P artwork in the same soft purple gradient as primary buttons. */
.logomark {
  display: inline-block; width: 26px; height: 26px; flex: none;
  background: var(--brand-mark) center / var(--brand-mark-scale) no-repeat;
}

/* Keep the icon seven percent smaller than the previous 1.35 type ratio. */
:is(.brandwrap, .po-brand):has(> .brand):has(> .logomark) {
  gap: calc(var(--wordmark-size) * .35);
}
:is(.brandwrap, .po-brand):has(> .brand) > .logomark {
  width: calc(var(--wordmark-size) * var(--brand-mark-ratio));
  height: calc(var(--wordmark-size) * var(--brand-mark-ratio));
  border-radius: 0;
}
.a2-top .brandwrap { --wordmark-size: 22px; }
.po-brand { --wordmark-size: 26px; }
.po-brand-card { --wordmark-size: 30px; }
.brandbar .brandwrap { --wordmark-size: 25px; }
.topbar a.brand { gap: .35em; }
.topbar a.brand > .logomark { width: 1.2555em; height: 1.2555em; }
@media (max-width: 700px) { .brandbar .brandwrap { --wordmark-size: 24px; } }
/* A quieter desktop header; phone header dimensions stay unchanged. */
@media (min-width: 761px) {
  .photoora-header .brandwrap { --wordmark-size: 25.76px; }
}