/* ==========================================================================
   The Fascinate -- shared brand layer for BOTH website portals (admin/ and
   customer/). Loaded before each portal's own stylesheet by
   inc/brand_head.php, so a change here reaches every page of both.
   Each portal maps its own variables onto these (admin.css --a-*,
   customer.css --c-*); pages should keep using those portal variables.
   ========================================================================== */
:root {
    /* Type -- webfonts loaded by inc/brand_head.php. */
    --tf-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tf-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --tf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Warm ink + surfaces. Faint ink is the lightest text colour that still
       passes 4.5:1 on white (#948d83 / slate #94a3b8 were ~3.3 / 2.6). */
    --tf-ink: #201c17;
    --tf-ink-soft: #55504a;
    --tf-ink-faint: #7a7268;
    --tf-bg: #faf6f0;
    --tf-bg-alt: #f2e9dc;
    --tf-surface: #ffffff;
    --tf-border: #e7ded0;
    --tf-border-subtle: #f1ebe2;

    /* Gold. Three jobs, three shades:
       --tf-gold        lines, borders, bars, icons, large display text
       --tf-gold-fill   a background with white text on it (4.8:1)
       --tf-gold-text   gold text on a light background (4.9:1) */
    --tf-gold: #b8863b;
    --tf-gold-fill: #946a29;
    --tf-gold-fill-hover: #7f5b22;
    --tf-gold-text: #8f6a2c;
    --tf-gold-tint: #f6ecd9;
    --tf-gold-tint-soft: #fbf6ec;
    --tf-gold-border: #e3cc9f;     /* gold hairline on tinted callouts */
    --tf-gold-deep: #5e4520;       /* dark gold-brown headings on tints */

    /* Corners -- no capsules on controls; 999px only for true circles. */
    --r-xs: 4px;   /* micro indicators */
    --r-sm: 6px;   /* badges, chips, count pills */
    --r-md: 8px;   /* buttons, inputs, selects, segmented strips */
    --r-lg: 12px;  /* cards, panels, drawers, docks */
    --r-full: 9999px;

    /* Button corners -- the one place to change how every customer-portal
       button looks (customer.css routes all its button styles through it;
       the admin panel's buttons follow Theme & Appearance > corners). */
    --r-btn: 9999px;

    /* Keyboard focus ring. */
    --tf-focus: var(--tf-gold-fill);
}

/* Keyboard focus: one visible gold ring everywhere (mouse clicks don't
   trigger :focus-visible on links/buttons, so it only shows when tabbing).
   Text fields keep each portal's own focus border instead. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--tf-focus);
    outline-offset: 2px;
}

/* Codes, tokens, measurement notes, bill/coupon codes. */
.tf-code, .admin-code {
    font-family: var(--tf-font-mono);
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0.3px;
}