/*
 * JOUD TYPE SYSTEM
 * Oskon is ALWAYS ALL CAPS. Component CSS uses these shared size tokens.
 * This file owns role assignments and loads after the component styles.
 */
:root {
  --font-display: 'Oskon', Georgia, 'Times New Roman', serif;
  --font-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', serif;

  --type-caption: .75rem;    /* 12: supporting metadata, never primary copy */
  --type-small: .875rem;    /* 14: compact controls, labels, secondary copy */
  --type-body: 1rem;        /* 16: body copy, menu names, form inputs */
  --type-lead: 1.125rem;    /* 18: introductory copy */
  --type-card: 1.25rem;     /* 20: card and product titles */
  --type-group: 1.5rem;     /* 24: groups, dialogs, prominent card titles */
  --type-heading: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --type-section: clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);
  --type-page: clamp(2.25rem, 1.75rem + 2vw, 4rem);
  --type-hero: clamp(2.5rem, 1.9rem + 2.5vw, 5rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-display: 1.12;
  --leading-heading: 1.3;
  --leading-ui: 1.45;
  --leading-body: 1.65;
  --tracking-label: .08em;

  /* Compatibility aliases for any retained template content. */
  --serif: var(--font-display);
  --sans: var(--font-ui);
  --mono: var(--font-ui);
}

html { font-size: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
  font-synthesis: none;
}
button, input, select, textarea { font-family: var(--font-ui); }
strong, b { font-weight: var(--weight-semibold); }

/* Headings are useful UI by default. Display typography is opt-in below. */
:is(#siteCoffee, #siteCafe) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-style: normal;
  line-height: var(--leading-heading);
  letter-spacing: -.015em;
  text-transform: none;
  text-wrap: balance;
}
:is(#siteCoffee, #siteCafe) :is(h3, h4) { font-size: var(--type-card); }

/* Oskon is reserved for the two home heroes and editorial page headlines. */
#siteCoffee :is(.hero-h, .sub-hero h1, .gf-hero h1, .cf-hero h1, .st-hero h1, .ws-hero h1),
#siteCafe :is(.chero h1, .rw-copy h1, .gt-hero h1),
#siteCafe #page-catering .ct-intro h1 {
  font-family: var(--font-display);
  font-size: var(--type-page);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
#siteCoffee .hero-h, #siteCafe .chero h1 { font-size: var(--type-hero); }

/* Selected editorial section titles carry the brand into the page. */
#siteCoffee :is(.sec-h, .subband h2, .story h2, .email-sec h2, .phead h2),
#siteCafe .phead h2,
#siteCafe #page-catering .ct-questions h2 {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
#siteCafe :is(#page-menus, #page-locations, #page-events) .phead h2 {
  font-size: var(--type-page);
}

/* Functional titles stay clear, compact and consistent. */
#siteCoffee :is(.plp-hd h1, .pdp-info h1),
#siteCafe .ld-info h1 {
  font-size: var(--type-section);
  line-height: var(--leading-heading);
}
#siteCoffee :is(.qstep h2, .qresult-bd h3),
#siteCafe :is(.mcat-h, .ld-plan h2) {
  font-family: var(--font-ui);
  font-size: var(--type-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: -.015em;
  text-transform: none;
}
#siteCoffee :is(.bridge h3, .corp-strip h3, .quiz-insert h3),
#siteCafe :is(.bridge h3, .rw-banner h3, .rw-dialog h3, .ritual h3) {
  font-size: var(--type-group);
}
#siteCafe :is(.mseries, .loc-soon-h, .rc-h, .ttile b, .loc-row .nm) {
  font-family: var(--font-ui);
  font-size: var(--type-card);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: 0;
  text-transform: none;
}

