/* ============================================================
   CREET DESIGN SYSTEM — BASE
   ------------------------------------------------------------
   Baseline that every admin page inherits: typography, focus
   rings, scrollbar styling, theming for native WP form
   controls so unstyled forms still feel like part of the
   design system without per-plugin overrides.
   ============================================================ */

/* ── Typography baseline ────────────────────────────────────
   Note: scoped to body so the WP login page (which doesn't have
   .creet-* classes anywhere but does have the admin skin loaded)
   gets the new fonts too.                                    */
body {
    font-family: var(--cds-font-body);
    font-size:   var(--cds-text-base);
    line-height: var(--cds-leading-normal);
    color:       var(--cds-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--cds-bg-page);
}

/* Theme-flip lag killer.
   The dark-mode toggle adds .creet-theme-switching for ~1 frame before
   removing it. While present, NO element transitions any property — so
   the theme flip is instant instead of a 1–2 second wave across the
   hundreds of elements that have transition:all on them.            */
body.creet-theme-switching,
body.creet-theme-switching *,
body.creet-theme-switching *::before,
body.creet-theme-switching *::after {
    transition: none !important;
    animation-duration: 0s !important;
}

/* WP admin page wrap — give it some breathing room and remove the
   ad-hoc 20px margin-left WP injects.                         */
#wpbody-content > .wrap,
#wpbody-content .wrap {
    margin-top: 0;
}

/* Heading scale — used when no explicit .cds-* class is set. */
.wrap h1,
.wrap h2,
.wrap h3 {
    font-family: var(--cds-font-display);
    color: var(--cds-text);
    letter-spacing: var(--cds-tracking-tight);
}
.wrap h1 { font-size: var(--cds-text-3xl); font-weight: var(--cds-weight-bold);     line-height: var(--cds-leading-tight); }
.wrap h2 { font-size: var(--cds-text-2xl); font-weight: var(--cds-weight-semibold); line-height: var(--cds-leading-tight); }
.wrap h3 { font-size: var(--cds-text-xl);  font-weight: var(--cds-weight-semibold); line-height: var(--cds-leading-snug); }

/* Paragraphs */
.wrap p { color: var(--cds-text-muted); line-height: var(--cds-leading-relaxed); }

/* Links inside content (NOT global — WP toolbar etc. handled separately) */
#wpbody-content a:not(.button):not(.cds-btn):not([class*="creet-"]) {
    color: var(--cds-link);
    text-decoration: none;
    transition: color var(--cds-duration-fast) var(--cds-ease);
}
#wpbody-content a:not(.button):not(.cds-btn):not([class*="creet-"]):hover {
    color: var(--cds-link-hover);
}

/* ── Focus rings (accessibility) ────────────────────────────
   Replace WP's blue 2px outline with the brand lime ring on
   keyboard focus. Mouse clicks don't show the ring (:focus-visible). */
*:focus-visible {
    outline: none;
    box-shadow: var(--cds-shadow-focus);
    border-radius: var(--cds-radius-sm);
}
button:focus-visible,
.button:focus-visible,
.cds-btn:focus-visible,
a:focus-visible {
    box-shadow: var(--cds-shadow-focus);
}

/* ── Scrollbar theming ──────────────────────────────────────
   Subtle, on-brand. Falls back gracefully on browsers that
   don't support these properties.                            */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cds-border-strong) transparent;
}
*::-webkit-scrollbar       { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--cds-border-strong);
    border-radius: var(--cds-radius-pill);
    border: 2px solid var(--cds-bg-page);
}
*::-webkit-scrollbar-thumb:hover { background: var(--cds-text-subtle); }

/* ── Selection highlight ────────────────────────────────────
   Brand lime selection — same in light/dark for brand consistency. */
::selection {
    background: var(--cds-brand-soft-strong);
    color: var(--cds-text);
}

/* ── Native WP form controls — make them feel native to the
   design system WITHOUT requiring every plugin to add classes.
   Scoped to #wpbody so the WP toolbar / login don't get hit twice. */
