/* assets/css/ld-brand.css
 * LoyaltyDog brand tokens — single source of truth.
 * @import this file at the top of every plugin CSS file.
 *
 * Font files are vendored at assets/vendor/fonts/ and enqueued via
 * class-plugin.php::enqueue_admin_assets (loyaltydog-fonts handle
 * referencing assets/vendor/fonts/fonts.css). This file only declares
 * the CSS variables that reference them. See
 * tests/unit/assets/test-no-external-cdn.php for the regression guard
 * that prevents CDN re-introduction.
 */

:root {
  /* COLOR */
  --ld-blue:          #0170B9;
  --ld-blue-hover:    #015d99;
  --ld-blue-active:   #014a7d;
  --ld-blue-subtle:   #e6f2fa;
  --ld-blue-border:   #b3dcf0;
  /* RGB triplet for composing rgba() shadows/glows at arbitrary alpha.
     Must stay in sync with --ld-blue. */
  --ld-blue-rgb:      1, 112, 185;

  --ld-charcoal:      #3a3a3a;
  --ld-charcoal-mid:  #4B4F58;
  --ld-text:          #3a3a3a;
  --ld-text-muted:    #707580;
  --ld-text-inverse:  #ffffff;
  /* --ld-text-on-brand stays white across color schemes. Use this for text
     that sits on brand-colored surfaces (--ld-blue, --ld-coral, --ld-success,
     etc.) so a dark-mode flip of --ld-text-inverse does not collapse button
     contrast to <4.5:1. */
  --ld-text-on-brand: #ffffff;

  --ld-surface:       #ffffff;
  --ld-surface-alt:   #F5F5F5;
  --ld-surface-sunken:#EEEEEE;
  --ld-border:        #E5E5E5;
  --ld-border-strong: #cfcfcf;

  --ld-coral:         #d63637;
  --ld-coral-hover:   #b82d2e;

  --ld-success:       #1a7f4b;
  --ld-success-bg:    #edfaf3;
  --ld-warning:       #b45309;
  --ld-warning-bg:    #fffbeb;
  --ld-error:         #c0392b;
  --ld-error-bg:      #fef1ef;
  --ld-info:          #0170B9;
  --ld-info-bg:       #e6f2fa;

  /* TYPE */
  --ld-font-display:  'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ld-font-body:     'Poppins', system-ui, -apple-system, sans-serif;
  --ld-font-mono:     ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

  --ld-fs-xs:    0.75rem;
  --ld-fs-sm:    0.875rem;
  --ld-fs-base:  1rem;
  --ld-fs-lg:    1.125rem;
  --ld-fs-xl:    1.25rem;
  --ld-fs-2xl:   1.5rem;
  --ld-fs-3xl:   2rem;
  --ld-fs-4xl:   2.5rem;
  --ld-fs-5xl:   3rem;

  --ld-fw-regular:  400;
  --ld-fw-medium:   500;
  --ld-fw-semibold: 600;
  --ld-fw-bold:     700;
  --ld-fw-display:  800;

  --ld-lh-tight:  1.2;
  --ld-lh-snug:   1.35;
  --ld-lh-normal: 1.55;
  --ld-lh-loose:  1.7;

  /* SPACING (4-px base) */
  --ld-space-0:   0;
  --ld-space-1:   4px;
  --ld-space-2:   8px;
  --ld-space-3:  12px;
  --ld-space-4:  16px;
  --ld-space-5:  20px;
  --ld-space-6:  24px;
  --ld-space-8:  32px;
  --ld-space-10: 40px;
  --ld-space-12: 48px;
  --ld-space-16: 64px;
  --ld-space-20: 80px;

  /* RADIUS */
  --ld-radius-xs:    2px;
  --ld-radius-sm:    4px;
  --ld-radius:       8px;
  --ld-radius-md:   12px;
  --ld-radius-lg:   16px;
  --ld-radius-xl:   24px;
  --ld-radius-pill: 999px;

  /* ELEVATION */
  --ld-shadow-xs:  0 1px 1px rgba(15, 23, 42, .04);
  --ld-shadow-sm:  0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --ld-shadow:     0 4px 16px rgba(var(--ld-blue-rgb), .10), 0 1px 3px rgba(15, 23, 42, .06);
  --ld-shadow-md:  0 8px 24px rgba(var(--ld-blue-rgb), .12), 0 2px 6px rgba(15, 23, 42, .08);
  --ld-shadow-lg:  0 16px 48px rgba(var(--ld-blue-rgb), .15), 0 4px 12px rgba(15, 23, 42, .10);

  /* FOCUS RING (WCAG 2.4.11) */
  --ld-focus:       #0170B9;
  --ld-focus-ring:  0 0 0 3px rgba(var(--ld-blue-rgb), .35);

  /* MOTION */
  --ld-ease:           cubic-bezier(.4, 0, .2, 1);
  --ld-ease-out:       cubic-bezier(0, 0, .2, 1);
  --ld-duration-fast:  150ms;
  --ld-duration:       250ms;
  --ld-duration-slow:  400ms;

  /* LAYOUT */
  --ld-container-sm:  640px;
  --ld-container-md:  768px;
  --ld-container-lg: 1024px;
  --ld-container-xl: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ld-surface:        #12171c;
    --ld-surface-alt:    #1a2029;
    --ld-surface-sunken: #0c1116;
    --ld-text:           #e5e7eb;
    --ld-text-muted:     #9aa3ad;
    --ld-text-inverse:   #0c1116;
    --ld-border:         #2a323d;
    --ld-border-strong:  #3a4452;
    --ld-blue-subtle:    #0b2a3f;
    --ld-blue-border:    #115579;
    --ld-success-bg:     #0f2a1d;
    --ld-warning-bg:     #2a1f0c;
    --ld-error-bg:       #2a1311;
    --ld-info-bg:        #0b2a3f;
    /* Dark-mode foreground variants for status surfaces. The base
       --ld-success / --ld-error tokens stay at their light-mode
       values and would fall below WCAG AA on the dark -bg tokens
       above (~3.2:1). These lifted variants pair with the -bg values
       at ≥7:1 (AAA) and are consumed by .ld-status-pill. */
    --ld-success-fg-dark: #4ade80;
    --ld-error-fg-dark:   #f87171;
    --ld-shadow-sm:      0 1px 2px rgba(0,0,0,.6);
    --ld-shadow:         0 4px 16px rgba(0,0,0,.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ld-duration-fast: 0ms;
    --ld-duration:      0ms;
    --ld-duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Focus-visible baseline — WCAG 2.4.11 (Sprint 2 Task 5)
   --------------------------------------------------------------------------
   Mouse focus is quiet; keyboard focus always renders a visible outline.
   The outline is preserved even on form controls and buttons (contrary to
   the "outline: none; box-shadow only" pattern) because box-shadow is
   suppressed in Windows High Contrast / forced-colors mode — leaving
   keyboard users with no indicator. Seer flagged this class of regression
   on PR #53; the baseline here is the one defensible shape.
   ========================================================================== */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px solid var(--ld-focus);
  outline-offset: 2px;
  border-radius: var(--ld-radius-sm);
}
/* Form controls and branded buttons additionally render the brand focus
   ring as a soft halo — outline stays put so forced-colors users see
   it even when box-shadow is suppressed. */
.button:focus-visible,
.button-primary:focus-visible,
.ld-btn:focus-visible,
.ld-btn-primary:focus-visible,
button[type="submit"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: var(--ld-focus-ring);
}

@media (forced-colors: active) {
  *:focus-visible {
    outline: 2px solid CanvasText;
  }
}