/* Reading text: normal case, normal spacing, sufficient leading. */
:is(#siteCoffee, #siteCafe) :is(.hero-sub, .chero p, .cf-hero p, .ws-hero p, .gf-hero p, .st-hero .lede, .sub-hero p) {
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  max-width: 58ch;
}
:is(#siteCoffee, #siteCafe) :is(.phead p, .sec-sub, .rev-card p, .seo p, .tl-item p, .principle p, .seg p, .step p, .bridge p, .corp-strip p) {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
:is(#siteCoffee, #siteCafe) :is(.pcard .notes, .pdp-info .tagline, .qresult-bd .notes, .mds, .mhl p, .gcard p, .cafe-body p) {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-style: normal;
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

/* Supporting sans-serif text uses uppercase/tracking only for short editorial eyebrows. */
:is(#siteCoffee, #siteCafe) :is(.kick, .kicker, .eyebrow),
#siteCafe #page-catering :is(.kick, .ct-stepline) {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Navigation, buttons and forms share one voice. */
:is(#siteCoffee, #siteCafe) :is(.btn, .link-arrow, .nav-links a, .chip, .filter-chip, .mt, .fulfil button, .gopts button) {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: none;
}
:is(#siteCoffee, #siteCafe) .btn-lg { font-size: var(--type-body); }
:is(#siteCoffee, #siteCafe) .mmenu nav a {
  font-family: var(--font-ui);
  font-size: var(--type-card);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: 0;
  text-transform: none;
}
#siteCafe .mm-sec a { font-size: var(--type-body); }
:is(#siteCoffee, #siteCafe) :is(.wlabel, .opt-label, .ct-field-label) {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  text-transform: none;
  letter-spacing: 0;
}
:is(#siteCoffee, #siteCafe) :is(input, select, textarea, .winput, .wselect, .wtext, .select) {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: none;
}
:is(#siteCoffee, #siteCafe) :is(.acc summary, .acc2 summary) {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  text-transform: none;
  letter-spacing: 0;
}
:is(#siteCoffee, #siteCafe) .ftr-col h4 {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: none;
}

/* Prices, quantities and comparisons use stable lining/tabular numerals. */
:is(#siteCoffee, #siteCafe) :is(.price, .pr, .pprice, .rit-price, .apr, .cart-total, .qty, .ledger b, .stat b, .rev-score .num, .tiers td b) {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}
#siteCafe .mtop :is(.nm, .pr) { font-size: var(--type-body); line-height: var(--leading-ui); }
#siteCoffee .pcard .price { font-size: var(--type-body); }
#siteCoffee :is(.ledger b, .stat b, .plan .pprice) { font-size: var(--type-heading); }

/* Catering: Oskon introduces the experience; every task uses the UI face. */
#siteCafe #page-catering :is(.ct-step-heading, .ct-package-detail h2) {
  font-family: var(--font-ui);
  font-size: var(--type-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: -.015em;
  text-transform: none;
}
#siteCafe #page-catering :is(h3, h4, .ct-comparison th) {
  font-family: var(--font-ui);
  font-size: var(--type-card);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: -.015em;
  text-transform: none;
}
#siteCafe #page-catering :is(.ct-package h3, .ct-chosen h3) { font-size: var(--type-group); }
#siteCafe #page-catering :is(.ct-intro p, .ct-step-intro) {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
#siteCafe #page-catering :is(.btn, .ct-text-button, .ct-category, .ct-choice, .ct-prog li button, .ct-prog li button span) {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: none;
}
#siteCafe #page-catering .ct-prog .ct-step-number { font-size: var(--type-caption); }
#siteCafe #page-catering :is(.wlabel, .ct-fields label) {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-ui);
  letter-spacing: 0;
  text-transform: none;
}
#siteCafe #page-catering :is(input, select, textarea) {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-ui);
}
#siteCafe #page-catering :is(.ct-summary-empty p, .ct-comparison th) { font-size: var(--type-body); }
#siteCafe #page-catering :is(.ct-package-price b, .ct-detail-price b, .ct-summary-total strong) {
  font-family: var(--font-ui);
  font-size: var(--type-group);
  font-weight: var(--weight-medium);
  line-height: var(--leading-heading);
  font-variant-numeric: lining-nums tabular-nums;
}
#siteCafe #page-catering :is(.ct-sum-row strong, .ct-item-bottom b, .ct-mbar-t b, .ct-guest-number input) {
  font-family: var(--font-ui);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Preserve Arabic language support without changing the supplied wordmarks. */
html[dir=rtl] { --font-display: var(--font-arabic); --font-ui: var(--font-arabic); }

@media (max-width: 600px) {
  #siteCafe #page-catering .ct-prog li button span { font-size: var(--type-caption); }
}