/* ============================================================ Meteo Raíz — Design Tokens: Color & Type Plataforma meteorológica para agricultura y trabajo al aire libre Load fonts via the Google Fonts in your HTML : Space Grotesk (300–700) + Manrope (300–800) ============================================================ */ :root { /* ---------- TYPEFACES ---------- */ --font-display: "Space Grotesk", "Manrope", system-ui, sans-serif; /* headings + big data readouts */ --font-body: "Manrope", system-ui, -apple-system, sans-serif; /* UI + paragraphs */ --font-data: "Space Grotesk", "Manrope", monospace; /* tabular numerics */ /* ---------- TYPE SCALE (desktop) ---------- */ --fs-display: clamp(40px, 5vw, 64px); /* hero */ --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px; --fs-label: 12px; /* uppercase eyebrow / data label */ --fs-metric: 52px; /* dashboard hero number */ --fs-metric-sm:34px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-display: -0.02em; --ls-tight: -0.01em; --ls-label: 0.08em; /* tracking for uppercase labels */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ============================================================ COLOR PRIMITIVES ============================================================ */ /* --- Agricultural green (primary) --- */ --green-50: #ECF7F0; --green-100: #D2EDDD; --green-200: #A8DCBE; --green-300: #6FC394; --green-400: #38A86E; --green-500: #1F8A54; /* PRIMARY */ --green-600: #157045; --green-700: #0F5837; --green-800: #0C4429; --green-900: #08301D; /* --- Sky blue (secondary) --- */ --sky-50: #ECF4FD; --sky-100: #D3E6FB; --sky-200: #AFD2F7; --sky-300: #7EB7F2; --sky-400: #4D97EC; --sky-500: #2C7BE5; /* SECONDARY */ --sky-600: #1E63C4; --sky-700: #18509E; --sky-800: #143F78; /* --- Clay / earth (warm accent + warm neutrals) --- */ --clay-50: #FAF6F0; --clay-100: #F1E9DD; --clay-200: #E4D6C0; --clay-300: #D0BC9A; --clay-400: #BFA277; --clay-500: #A6854F; --clay-600: #8A6D44; --clay-700: #6B5435; /* --- Ink / cool neutrals (slightly green-warm) --- */ --ink-900: #0F1E18; /* primary text */ --ink-800: #1B2A23; --ink-700: #2E3B35; /* strong text */ --ink-600: #46524B; --ink-500: #5F6B63; /* secondary text */ --ink-400: #828D86; /* tertiary / placeholder */ --ink-300: #AAB4AD; /* disabled */ --ink-200: #D6DCD8; /* borders */ --ink-150: #E4E9E5; --ink-100: #EDF1EE; /* hairlines / track */ --ink-50: #F6F8F7; /* app surface */ --white: #FFFFFF; /* ============================================================ SEMANTIC TOKENS ============================================================ */ /* Brand */ --brand: var(--green-500); --brand-strong: var(--green-600); --brand-soft: var(--green-50); --brand-contrast: var(--white); --accent: var(--sky-500); --accent-soft: var(--sky-50); /* Surfaces */ --bg-app: var(--ink-50); --bg-surface: var(--white); --bg-raised: var(--white); --bg-sunken: var(--ink-100); --bg-inverse: var(--green-900); --bg-field-night: #0B231A; /* dark agri-night panels */ /* Text */ --fg: var(--ink-900); --fg-strong: var(--ink-800); --fg-muted: var(--ink-500); --fg-subtle: var(--ink-400); --fg-on-brand: var(--white); --fg-on-dark: #E8F0EB; --fg-link: var(--sky-600); /* Borders */ --border: var(--ink-200); --border-soft: var(--ink-100); --border-strong:var(--ink-300); --ring: color-mix(in oklch, var(--green-500) 45%, transparent); /* ---------- RISK / ALERT SEMANTICS (bajo · medio · alto) ---------- */ /* Riesgo bajo / Ideal */ --risk-low: #1F8A54; --risk-low-bg: #E7F6ED; --risk-low-border: #B6E3C7; --risk-low-fg: #0F5837; /* Riesgo medio */ --risk-med: #E8910C; --risk-med-bg: #FDF2DC; --risk-med-border: #F6D89A; --risk-med-fg: #8A5605; /* Riesgo alto */ --risk-high: #DA3B22; --risk-high-bg: #FCE9E4; --risk-high-border:#F4BFB2; --risk-high-fg: #9A2412; /* Crítico (tormenta / extremo) */ --risk-critical: #B11226; --risk-critical-bg:#FBE3E6; /* Info / cielo */ --info: var(--sky-500); --info-bg: var(--sky-50); /* Weather accent hues (for icons/charts) */ --w-sun: #F5A623; --w-uv: #E8910C; --w-rain: #2C7BE5; --w-wind: #5B8C7E; --w-storm: #6B5BC7; --w-cloud: #8FA0AB; --w-temp: #E5562B; /* ============================================================ RADII / SHADOW / SPACING ============================================================ */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-pill:999px; --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; /* Soft, cool-tinted elevation */ --shadow-xs: 0 1px 2px rgba(15,30,24,0.06); --shadow-sm: 0 1px 3px rgba(15,30,24,0.07), 0 1px 2px rgba(15,30,24,0.05); --shadow-md: 0 4px 12px rgba(15,30,24,0.08), 0 2px 4px rgba(15,30,24,0.05); --shadow-lg: 0 12px 28px rgba(15,30,24,0.10), 0 4px 10px rgba(15,30,24,0.06); --shadow-xl: 0 24px 56px rgba(15,30,24,0.14), 0 8px 18px rgba(15,30,24,0.07); --shadow-brand: 0 8px 22px rgba(31,138,84,0.28); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 360ms; } /* ============================================================ DARK THEME — remapea neutros y fondos suaves ============================================================ */ html[data-theme="dark"] { --white: #161D1A; /* superficie de tarjetas */ --ink-50: #101613; /* fondo de app */ --ink-100: #222B26; /* hairlines / track */ --ink-150: #2A332D; --ink-200: #303A34; /* bordes */ --ink-300: #45504A; /* disabled */ --ink-400: #8C958E; /* terciario */ --ink-500: #AAB2AC; /* secundario */ --ink-600: #C4CBC6; --ink-700: #DBE0DC; /* texto fuerte */ --ink-800: #EAEEEB; --ink-900: #F4F7F5; /* texto principal */ --green-50: #14271D; /* tintes suaves recalibrados para fondo oscuro */ --green-100: #1A3326; --sky-50: #142536; --sky-100: #1A3147; --clay-50: #241F17; --clay-100: #2C2519; --risk-low-bg: #14301F; --risk-low-border: #1F5234; --risk-low-fg: #74D3A0; --risk-med-bg: #322411; --risk-med-border: #5E461A; --risk-med-fg: #F0B85C; --risk-high-bg: #361912; --risk-high-border:#5E2A1E; --risk-high-fg: #F09683; --risk-critical-bg:#3A1318; --info-bg: #142536; --bg-app: var(--ink-50); --bg-surface: var(--white); --bg-raised: var(--white); --bg-sunken: #0C120F; --ring: color-mix(in oklch, var(--green-400) 50%, transparent); --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.40); --shadow-lg: 0 12px 28px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.45); --shadow-xl: 0 24px 56px rgba(0,0,0,0.60), 0 8px 18px rgba(0,0,0,0.45); --shadow-brand: 0 8px 22px rgba(31,138,84,0.40); } html[data-theme="dark"] body { background: var(--ink-50); color: var(--ink-900); } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg); } .h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-display); color: var(--fg); } .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--fg); } .h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--ls-tight); color: var(--fg); } .h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: 1.35; color: var(--fg); } .body-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-strong); } .body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-strong); } .small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-muted); } .label { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-label); line-height: 1.2; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-subtle); } .metric { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-metric); line-height: 1; letter-spacing: var(--ls-display); color: var(--fg); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .metric-sm { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-metric-sm); line-height: 1; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; color: var(--fg); } /* numeric tabular helper */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }