/*
Theme Name: Darbonline
Theme URI: https://darbonline.com/
Author: Darbonline
Description: Native WordPress block theme for Darbonline marketplace.
Version: 0.1.0
Requires at least: 7.1
Text Domain: darbonline
*/

/* =========================================================
   DARBONLINE — DESIGN SYSTEM FOUNDATION
   Phase 3 frozen foundations
   ========================================================= */

:root {
/* Neutral */
--db-color-page: #F7F7F5;
--db-color-surface: #FFFFFF;
--db-color-surface-subtle: #F1F2F0;
--db-color-ink: #1B1E1C;
--db-color-muted: #656A66;
--db-color-disabled: #A5AAA6;
--db-color-border: #D8DCDA;
--db-color-border-strong: #858E88;

/* Brand */
--db-color-brand: #2B4654;

/* Accent / action */
--db-color-accent: #B95127;
--db-color-accent-hover: #A24520;
--db-color-accent-pressed: #8A3919;

/* Semantic */
--db-color-success: #22774F;
--db-color-error: #A12B35;
--db-color-warning: #8A5A00;
--db-color-info: #2B4654;

/* Spacing */
--db-space-1: 4px;
--db-space-2: 8px;
--db-space-3: 12px;
--db-space-4: 16px;
--db-space-5: 20px;
--db-space-6: 24px;
--db-space-8: 32px;
--db-space-10: 40px;
--db-space-12: 48px;
--db-space-16: 64px;

/* Geometry */
--db-container-wide: 1280px;
--db-container-content: 1120px;
--db-form-max: 720px;
--db-mobile-gutter: 20px;

--db-radius-sm: 4px;
--db-radius-md: 8px;
--db-radius-lg: 12px;
--db-radius-xl: 16px;
--db-radius-full: 9999px;

--db-control-sm: 36px;
--db-control-md: 44px;
--db-control-lg: 48px;
--db-touch-min: 44px;

--db-icon-sm: 16px;
--db-icon-md: 20px;
--db-icon-lg: 24px;

/* Typography */
--db-type-display: clamp(36px, calc(29.59px + 1.644vw), 48px);
--db-type-h1: 30px;
--db-type-h2: 24px;
--db-type-h3: 20px;
--db-type-h4: 18px;
--db-type-body-lg: 17px;
--db-type-body: 16px;
--db-type-body-sm: 14px;
--db-type-label: 14px;
--db-type-caption: 13px;
--db-type-data-lg: 18px;
--db-type-data: 15px;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
background: var(--db-color-page);
color: var(--db-color-ink);
font-family: "Estedad", sans-serif;
font-size: var(--db-type-body);
line-height: 1.75;
}

img,
svg,
video {
max-width: 100%;
height: auto;
}

a {
color: var(--db-color-brand);
text-underline-offset: 0.18em;
}

a:hover {
text-decoration-thickness: 2px;
}

:focus-visible {
outline: 2px solid var(--db-color-brand);
outline-offset: 2px;
}

.wp-element-button,
.wp-block-button__link {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: 24px;
border: 0;
border-radius: var(--db-radius-md);
background: var(--db-color-accent);
color: #FFFFFF;
font-family: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
cursor: pointer;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
background: var(--db-color-accent-hover);
color: #FFFFFF;
}

.wp-element-button:active,
.wp-block-button__link:active {
background: var(--db-color-accent-pressed);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.wp-element-button[aria-disabled="true"] {
background: var(--db-color-surface-subtle);
color: var(--db-color-disabled);
border-color: var(--db-color-border);
cursor: not-allowed;
}

input,
select,
textarea {
max-width: 100%;
border: 1px solid var(--db-color-border-strong);
border-radius: var(--db-radius-md);
background: var(--db-color-surface);
color: var(--db-color-ink);
font: inherit;
font-size: 16px;
}

input,
select {
min-height: var(--db-control-md);
}

textarea {
min-height: 120px;
}

.db-container-wide,
.db-container-content {
width: calc(100% - (2 * var(--db-mobile-gutter)));
margin-inline: auto;
}

.db-container-wide {
max-width: var(--db-container-wide);
}

.db-container-content {
max-width: var(--db-container-content);
}

.db-form-column {
width: 100%;
max-width: var(--db-form-max);
}

.db-prose {
max-width: 600px;
}

.db-surface {
background: var(--db-color-surface);
border: 1px solid var(--db-color-border);
border-radius: var(--db-radius-lg);
}

/* Accent is action, never status/data/merchandising.
   Maximum two filled accent actions in one viewport. */

@media (min-width: 1120px) {
:root {
--db-type-h1: 36px;
--db-type-h2: 28px;
--db-type-h3: 22px;
--db-type-body-lg: 18px;
--db-type-data-lg: 20px;
}
}

/* Phase 3 QA: apply frozen measures to the native block foundation. */
.db-surface { padding: var(--db-space-6); }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: var(--db-touch-min);
  min-height: var(--db-touch-min);
  align-items: center;
  justify-content: center;
}
.has-display-font-size { font-weight: 700; line-height: 1.25; }
.has-h1-font-size { font-weight: 700; line-height: 1.35; }
.has-h2-font-size { font-weight: 700; line-height: 1.4; }
.has-h3-font-size { font-weight: 600; line-height: 1.45; }
.has-h4-font-size { font-weight: 600; line-height: 1.5; }
.has-body-lg-font-size, .has-body-font-size { font-weight: 400; line-height: 1.75; }
.has-body-sm-font-size { font-weight: 400; line-height: 1.7; }
.has-label-font-size { font-weight: 600; line-height: 1.5; }
.has-caption-font-size { font-weight: 500; line-height: 1.6; }
.has-data-lg-font-size { font-weight: 700; line-height: 1.4; }
.has-data-font-size { font-weight: 500; line-height: 1.5; }
@media (max-width: 767px) {
  .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}