/* ========================================================================= La Guadalupana — CSS design tokens Derived from ../design-tokens.json (single source of truth). Use for: React Native Web / Expo web, WebViews, any HTML surface. Do NOT hardcode hex values in components — reference these variables. ========================================================================= */ /* ---- Fonts -------------------------------------------------------------- */ /* Guadalupa (display) — bundled in the repo. Paths are relative to this file (design-system/tokens/ -> fonts/). Adjust the url() base if you copy this file into an app bundle. */ @font-face { font-family: "Guadalupa"; src: url("fonts/Guadalupa-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Guadalupa"; src: url("fonts/Guadalupa-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Guadalupa"; src: url("fonts/Guadalupa-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Guadalupa"; src: url("fonts/Guadalupa-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Guadalupa"; src: url("fonts/Guadalupa-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* League Spartan (body/UI) — Google Font. Prefer self-hosting in production; for quick starts, load it from Google Fonts in your : */ /* ---- Tokens ------------------------------------------------------------- */ :root { /* Brand palette */ --gua-color-cobalt: #3434C8; --gua-color-pink: #ED4385; --gua-color-cream: #FEF6EB; --gua-color-gold: #FEBE35; --gua-color-jade: #10A299; --gua-color-cream-on-brand: #FFF5E6; --gua-color-white: #FFFFFF; /* Semantic — background & surface */ --gua-background-default: var(--gua-color-cream); --gua-background-elevated: var(--gua-color-white); --gua-surface-brand: var(--gua-color-cobalt); --gua-surface-accent-pink: var(--gua-color-pink); /* Semantic — text */ --gua-text-primary: var(--gua-color-cobalt); --gua-text-on-brand: var(--gua-color-cream-on-brand); --gua-text-accent: var(--gua-color-pink); --gua-text-muted: #6B6B8F; /* Semantic — CTA */ --gua-cta-primary: var(--gua-color-pink); --gua-cta-primary-text: var(--gua-color-white); --gua-cta-secondary: var(--gua-color-cobalt); --gua-cta-secondary-text: var(--gua-color-cream-on-brand); /* Semantic — accent & border */ --gua-accent-pink: var(--gua-color-pink); --gua-accent-gold: var(--gua-color-gold); --gua-accent-jade: var(--gua-color-jade); --gua-border-subtle: #E7DFD0; /* Typography — families */ --gua-font-display: "Guadalupa", Georgia, "Times New Roman", serif; --gua-font-body: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Typography — weights */ --gua-weight-thin: 100; --gua-weight-light: 300; --gua-weight-regular: 400; --gua-weight-medium: 500; --gua-weight-semibold: 600; --gua-weight-bold: 700; --gua-weight-black: 900; /* Typography — sizes (px) */ --gua-size-display: 40px; --gua-size-h1: 32px; --gua-size-h2: 24px; --gua-size-card-title:22px; --gua-size-title: 18px; --gua-size-body: 16px; --gua-size-label: 14px; --gua-size-caption: 12px; --gua-size-overline: 12px; /* Radii */ --gua-radius-sm: 12px; --gua-radius-md: 16px; --gua-radius-lg: 24px; --gua-radius-xl: 32px; --gua-radius-pill: 999px; /* Spacing (4-pt grid) */ --gua-space-xs: 4px; --gua-space-sm: 8px; --gua-space-md: 16px; --gua-space-lg: 24px; --gua-space-xl: 32px; --gua-space-2xl: 48px; --gua-space-3xl: 64px; /* Elevation */ --gua-shadow-card: 0 4px 16px rgba(52, 52, 200, 0.12); --gua-shadow-raised: 0 8px 28px rgba(52, 52, 200, 0.18); } /* ---- Optional base defaults -------------------------------------------- Opt in by adding class="gua" to (or a root element). */ .gua { background-color: var(--gua-background-default); color: var(--gua-text-primary); font-family: var(--gua-font-body); font-size: var(--gua-size-body); line-height: 1.4; } .gua h1, .gua h2, .gua h3, .gua .gua-display { font-family: var(--gua-font-display); color: var(--gua-text-primary); }