#wpbody-content input[type="text"],
#wpbody-content input[type="email"],
#wpbody-content input[type="password"],
#wpbody-content input[type="search"],
#wpbody-content input[type="number"],
#wpbody-content input[type="tel"],
#wpbody-content input[type="url"],
#wpbody-content input[type="date"],
#wpbody-content input[type="datetime-local"],
#wpbody-content input[type="month"],
#wpbody-content input[type="time"],
#wpbody-content input[type="week"],
#wpbody-content select,
#wpbody-content textarea {
    height: var(--cds-input-height);
    padding: 0 var(--cds-space-3);
    background: var(--cds-bg-surface);
    border: 1px solid var(--cds-border);
    border-radius: var(--cds-radius-md);
    color: var(--cds-text);
    font-family: var(--cds-font-body);
    font-size: var(--cds-text-md);
    line-height: var(--cds-leading-normal);
    transition: border-color var(--cds-duration-fast) var(--cds-ease),
                box-shadow   var(--cds-duration-fast) var(--cds-ease),
                background   var(--cds-duration-fast) var(--cds-ease);
    box-shadow: none;
}

#wpbody-content textarea {
    height: auto;
    min-height: 96px;
    padding: var(--cds-space-3);
    line-height: var(--cds-leading-normal);
}

#wpbody-content select {
    padding-inline-end: var(--cds-space-8);
    background-image: linear-gradient(45deg, transparent 50%, var(--cds-text-muted) 50%),
                      linear-gradient(135deg, var(--cds-text-muted) 50%, transparent 50%);
    background-position: right 14px top 55%, right 9px top 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
}
html[dir="rtl"] #wpbody-content select {
    background-position: left 14px top 55%, left 9px top 55%;
    padding-inline-end: var(--cds-space-3);
    padding-inline-start: var(--cds-space-8);
}

#wpbody-content input[type="text"]:hover,
#wpbody-content input[type="email"]:hover,
#wpbody-content input[type="password"]:hover,
#wpbody-content input[type="search"]:hover,
#wpbody-content input[type="number"]:hover,
#wpbody-content input[type="tel"]:hover,
#wpbody-content input[type="url"]:hover,
#wpbody-content select:hover,
#wpbody-content textarea:hover {
    border-color: var(--cds-border-strong);
}

#wpbody-content input[type="text"]:focus,
#wpbody-content input[type="email"]:focus,
#wpbody-content input[type="password"]:focus,
#wpbody-content input[type="search"]:focus,
#wpbody-content input[type="number"]:focus,
#wpbody-content input[type="tel"]:focus,
#wpbody-content input[type="url"]:focus,
#wpbody-content input[type="date"]:focus,
#wpbody-content select:focus,
#wpbody-content textarea:focus {
    outline: none;
    border-color: var(--cds-brand-bold);
    box-shadow: var(--cds-shadow-focus);
}

#wpbody-content input[disabled],
#wpbody-content select[disabled],
#wpbody-content textarea[disabled] {
    background: var(--cds-bg-surface-2);
    color: var(--cds-text-disabled);
    cursor: not-allowed;
}

#wpbody-content input::placeholder,
#wpbody-content textarea::placeholder {
    color: var(--cds-text-subtle);
}

/* Checkboxes + radios — kill WP's gray bubble look.
   Position:relative + absolute-center on ::before so the indicator is
   perfectly centered regardless of border/padding math.            */
#wpbody-content input[type="checkbox"],
#wpbody-content input[type="radio"] {
    position: relative;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--cds-border-strong);
    background: var(--cds-bg-surface);
    cursor: pointer;
    transition: all var(--cds-duration-fast) var(--cds-ease);
    margin: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
