/* ============================================================
BASE.CSS — Shop_Idy
Scope: tokens, reset, typography only
Do not put layout, component, or utility rules here
============================================================ */
/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
/* Brand palette — dark warm blue */
--color-ink: #0E1C2F;
--color-navy: #102A4C;
--color-navy-mid: #1B3F6B;
--color-blue: #1D5FA8;
--color-blue-warm: #2468B8;
--color-sky: #4A9EDB;
--color-sky-pale: #D5EAF8;
/* Neutrals */
--color-white: #FFFFFF;
--color-surface: #F7F9FC;
--color-surface-2: #EEF3FA;
--color-border: #D2DFF0;
--color-border-soft: #E5EDF8;
/* Semantic */
--color-success: #166534;
--color-success-bg: #DCFCE7;
--color-warning: #92400E;
--color-warning-bg: #FEF3C7;
--color-danger: #991B1B;
--color-danger-bg: #FEE2E2;
/* Accent */
--color-gold: #C9831A;
--color-gold-bg: #FEF0D6;
/* WhatsApp */
--color-wa: #075E54;
--color-wa-hover: #0A8070;
/* Text scale */
--text-primary: #0E1C2F;
--text-body: #2D3F55;
--text-muted: #5A7394;
--text-ghost: #8FABC7;
--text-on-dark: #FFFFFF;
--text-on-dark-soft: #B8D4EE;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Radii */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
/* Shadows */
--shadow-xs: 0 1px 3px rgba(14, 28, 47, 0.06);
--shadow-sm: 0 2px 8px rgba(14, 28, 47, 0.08);
--shadow-md: 0 6px 24px rgba(14, 28, 47, 0.10);
--shadow-lg: 0 16px 48px rgba(14, 28, 47, 0.13);
/* Transitions */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
/* Typography */
--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-display: 'Syne', sans-serif;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.9375rem;
--text-md: 1.0625rem;
--text-lg: 1.1875rem;
--text-xl: 1.375rem;
--text-2xl: 1.625rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--text-5xl: 3.25rem;
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-base: 1.6;
--leading-loose: 1.8;
/* Z-index scale */
--z-base: 1;
--z-raised: 10;
--z-nav: 100;
--z-overlay: 200;
--z-modal: 300;
--z-toast: 400;
}
/* ── 2. RESET ─────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
tab-size: 4;
hanging-punctuation: first last;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: 400;
line-height: var(--leading-base);
color: var(--text-body);
background-color: var(--color-surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img,
svg,
video,
canvas,
audio {
display: block;
max-width: 100%;
}
img { height: auto; }
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: var(--leading-tight);
color: var(--text-primary);
text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible {
outline: 2px solid var(--color-sky);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
::selection {
background-color: var(--color-sky-pale);
color: var(--color-navy);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── 3. TYPOGRAPHY ────────────────────────────────────────── */
.text-display {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
font-weight: 800;
line-height: var(--leading-tight);
letter-spacing: -0.02em;
color: var(--text-primary);
}
.text-h1 {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
font-weight: 800;
line-height: var(--leading-tight);
letter-spacing: -0.015em;
}
.text-h2 {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
font-weight: 700;
line-height: var(--leading-snug);
letter-spacing: -0.01em;
}
.text-h3 {
font-family: var(--font-display);
font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
font-weight: 700;
line-height: var(--leading-snug);
}
.text-h4 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
line-height: var(--leading-snug);
}
.text-lead {
font-size: var(--text-md);
line-height: var(--leading-loose);
color: var(--text-muted);
}
.text-body { font-size: var(--text-base); line-height: var(--leading-base); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-base); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-base); }
.text-label {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-sky);
}
/* color utilities */
.text-primary { color: var(--text-primary); }
.text-muted { color: var(--text-muted); }
.text-ghost { color: var(--text-ghost); }
.text-on-dark { color: var(--text-on-dark); }
.text-blue { color: var(--color-blue); }
.text-sky { color: var(--color-sky); }
.text-gold { color: var(--color-gold); }
/* ── 4. FONT LOADING NOTE ─────────────────────────────────── */
/*
Add this in every HTML — do NOT @import fonts in CSS:
*/