/* =============================================================================
   WooPay Design Tokens
   -----------------------------------------------------------------------------
   Framework-agnostic CSS custom properties extracted from the WooPay design
   language. Drop this file in first (before component styles) as the foundation
   of the same visual system in another project.

   Naming convention:
     --wpds-<group>-<role>[-<modifier]
     groups: color | radius | space | font | fs | fw | lh | shadow | dur |
             ease | z | bp
   All values are plain CSS. No preprocessor required.

   Theming: override --wpds-color-accent (and optionally its on-color) to
   rebrand. Semantic state colors are intentionally NOT tied to the accent.

   Legacy bridge: the original plugin used --wp-* variables. Aliases at the
   bottom map the old names onto these tokens so existing markup keeps working.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     COLOR — accent + neutrals
     Accent drives all primary UI and is the one value to override per brand.
     ------------------------------------------------------------------------ */
  --wpds-color-accent:        #161616;
  --wpds-color-accent-hover:  #000000; /* border darken target on hover */
  --wpds-color-on-accent:     #ffffff;

  --wpds-color-bg:            #f6f5f2; /* warm page canvas — never pure white */
  --wpds-color-surface:       #ffffff; /* cards */
  --wpds-color-surface-soft:  #f3f3f1; /* timer boxes, soft fills */
  --wpds-color-surface-alt:   #f5f5f5; /* address / inset blocks */
  --wpds-color-surface-muted: #fafaf8; /* subtle hover fill */

  --wpds-color-text:          #161616; /* ink / primary */
  --wpds-color-text-muted:    #7c7b78; /* secondary */
  --wpds-color-text-subtle:   #9b9a96; /* helper / hint */

  --wpds-color-border:        #efeeea; /* default 1px border */
  --wpds-color-border-strong: #e2e1dd; /* button / preview borders */
  --wpds-color-border-hover:  #161616; /* hover border darken */

  /* ---------------------------------------------------------------------------
     COLOR — semantic state (fixed; do not re-theme with accent)
     Each state: base foreground + soft tinted background.
     ------------------------------------------------------------------------ */
  --wpds-color-success:       #1f9d57;
  --wpds-color-success-bg:    #f1f7f2;
  --wpds-color-success-alt:   #1f7a45; /* denser admin variant */

  --wpds-color-warning:       #e0a23b;
  --wpds-color-warning-fg:    #9a6a00; /* readable warning text */
  --wpds-color-warning-bg:    #fdf3da;

  --wpds-color-error:         #b3261e;
  --wpds-color-error-bg:      #fbe6e4;

  --wpds-color-attention:     #e07b00; /* amount-mismatch / attention orange */

  /* ---------------------------------------------------------------------------
     COLOR — scrims (modal + loading overlay)
     ------------------------------------------------------------------------ */
  --wpds-color-scrim-modal:   rgba(20, 20, 20, 0.28);
  --wpds-color-scrim-overlay: rgba(0, 0, 0, 0.45);

  /* ---------------------------------------------------------------------------
     RADIUS — 20px (lg) is the brand signature
     ------------------------------------------------------------------------ */
  --wpds-radius-sm:   6px;   /* admin thumbnails, small chips */
  --wpds-radius-md:   11px;  /* buttons, tabs */
  --wpds-radius-lg:   20px;  /* cards, pills, tiles, QR — signature */
  --wpds-radius-xl:   24px;  /* modals */
  --wpds-radius-full: 9999px;/* dots, round step indicators */

  /* ---------------------------------------------------------------------------
     SPACING — 4px base scale (normalized from the loose in-repo values)
     ------------------------------------------------------------------------ */
  --wpds-space-1:  4px;
  --wpds-space-2:  8px;
  --wpds-space-3:  12px;
  --wpds-space-4:  14px;
  --wpds-space-5:  16px;
  --wpds-space-6:  20px;  /* primary rhythm: card padding, grid gap, stack gap */
  --wpds-space-7:  24px;
  --wpds-space-8:  30px;

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --wpds-font-sans: 'IBM Plex Sans Thai', -apple-system, sans-serif;
  --wpds-font-mono: 'IBM Plex Mono', monospace;

  --wpds-fs-xs:    13px; /* hints, secure line, badges, admin base */
  --wpds-fs-sm:    15px; /* frontend base — body, rows, labels, buttons */
  --wpds-fs-md:    16px; /* card header */
  --wpds-fs-lg:    17px; /* popup title */
  --wpds-fs-stat:  18px; /* admin dashboard number */
  --wpds-fs-timer: 25px; /* countdown digits */
  --wpds-fs-hero:  34px; /* status hero glyph */

  /* Responsive frontend type scale (mobile floor → desktop cap via clamp).
     Mobile floors sized for Thai legibility + touch comfort; grow modestly to
     large screens. Fixed min prevents overflow at 320px; fixed max caps growth.
     Semantic roles — components reference these, never raw px. */
  --wpds-fs-caption: 12px;                                 /* badges, role, progress step, validation */
  --wpds-fs-meta:    clamp(13px,   12.6px + 0.3vw,  13.5px); /* dates, qty, subtitles, carrier, phone */
  --wpds-fs-sm:      clamp(13.5px, 13.1px + 0.3vw,  14px);   /* info rows, tabs, totals, labels, edit */
  --wpds-fs-base:    15px;                                  /* body, buttons, inputs, product name/price */
  --wpds-fs-strong:  clamp(15px,   14.4px + 0.35vw, 16px);  /* order-meta, amount, address name, tracking */
  --wpds-fs-lg:      clamp(17px,   16.4px + 0.35vw, 18px);  /* greeting, order-id, grand-total, modal title */
  --wpds-fs-heading: clamp(16px,   15.4px + 0.35vw, 17px);  /* section headings */
  --wpds-fs-title:   clamp(20px,   17px   + 1.2vw,  24px);  /* page titles */
  --wpds-fs-input:   16px;                                 /* form fields — 16px floor prevents iOS focus-zoom */

  --wpds-fw-medium:   500;
  --wpds-fw-semibold: 600;
  --wpds-fw-bold:     700;

  --wpds-lh-tight:  1.25;
  --wpds-lh-normal: 1.5;
  --wpds-lh-relaxed:1.6;

  /* Tabular numerals for money, timers, account numbers */
  --wpds-numeric: tabular-nums;

  /* ---------------------------------------------------------------------------
     SHADOW — used sparingly; borders do most separation work
     ------------------------------------------------------------------------ */
  --wpds-shadow-btn:   0 4px 12px rgba(22, 22, 22, 0.15);
  --wpds-shadow-thumb: 0 2px 8px rgba(0, 0, 0, 0.15);
  --wpds-shadow-modal: 0 24px 70px rgba(20, 20, 20, 0.22),
                       0 2px 8px rgba(20, 20, 20, 0.06);

  /* ---------------------------------------------------------------------------
     BLUR — backdrop / overlay glass
     ------------------------------------------------------------------------ */
  --wpds-blur-backdrop: 6px;
  --wpds-blur-overlay:  4px;

  /* ---------------------------------------------------------------------------
     OPACITY
     ------------------------------------------------------------------------ */
  --wpds-opacity-disabled: 0.6;
  --wpds-opacity-loading:  0.8;
  --wpds-opacity-hover:    0.9;

  /* ---------------------------------------------------------------------------
     MOTION — durations + easings
     ------------------------------------------------------------------------ */
  --wpds-dur-fast:  0.15s; /* hover, tab/copy micro-interactions */
  --wpds-dur-base:  0.2s;  /* cards, dropzone */
  --wpds-dur-enter: 0.4s;  /* fade-up entrances (0.3–0.5s range) */
  --wpds-dur-spin:  0.8s;  /* spinners */

  --wpds-ease-out:       ease-out;
  --wpds-ease-spring:    cubic-bezier(0.22, 1, 0.36, 1);   /* popup entrance */
  --wpds-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);/* icon bounce */

  /* Auto-dismiss durations for transient popups */
  --wpds-dur-dismiss-success: 2s;
  --wpds-dur-dismiss-warning: 3s;

  /* ---------------------------------------------------------------------------
     Z-INDEX
     ------------------------------------------------------------------------ */
  --wpds-z-overlay: 9999;  /* loading overlay, modal backdrop */
  --wpds-z-popup:   10000; /* popup above its backdrop */

  /* ---------------------------------------------------------------------------
     BREAKPOINTS
     Custom properties can't be used in media queries; kept here as the single
     source of truth. Mirror these literals in @media rules.
       --wpds-bp-tablet : 1024px  (two-col grid -> single column)
       --wpds-bp-mobile : 600px   (stack tabs, hide secondary icons)
     ------------------------------------------------------------------------ */
  --wpds-bp-tablet: 1024px;
  --wpds-bp-mobile: 600px;
}

/* -----------------------------------------------------------------------------
   MOTION SAFETY
   Respect reduced-motion preference — disable non-essential animation.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wpds-dur-fast:  0.01ms;
    --wpds-dur-base:  0.01ms;
    --wpds-dur-enter: 0.01ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   LEGACY ALIASES
   Map the original plugin's --wp-* variables onto the new token set so existing
   markup (.woopay, .wp-*) keeps rendering unchanged. Remove once components are
   migrated to --wpds-* names.
   ========================================================================== */
.woopay,
:root {
  --wp-accent:  var(--wpds-color-accent);
  --wp-text:    var(--wpds-color-on-accent);
  --wp-soft:    var(--wpds-color-surface-soft);
  --wp-border:  var(--wpds-color-border);
  --wp-muted:   var(--wpds-color-text-muted);
  --wp-bg:      var(--wpds-color-bg);
  --wp-success: var(--wpds-color-success);
  --wp-error:   var(--wpds-color-error);
  --wp-radius:  var(--wpds-radius-lg);
}