/* ==========================================================================
   EpPay design tokens — single source of truth for the web app's visual style.
   Matches the EpPay mobile app: warm cream background, near-black text,
   orange accent, white rounded cards with soft shadows, black pill buttons.

   Consumed by BOTH CSS stacks so nothing drifts:
   - Bootstrap/guest pages alias their legacy --primary/--accent vars to these.
   - Tailwind (app + docs) registers colors as var(--eppay-*) in its config.
   Change a colour here and it updates everywhere.
   ========================================================================== */

:root {
    /* Surfaces */
    --eppay-bg: #F4F2ED;            /* page background (warm cream) */
    --eppay-surface: #FFFFFF;       /* cards */
    --eppay-surface-muted: #F2F0EB; /* inputs, inset areas */
    --eppay-border: #E7E4DD;        /* subtle 1px card border */
    --eppay-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --eppay-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.08);

    /* Text */
    --eppay-text: #141414;          /* near-black primary */
    --eppay-text-muted: #6B6B6B;    /* secondary */
    --eppay-text-micro: #9A9A9A;    /* UPPERCASE micro-labels */

    /* Accents */
    --eppay-accent: #F1531F;        /* orange — used sparingly */
    --eppay-accent-hover: #d8461425;
    --eppay-accent-soft: #FCE7DD;   /* pastel orange tile */
    --eppay-positive: #1FB57A;      /* green (currency / positive) */
    --eppay-tile-green: #DFF3E9;
    --eppay-tile-orange: #FCE7DD;

    /* Buttons */
    --eppay-btn: #141414;           /* primary button fill (white text) */
    --eppay-btn-hover: #000000;

    /* Radii */
    --eppay-radius-card: 20px;
    --eppay-radius-btn: 14px;
    --eppay-radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   Reusable helpers (usable from any stack)
   -------------------------------------------------------------------------- */

.eppay-card {
    background: var(--eppay-surface);
    border: 1px solid var(--eppay-border);
    border-radius: var(--eppay-radius-card);
    box-shadow: var(--eppay-shadow);
}

/* Small UPPERCASE letter-spaced label, like the mobile app's section labels */
.eppay-micro {
    color: var(--eppay-text-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Pastel icon tile (rounded square holding an icon) */
.eppay-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--eppay-surface-muted);
    color: var(--eppay-text);
}
.eppay-tile--green  { background: var(--eppay-tile-green);  color: var(--eppay-positive); }
.eppay-tile--orange { background: var(--eppay-tile-orange); color: var(--eppay-accent); }