/* ────────────────────────────────────────────────────────────────
   ARABOO LMS — DESIGN TOKENS
   ────────────────────────────────────────────────────────────────

   Single source of truth for the platform's palette, typography,
   radii, and shadows. Loaded ahead of every other plugin
   stylesheet so cascading rules can reference these custom
   properties without falling back to hard-coded hex values.

   PALETTE — "Soft, friendly, rounded, welcoming" (May 2026).
   Teal-deep ink + vibrant teal primary + warm earthy accents.
   Each token is tiered: --foo-XXX where XXX rises with intensity.

   - --ink-*          dark on light: text + headings
   - --teal-*         primary brand family
   - --sage-*         soft surfaces + hairlines
   - --accent-*       semantic accents (coral / burnt / green / amber)
   - --surface-*      page backgrounds (white / warm cream / muted)
   - --radius-*       rounded-corner scale
   - --shadow-*       elevation scale
   - --font-*         family registry

   Migration is opportunistic: existing rules keep their hard-coded
   colours until touched. Every NEW rule should reference these
   tokens. When a surface gets re-tinted, swap the hex literals
   to var(--token) in the same pass.
   ──────────────────────────────────────────────────────────────── */

:root {
    /* ── Ink (text on light) ───────────────────────── */
    --ink-deep:        #16363B;   /* primary heading / ink */
    --ink:             #355157;   /* body text */
    --ink-soft:        #5E7A7E;   /* secondary text */
    --ink-muted:       #8AA2A4;   /* tertiary / hairlines / placeholder */

    /* ── Teal family (primary brand) ───────────────── */
    --teal-primary:    #1F9F94;   /* primary CTAs, links, brand glyph — softened May 2026 (was #118C84) */
    --teal-deep:       #16363B;   /* same value as --ink-deep — semantic alias */
    --teal-soft:       #67BFBA;   /* hover lift on primary — soft enough to keep ink-deep text legible */

    /* ── Buttons (May 2026 — sage green, not brand teal) ───
       Buttons used to inherit the brand `--teal-primary` paint from
       Funcare's catch-all submit/button rule. Switching to a sage
       green palette per design preference — brand teal stays for
       glyphs, links and accent surfaces; buttons get their own
       family so a future palette nudge to one doesn't move the
       other. */
    --btn-bg:          #7CAE7C;   /* default rectangular CTA */
    --btn-bg-hover:    #62A062;   /* darker sage on hover/press */
    --teal-tint:       #E0EAE9;   /* alias of --sage-pale — soft surface tier */

    /* ── Sage / neutrals ───────────────────────────── */
    --sage-pale:       #E0EAE9;   /* card surface, chip background */
    --sage-line:       #C2D2D1;   /* visible hairline on light surfaces */
    --hairline:        #8AA2A4;   /* divider on coloured surfaces */

    /* ── Accents (warm / semantic) ─────────────────── */
    --accent-coral:    #E97A4F;   /* secondary accent, warm anchor */
    --accent-burnt:    #C65A30;   /* deeper accent, "book / scholarship" */
    --accent-green:    #2E9E6B;   /* success, mastery, positive */
    --accent-amber:    #F2B33D;   /* highlight, warning, "Today" */

    /* ── Surfaces ──────────────────────────────────── */
    --surface:         #FFFFFF;   /* pure white card — page default */
    --surface-mint:    #EDF7F6;   /* very pale mint — section zoning */
    --surface-sage:    #E0EAE9;   /* deeper sage — softer surface */
    --surface-warm:    #FDF8EE;   /* cream — opt-in (scholarly course landing) */
    --surface-ink:     #16363B;   /* dark hero / footer slab */

    /* ── State / status ────────────────────────────── */
    --status-ok:       var(--accent-green);
    --status-warn:     var(--accent-amber);
    --status-info:     var(--teal-primary);
    --status-danger:   #B91C1C;   /* kept from existing palette */

    /* ── Radii (rounded → welcoming) ───────────────── */
    --radius-xs:        4px;
    --radius-sm:        8px;
    --radius-md:       14px;
    --radius-lg:       22px;
    --radius-pill:    999px;

    /* ── Shadows (soft) ────────────────────────────── */
    --shadow-xs:       0 1px 2px rgba(22, 54, 59, 0.06);
    --shadow-sm:       0 2px 6px rgba(22, 54, 59, 0.08);
    --shadow-md:       0 6px 18px rgba(22, 54, 59, 0.10);
    --shadow-lg:       0 14px 40px rgba(22, 54, 59, 0.14);
    --shadow-inset:    inset 0 0 0 1px var(--sage-line);

    /* ── Typography (existing project canon) ───────── */
    --font-chrome:     'Poppins', 'Nunito', system-ui, -apple-system, sans-serif;
    --font-body:       'Nunito', system-ui, -apple-system, sans-serif;
    --font-arabic:     'Noto Sans Arabic', 'Cairo', sans-serif;
    --font-arabic-display: 'Amiri', 'Noto Naskh Arabic', serif;
    --font-mono:       'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* ── Motion ────────────────────────────────────── */
    --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast:   140ms;
    --duration-base:   220ms;
    --duration-slow:   360ms;
}

/* RTL ergonomics — Arabic text on a teal-deep background reads
   crisper with a hair more weight; bump the body weight inside
   .araboo-arabic surfaces so the script doesn't get lost. The
   font-family swap already happens elsewhere; this just nudges
   the rendering balance. */
.araboo-arabic,
[dir="rtl"] {
    --weight-arabic-bump: 1;
}

/* ────────────────────────────────────────────────────────────────
   SEARCH BOX CHROME RESET
   ────────────────────────────────────────────────────────────────

   Three places ship a search form on this site:

     • `.search-form`        — WordPress's default search widget
     • `.wp-block-search`    — Gutenberg search block
     • `.search-box`         — wp-admin list-table search (Activities,
                               Users, Comments — sits at the top right
                               of every CPT list view)

   On the front-end the Funcare theme paints every `input[type="submit"]`
   as a fully-rounded teal pill with `padding:11px 22px`, which towers
   over the small adjacent input and crops weirdly in narrow header
   strips. On wp-admin the standard `<input type="submit" class="button">`
   sometimes picks up that same paint via a third-party admin colour
   plugin. Same symptom, two surfaces — fix once in tokens (loads on
   both contexts via `wp_enqueue_style('araboo-tokens')`).

   Rule wins the cascade thanks to compound specificity
   (.search-box input[type=submit] = 0,2,1 beats input[type=submit] =
   0,0,1 even when both carry `!important`).
   ──────────────────────────────────────────────────────────────── */
.search-form input[type="search"],
.search-form input[type="text"],
.wp-block-search input[type="search"],
.wp-block-search input[type="text"],
.search-box     input[type="search"],
.search-box     input[type="text"] {
    min-width: 280px !important;
    height: 34px !important;
    padding: 4px 12px !important;
    font-size: .9rem !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.search-form input[type="submit"],
.search-form button[type="submit"],
.wp-block-search input[type="submit"],
.wp-block-search button[type="submit"],
.wp-block-search button.wp-block-search__button,
.search-box     input[type="submit"],
.search-box     button[type="submit"],
.search-box     #search-submit {
    height: 34px !important;
    padding: 0 16px !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.search-form,
.wp-block-search,
.search-box {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}