/* One Key — component styles. Colors, radii and spacing come from tokens.css. */

body { font-family: var(--font-text); color: var(--ink); background: var(--surface); }

/* Logo */
.ok-logo { display: inline-flex; line-height: 0; }
.ok-logo img { display: block; width: auto; }
.ok-logo-auto .ok-logo-on-dark { display: none; }
[data-theme="dark"] .ok-logo-auto .ok-logo-on-light { display: none; }
[data-theme="dark"] .ok-logo-auto .ok-logo-on-dark { display: block; }

/* Headline plates */
.ok-hl { margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.ok-hl-line { display: flex; flex-wrap: wrap; }
.ok-plate { display: inline-flex; align-items: center; height: var(--plate-height); padding-inline: var(--plate-padding); white-space: nowrap; box-sizing: border-box; }
.ok-plate-pill { border-radius: var(--radius-pill); }
.ok-plate-block { border-radius: var(--radius-0); }
.ok-hl-xl { font-size: 88px; }
.ok-hl-l { font-size: 64px; }
.ok-hl-m { font-size: 44px; }
.ok-hl-s { font-size: 28px; }
.ok-hl-post { font-size: 8.4cqw; }
@media (max-width: 640px) { .ok-hl-xl { font-size: 44px; } .ok-hl-l { font-size: 36px; } .ok-hl-m { font-size: 28px; } }

/* Tones shared by plates and tags */
.ok-tone-ink { background: var(--plate-ink); color: var(--plate-ink-text); }
.ok-tone-black { background: var(--black); color: var(--white); }
.ok-tone-lime { background: var(--lime); color: var(--black); }
.ok-tone-paper { background: var(--white); color: var(--black); }
.ok-tone-ink-lime { background: var(--black); color: var(--lime); }
.ok-tone-green { background: var(--green); color: var(--white); }

/* Icon */
.ok-icon { display: block; flex: none; }

/* Icon badge and icon button: a circle, the round half of the logo */
.ok-badge, .ok-iconbtn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); flex: none; box-sizing: border-box; }
.ok-badge-lime { background: var(--lime); color: var(--black); }
.ok-badge-paper { background: var(--white); color: var(--black); }
.ok-badge-ink { background: var(--plate-ink); color: var(--plate-ink-text); }
.ok-badge-green { background: var(--green); color: var(--lime); }
[data-theme="dark"] .ok-badge-green { background: var(--green-900); }
.ok-iconbtn { border: 0; padding: 0; cursor: pointer; }
.ok-iconbtn.ok-badge-paper { box-shadow: inset 0 0 0 1.5px var(--black); }
.ok-iconbtn:hover { filter: brightness(0.94); }
.ok-iconbtn:focus-visible, .ok-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button: pill, as the plates */
.ok-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-radius: var(--radius-pill); font-family: var(--font-text); font-weight: 400; cursor: pointer; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.ok-btn-m { height: var(--space-12); padding-inline: var(--space-6); font-size: 17px; }
.ok-btn-s { height: 36px; padding-inline: var(--space-4); font-size: 15px; }
.ok-btn-l { height: 60px; padding-inline: var(--space-8); font-size: 20px; }
.ok-btn-primary { background: var(--plate-ink); color: var(--plate-ink-text); }
.ok-btn-accent { background: var(--lime); color: var(--black); }
.ok-btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ok-btn-primary:hover, .ok-btn-accent:hover { filter: brightness(0.92); }
[data-theme="dark"] .ok-btn-primary:hover { filter: brightness(0.9); }
.ok-btn-outline:hover { background: var(--surface-alt); }
.ok-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
[dir="rtl"] .ok-icon-dir { transform: scaleX(-1); }

/* Tag */
.ok-tag { display: inline-flex; align-items: center; height: 28px; padding-inline: var(--space-3); font-size: 14px; line-height: 1; white-space: nowrap; box-sizing: border-box; }

/* Post */
.ok-post { container-type: inline-size; position: relative; box-sizing: border-box; overflow: hidden; background-size: cover; background-position: center; font-family: var(--font-text); }
.ok-post-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 7cqw; box-sizing: border-box; }
.ok-post-green { background-color: var(--green); color: var(--white); }
[data-theme="dark"] .ok-post-green { box-shadow: inset 0 0 0 1px var(--green-700); }
.ok-post-lime { background-color: var(--lime); color: var(--black); }
.ok-post-paper { background-color: var(--white); color: var(--black); box-shadow: inset 0 0 0 1px var(--gray-200); }
.ok-post-photo { background-color: var(--green-100); color: var(--white); }
.ok-post-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; }
.ok-post-tagline { font-size: 3.4cqw; line-height: 1.25; max-width: 32cqw; }
.ok-post-photo .ok-post-tagline { color: var(--black); }
.ok-post-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4cqw; }
.ok-post-text { margin: 0; font-size: 3.2cqw; line-height: 1.45; max-width: 80cqw; }