/* =============================================================================
PhotoEditRocket — Component & Utility Layer
The "Components" tier of the design system: spacing, padding, typography and
the core UI components, all built on the --pe-* tokens. Additive and
opt-in — nothing here changes existing screens until you apply a class.
LOAD ORDER
----------
(tokens first)
(this file)
Everything is namespaced .pe-* so it can't collide with existing styles.
============================================================================= */
/* ---------------------------------------------------------------------------
1. TYPOGRAPHY — the type scale as utilities (one source for size/weight/
line-height/letter-spacing). Apply to any text element.
--------------------------------------------------------------------------- */
.pe-display-1 { font: var(--pe-w-extrabold) var(--pe-display-1)/var(--pe-lh-tight) var(--pe-font-display); letter-spacing: var(--pe-ls-tight); margin: 0; }
.pe-display-2 { font: var(--pe-w-extrabold) var(--pe-display-2)/var(--pe-lh-tight) var(--pe-font-display); letter-spacing: var(--pe-ls-tight); margin: 0; }
.pe-h1 { font: var(--pe-w-bold) var(--pe-title)/1.05 var(--pe-font-display); letter-spacing: var(--pe-ls-snug); margin: 0; }
.pe-h2 { font: var(--pe-w-bold) var(--pe-title-sm)/1.1 var(--pe-font-display); letter-spacing: var(--pe-ls-snug); margin: 0; }
.pe-h3 { font: var(--pe-w-bold) var(--pe-text-3xl)/1.2 var(--pe-font); letter-spacing: var(--pe-ls-snug); margin: 0; }
.pe-h4 { font: var(--pe-w-bold) var(--pe-text-2xl)/1.25 var(--pe-font); letter-spacing: var(--pe-ls-normal); margin: 0; }
.pe-lead { font: var(--pe-w-medium) var(--pe-lead)/var(--pe-lh-normal) var(--pe-font); color: var(--pe-ink-soft); margin: 0; }
.pe-body { font: var(--pe-w-medium) var(--pe-text-lg)/var(--pe-lh-normal) var(--pe-font); color: var(--pe-ink-soft); margin: 0; }
.pe-body-sm { font: var(--pe-w-medium) var(--pe-text-md)/1.5 var(--pe-font); color: var(--pe-ink-muted); margin: 0; }
.pe-caption { font: var(--pe-w-medium) var(--pe-text-sm)/1.4 var(--pe-font); color: var(--pe-ink-muted); margin: 0; }
.pe-overline { font: var(--pe-w-extrabold) var(--pe-text-xs)/1.3 var(--pe-font); letter-spacing: var(--pe-ls-wider); text-transform: uppercase; color: var(--pe-ink-muted); margin: 0; }
.pe-text-primary { color: var(--pe-ink); } .pe-text-secondary { color: var(--pe-ink-soft); }
.pe-text-muted { color: var(--pe-ink-muted); } .pe-text-accent { color: var(--pe-accent-tint); }
.pe-grad-text { background: var(--pe-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ---------------------------------------------------------------------------
2. LAYOUT / SPACING — stacks, clusters, padding & gap on the token rhythm.
--------------------------------------------------------------------------- */
.pe-container { width: 100%; max-width: var(--pe-container); margin-inline: auto; padding-inline: var(--pe-space-4); }
@media (min-width: 768px) { .pe-container { padding-inline: var(--pe-space-5); } }
@media (min-width: 1024px) { .pe-container { padding-inline: var(--pe-space-6); } }
/* Vertical rhythm: a stack with a consistent gap between children */
.pe-stack { display: flex; flex-direction: column; gap: var(--pe-space-4); }
.pe-stack-1 { gap: var(--pe-space-1); } .pe-stack-2 { gap: var(--pe-space-2); }
.pe-stack-3 { gap: var(--pe-space-3); } .pe-stack-4 { gap: var(--pe-space-4); }
.pe-stack-5 { gap: var(--pe-space-5); } .pe-stack-6 { gap: var(--pe-space-6); }
.pe-stack-8 { gap: var(--pe-space-8); }
/* Horizontal cluster (wraps) */
.pe-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-3); }
.pe-cluster-2 { gap: var(--pe-space-2); } .pe-cluster-4 { gap: var(--pe-space-4); }
.pe-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--pe-space-4); }
/* Padding utilities (all/x/y) */
.pe-p-3 { padding: var(--pe-space-3); } .pe-p-4 { padding: var(--pe-space-4); }
.pe-p-5 { padding: var(--pe-space-5); } .pe-p-6 { padding: var(--pe-space-6); }
.pe-px-4 { padding-inline: var(--pe-space-4); } .pe-px-5 { padding-inline: var(--pe-space-5); }
.pe-py-4 { padding-block: var(--pe-space-4); } .pe-py-5 { padding-block: var(--pe-space-5); }
.pe-py-section { padding-block: var(--pe-space-8); }
@media (min-width: 1024px) { .pe-py-section { padding-block: var(--pe-space-9); } }
/* Responsive grid (4 / 8 / 12 columns) */
.pe-grid { display: grid; gap: var(--pe-space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) { .pe-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--pe-space-5); } }
@media (min-width: 1024px) { .pe-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
/* ---------------------------------------------------------------------------
3. BUTTONS — pill, 600 weight, token padding/height, visible focus ring.
--------------------------------------------------------------------------- */
.pe-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--pe-space-2);
height: var(--pe-control-h); padding-inline: var(--pe-space-5);
border: 1px solid transparent; border-radius: var(--pe-r-pill);
font: var(--pe-w-semibold) var(--pe-text-lg)/1 var(--pe-font); letter-spacing: var(--pe-ls-normal);
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: transform var(--pe-dur-fast) var(--pe-ease-standard), box-shadow var(--pe-dur-fast), background var(--pe-dur-fast), border-color var(--pe-dur-fast);
}
.pe-btn:active { transform: translateY(0) scale(.985); }
.pe-btn:focus-visible { outline: none; box-shadow: var(--pe-ring); }
.pe-btn[disabled], .pe-btn.is-disabled { opacity: .4; pointer-events: none; }
.pe-btn--sm { height: 32px; padding-inline: var(--pe-space-4); font-size: var(--pe-text-base); }
.pe-btn--lg { height: 48px; padding-inline: 28px; font-size: var(--pe-text-xl); }
.pe-btn--primary { background: var(--pe-accent); color: var(--pe-accent-fg); box-shadow: 0 8px 22px -8px rgba(var(--pe-accent-rgb), .6); }
.pe-btn--primary:hover { background: var(--pe-accent-light); transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(var(--pe-accent-rgb), .7); }
.pe-btn--secondary { background: rgba(255,255,255,.04); color: var(--pe-ink); border-color: var(--pe-border-strong); }
.pe-btn--secondary:hover { background: rgba(255,255,255,.08); border-color: var(--pe-ink-muted); }
.pe-btn--tertiary { background: transparent; color: var(--pe-accent-tint); }
.pe-btn--tertiary:hover { background: var(--pe-accent-soft); }
.pe-btn--danger { background: var(--pe-danger); color: #fff; }
.pe-btn--danger:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(var(--pe-danger-rgb, 221,95,95), .6); }
.pe-btn--gradient { background: var(--pe-grad); color: #fff; text-shadow: 0 1px 2px rgba(10,11,16,.38); box-shadow: 0 8px 24px -6px rgba(37,99,235,.45), 0 4px 12px -4px rgba(239,68,68,.35); }
.pe-btn--gradient:hover { transform: translateY(-1px); }
.pe-btn--block { width: 100%; }
/* ---------------------------------------------------------------------------
4. FORM FIELDS
--------------------------------------------------------------------------- */
.pe-field { display: flex; flex-direction: column; gap: var(--pe-space-1); }
.pe-label { font: var(--pe-w-semibold) var(--pe-text-sm)/1.2 var(--pe-font); color: var(--pe-ink-muted); }
.pe-input, .pe-textarea, .pe-select {
width: 100%; height: 40px; padding-inline: var(--pe-space-3);
background: var(--pe-surface-2); border: 1px solid var(--pe-border-strong); border-radius: var(--pe-r-app-md);
color: var(--pe-ink); font: var(--pe-w-medium) var(--pe-text-base)/1.4 var(--pe-font);
transition: border-color var(--pe-dur-fast), box-shadow var(--pe-dur-fast);
}
.pe-textarea { height: auto; min-height: 96px; padding-block: var(--pe-space-3); resize: vertical; }
.pe-input::placeholder, .pe-textarea::placeholder { color: var(--pe-ink-dim); }
.pe-input:focus, .pe-textarea:focus, .pe-select:focus { outline: none; border-color: var(--pe-accent); box-shadow: var(--pe-ring); }
.pe-field.is-error .pe-input, .pe-field.is-error .pe-textarea { border-color: var(--pe-danger); }
.pe-field.is-error .pe-help { color: var(--pe-danger); }
.pe-help { font: var(--pe-w-medium) var(--pe-text-sm)/1.4 var(--pe-font); color: var(--pe-ink-muted); }
/* ---------------------------------------------------------------------------
5. CARD
--------------------------------------------------------------------------- */
.pe-card {
background: var(--pe-surface); border: 1px solid var(--pe-border); border-radius: var(--pe-r-md);
padding: var(--pe-space-5); box-shadow: var(--pe-shadow-card);
transition: transform var(--pe-dur-base) var(--pe-ease-standard), box-shadow var(--pe-dur-base), border-color var(--pe-dur-base);
}
.pe-card--interactive:hover { transform: translateY(-3px); border-color: rgba(var(--pe-accent-rgb), .4); box-shadow: var(--pe-shadow-card-hover); }
.pe-card__icon { width: 42px; height: 42px; border-radius: var(--pe-r-app-lg); display: grid; place-items: center; background: var(--pe-accent-soft); color: var(--pe-accent-light); }
/* ---------------------------------------------------------------------------
6. BADGES / TAGS
--------------------------------------------------------------------------- */
.pe-badge {
display: inline-flex; align-items: center; gap: var(--pe-space-1);
padding: 4px var(--pe-space-2); border-radius: var(--pe-r-pill);
font: var(--pe-w-extrabold) var(--pe-text-xs)/1 var(--pe-font); letter-spacing: .02em;
}
.pe-badge--accent { background: var(--pe-accent-soft); color: var(--pe-accent-light); border: 1px solid rgba(var(--pe-accent-rgb), .3); }
.pe-badge--success { background: rgba(16,185,129,.14); color: #4ade9f; border: 1px solid rgba(16,185,129,.3); }
.pe-badge--warning { background: rgba(245,158,11,.14); color: #f6c667; border: 1px solid rgba(245,158,11,.3); }
.pe-badge--error { background: rgba(239,68,68,.14); color: #f79b9b; border: 1px solid rgba(239,68,68,.3); }
.pe-badge--neutral { background: rgba(255,255,255,.06); color: var(--pe-ink-muted); border: 1px solid var(--pe-border-strong); }
/* ---------------------------------------------------------------------------
7. ALERT (inline)
--------------------------------------------------------------------------- */
.pe-alert { display: flex; gap: var(--pe-space-3); padding: var(--pe-space-4); border-radius: var(--pe-r-md); border: 1px solid transparent; }
.pe-alert__title { font: var(--pe-w-bold) var(--pe-text-lg)/1.3 var(--pe-font); margin: 0 0 2px; }
.pe-alert__body { font: var(--pe-w-medium) var(--pe-text-md)/1.5 var(--pe-font); color: var(--pe-ink-soft); margin: 0; }
.pe-alert--info { background: var(--pe-accent-soft); border-color: rgba(var(--pe-accent-rgb), .3); }
.pe-alert--success { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.3); }
.pe-alert--warning { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.3); }
.pe-alert--error { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.3); }
/* ---------------------------------------------------------------------------
8. FOCUS + MOTION SAFETY
--------------------------------------------------------------------------- */
.pe-focus-ring:focus-visible { outline: none; box-shadow: var(--pe-ring); }
@media (prefers-reduced-motion: reduce) {
.pe-btn, .pe-card, .pe-input, .pe-textarea, .pe-select { transition: none !important; }
.pe-btn:hover, .pe-card--interactive:hover { transform: none !important; }
}