/*
 * Portal Cliente — design tokens (ADR-011)
 *
 * Tokens taken verbatim from `artedengomar.pt`. New Portal components
 * must consume these CSS variables — never hardcode hex values or font
 * families. See docs/decisions/011-portal-branding.md.
 */

:root {
    /* Primary (dark) */
    --primary: #1C1C1C;
    --primary-light: #252525;
    --primary-dark: #0a0a0a;

    /* Gold (accent) */
    --gold: #D4AF37;
    --gold-light: #E8C84A;
    --gold-dark: #B8941F;

    /* Background */
    --bg: #F5F5F5;
    --bg-dark: #E8E8E8;

    /* Surface */
    --surface: #FFFFFF;

    /* Text */
    --text-primary: #1C1C1C;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;

    /* Border */
    --border: #E5E7EB;
    --border-light: #F3F4F6;

    /* Status */
    --error: #E53935;
    --success: #43A047;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* -------------------------------------------------------------------- */
/* Radzen variable overrides                                            */
/*                                                                      */
/* Radzen exposes its own --rz-* variables; we re-bind them to the      */
/* Portal tokens above so every Radzen component picks up the brand     */
/* without touching component markup.                                   */
/* -------------------------------------------------------------------- */

:root {
    /* Brand: gold is the primary CTA, dark is the surface */
    --rz-primary: var(--gold);
    --rz-primary-light: var(--gold-light);
    --rz-primary-dark: var(--gold-dark);
    --rz-primary-darker: var(--gold-dark);
    --rz-on-primary: var(--primary);

    /* Secondary maps to dark surfaces */
    --rz-secondary: var(--primary);
    --rz-secondary-light: var(--primary-light);
    --rz-secondary-dark: var(--primary-dark);
    --rz-on-secondary: var(--surface);

    /* Status */
    --rz-danger: var(--error);
    --rz-on-danger: var(--surface);
    --rz-success: var(--success);
    --rz-on-success: var(--surface);

    /* Body / surfaces */
    --rz-body-background-color: var(--bg);
    --rz-body-color: var(--text-primary);
    --rz-text-color: var(--text-primary);
    --rz-text-secondary-color: var(--text-secondary);
    --rz-text-tertiary-color: var(--text-muted);
    --rz-text-disabled-color: var(--text-muted);

    /* Panel / card */
    --rz-panel-background-color: var(--surface);
    --rz-card-background-color: var(--surface);
    --rz-base-background-color: var(--surface);

    /* Borders */
    --rz-border-color: var(--border);
    --rz-border: 1px solid var(--border);

    /* Inputs */
    --rz-input-background-color: var(--surface);
    --rz-input-color: var(--text-primary);
    --rz-input-border-color: var(--border);
    --rz-input-focus-border-color: var(--gold);
    --rz-input-placeholder-color: var(--text-muted);

    /* Links */
    --rz-link-color: var(--gold-dark);
    --rz-link-hover-color: var(--gold);

    /* Buttons — primary (gold on dark text for contrast) */
    --rz-button-primary-background-color: var(--gold);
    --rz-button-primary-color: var(--primary);
    --rz-button-primary-hover-background-color: var(--gold-light);
    --rz-button-primary-hover-color: var(--primary);
    --rz-button-primary-active-background-color: var(--gold-dark);

    /* Buttons — secondary (dark surface, gold text) */
    --rz-button-secondary-background-color: var(--primary);
    --rz-button-secondary-color: var(--gold);
    --rz-button-secondary-hover-background-color: var(--primary-light);
    --rz-button-secondary-hover-color: var(--gold-light);

    /* Typography */
    --rz-text-font-family: var(--font-body);
    --rz-text-h1-font-family: var(--font-heading);
    --rz-text-h2-font-family: var(--font-heading);
    --rz-text-h3-font-family: var(--font-heading);
    --rz-text-h4-font-family: var(--font-heading);
    --rz-text-h5-font-family: var(--font-heading);
    --rz-text-h6-font-family: var(--font-heading);
    --rz-text-display-font-family: var(--font-heading);
    --rz-text-display1-font-family: var(--font-heading);
    --rz-text-display2-font-family: var(--font-heading);
    --rz-text-display3-font-family: var(--font-heading);
    --rz-text-display4-font-family: var(--font-heading);
    --rz-text-display5-font-family: var(--font-heading);
    --rz-text-display6-font-family: var(--font-heading);
}

/* -------------------------------------------------------------------- */
/* Base typography                                                      */
/* -------------------------------------------------------------------- */

html, body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
}

/* -------------------------------------------------------------------- */
/* Service status badge — used by <PortalStatusBadge />                  */
/*                                                                      */
/* The five official ServiceStatus values share one visual language     */
/* across the Portal. Colours come from the ADR-011 tokens so the       */
/* badge always tracks the brand palette.                               */
/* -------------------------------------------------------------------- */

.portal-status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--bg-dark);
    color: var(--text-secondary);
}

.portal-status-badge--transport-pending {
    background: var(--bg-dark);
    color: var(--text-secondary);
}

.portal-status-badge--in-transport {
    background: var(--text-muted);
    color: var(--surface);
}

.portal-status-badge--in-production {
    background: var(--text-secondary);
    color: var(--surface);
}

.portal-status-badge--available-for-delivery {
    background: var(--gold);
    color: var(--primary);
}

.portal-status-badge--delivered {
    background: var(--success);
    color: var(--surface);
}

/* Payment statuses (#628). Cores reutilizam os tokens institucionais:
 * pending = gold (em curso, requer atenção do cliente),
 * approved = success (concluído),
 * rejected / expired = error (terminal negativo). Contraste WCAG AA
 * validado: texto sobre surface ≥ 4.5:1 nos quatro casos. */
.portal-status-badge--pending {
    background: var(--gold);
    color: var(--primary);
}

.portal-status-badge--approved {
    background: var(--success);
    color: var(--surface);
}

.portal-status-badge--rejected,
.portal-status-badge--expired {
    background: var(--error);
    color: var(--surface);
}