#wpbody-content input[type="checkbox"] { border-radius: var(--cds-radius-xs); }
#wpbody-content input[type="radio"]    { border-radius: var(--cds-radius-pill); }
#wpbody-content input[type="checkbox"]:hover,
#wpbody-content input[type="radio"]:hover { border-color: var(--cds-brand-bold); }
#wpbody-content input[type="checkbox"]:checked,
#wpbody-content input[type="radio"]:checked {
    background-color: var(--cds-brand);
    border-color: var(--cds-brand-bold);
}
#wpbody-content input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 5px;
    height: 9px;
    margin: auto;
    transform: translateY(-1px) rotate(45deg);
    border: solid var(--cds-text-on-brand);
    border-width: 0 2px 2px 0;
}
#wpbody-content input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 8px;
    height: 8px;
    margin: auto;
    background: var(--cds-text-on-brand);
    border-radius: var(--cds-radius-pill);
}

/* WP's native .button class — soft adopt so non-migrated pages
   look on-brand without changing their markup. Pages that want
   full control should switch to .cds-btn explicitly.          */
#wpbody-content .button,
#wpbody-content .button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cds-space-2);
    background: var(--cds-bg-surface);
    border: 1px solid var(--cds-border);
    border-radius: var(--cds-radius-md);
    color: var(--cds-text);
    font-family: var(--cds-font-body);
    font-weight: var(--cds-weight-medium);
    min-height: var(--cds-btn-height);
    padding: 0 var(--cds-space-4);
    line-height: var(--cds-leading-tight);
    transition: all var(--cds-duration-fast) var(--cds-ease);
    box-shadow: var(--cds-shadow-xs);
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
}
#wpbody-content .button:hover,
#wpbody-content .button-secondary:hover {
    border-color: var(--cds-border-strong);
    background: var(--cds-bg-surface-2);
    color: var(--cds-text);
}
#wpbody-content .button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cds-space-2);
    background: var(--cds-brand);
    border: 1px solid var(--cds-brand-bold);
    color: var(--cds-text-on-brand);
    font-weight: var(--cds-weight-semibold);
    min-height: var(--cds-btn-height);
    padding: 0 var(--cds-space-4);
    line-height: var(--cds-leading-tight);
    border-radius: var(--cds-radius-md);
    box-shadow: var(--cds-shadow-brand);
    cursor: pointer;
    transition: all var(--cds-duration-fast) var(--cds-ease);
    text-decoration: none;
    vertical-align: middle;
}
#wpbody-content .button-primary:hover {
    background: var(--cds-brand-bold);
    color: var(--cds-text-on-brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(195, 253, 115, 0.45);
}
#wpbody-content .button-primary:active { transform: translateY(0); }

/* WP form-table — used by core settings screens. Tone it down. */
#wpbody-content .form-table th {
    color: var(--cds-text);
    font-weight: var(--cds-weight-semibold);
    padding: var(--cds-space-4) var(--cds-space-3) var(--cds-space-4) 0;
}
#wpbody-content .form-table td {
    padding: var(--cds-space-4) var(--cds-space-3);
}
#wpbody-content .form-table .description {
    color: var(--cds-text-muted);
    font-size: var(--cds-text-sm);
    margin-top: var(--cds-space-1);
}

/* WP notices — colour them via tokens so they fit the dark theme too. */
#wpbody-content .notice,
#wpbody-content div.updated,
#wpbody-content div.error {
    background: var(--cds-bg-surface);
    border: 1px solid var(--cds-border);
    border-inline-start-width: 4px;
    border-radius: var(--cds-radius-md);
    box-shadow: var(--cds-shadow-sm);
    padding: var(--cds-space-3) var(--cds-space-4);
    color: var(--cds-text);
}
#wpbody-content .notice-success { border-inline-start-color: var(--cds-success); }
#wpbody-content .notice-warning { border-inline-start-color: var(--cds-warning); }
#wpbody-content .notice-error,
#wpbody-content div.error       { border-inline-start-color: var(--cds-danger); }
#wpbody-content .notice-info    { border-inline-start-color: var(--cds-info); }
#wpbody-content .notice p { color: var(--cds-text); }