@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* agrotrust-az/src/styles/tokens.css *//* Design tokens for AgroTrust AZ. Theme strategy: - ThemeProvider toggles class on : theme-light | theme-dark - We define default tokens in :root - Then override in :root.theme-dark Keep tokens semantic (purpose-based) rather than purely colour names. */:root { /* Typography */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --fs-1: 0.75rem; /* 12px */ --fs-2: 0.875rem; /* 14px */ --fs-3: 1rem; /* 16px */ --fs-4: 1.125rem; /* 18px */ --fs-5: 1.25rem; /* 20px */ --fs-6: 1.5rem; /* 24px */ --fs-7: 1.875rem; /* 30px */ --fs-8: 2.25rem; /* 36px */ --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing scale */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* Layout */ --container-max: 1100px; --container-pad: var(--space-4); /* Radius */ --radius-1: 6px; --radius-2: 10px; --radius-3: 14px; --radius-pill: 999px; /* Borders */ --border-1: 1px solid var(--color-border); /* Shadows */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-2: 0 6px 22px rgba(0, 0, 0, 0.08); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.12); /* Motion */ --ease-1: cubic-bezier(0.2, 0, 0, 1); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; /* Z-index */ --z-dropdown: 20; --z-sticky: 40; --z-modal: 60; /* Brand accents (kept subtle for credibility) */ --brand-1: 150 45% 35%; --brand-2: 155 45% 28%; /* Light theme colours */ --color-bg: hsl(0 0% 100%); --color-surface: hsl(0 0% 99%); --color-elevated: hsl(0 0% 100%); --color-text: hsl(220 18% 14%); --color-text-muted: hsl(220 10% 40%); --color-text-soft: hsl(220 10% 55%); --color-border: hsl(220 14% 90%); --color-border-strong: hsl(220 14% 82%); --color-primary: hsl(var(--brand-1)); --color-primary-strong: hsl(var(--brand-2)); --color-primary-contrast: hsl(0 0% 100%); --color-success: hsl(145 55% 35%); --color-warning: hsl(38 90% 45%); --color-danger: hsl(2 70% 45%); --color-info: hsl(210 70% 45%); --color-link: var(--color-primary); /* Component tokens */ --btn-height: 40px; --btn-pad-x: 14px; --input-height: 40px; --input-pad-x: 12px; --sidebar-width: 260px; }/* Dark theme overrides */:root.theme-dark { --color-bg: hsl(220 18% 8%); --color-surface: hsl(220 18% 10%); --color-elevated: hsl(220 16% 12%); --color-text: hsl(0 0% 96%); --color-text-muted: hsl(220 12% 72%); --color-text-soft: hsl(220 10% 60%); --color-border: hsl(220 12% 20%); --color-border-strong: hsl(220 12% 28%); --color-primary: hsl(150 50% 55%); --color-primary-strong: hsl(150 55% 62%); --color-primary-contrast: hsl(220 18% 8%); --color-success: hsl(145 60% 50%); --color-warning: hsl(38 95% 60%); --color-danger: hsl(2 80% 60%); --color-info: hsl(210 80% 60%); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.35); --shadow-3: 0 14px 40px rgba(0, 0, 0, 0.45); }:root { --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }*, *::before, *::after { box-sizing: border-box; }html, body, #root { height: 100%; }html { color-scheme: light dark; }body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-3); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }img, svg, video, canvas { display: block; max-width: 100%; }a { color: var(--color-link); text-decoration: none; }a:hover { text-decoration: underline; }/* Ensure all controls inherit the Inter font */button, input, select, textarea { font-family: inherit; }.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }.muted { color: var(--color-text-muted); font-size: var(--fs-2); }.app-shell { min-height: 100%; background: var(--color-bg); /* Soft page fade-in on first render */ animation: app-fade-in 260ms var(--ease-1) 40ms both; }.brand { display: flex; flex-direction: column; gap: 2px; }.brand--compact .brand__tagline { display: none; }.brand__name { font-weight: var(--fw-semibold); font-size: var(--fs-4); letter-spacing: 0.2px; }.brand__tagline { font-size: var(--fs-1); color: var(--color-text-muted); }.btn { height: var(--btn-height); padding: 0 var(--btn-pad-x); border-radius: var(--radius-1); border: var(--border-1); background: var(--color-elevated); color: var(--color-text); font-weight: var(--fw-medium); font-size: var(--fs-2); cursor: pointer; transition: transform var(--duration-1) var(--ease-1), border-color var(--duration-2) var(--ease-1), background var(--duration-2) var(--ease-1), opacity var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1); }.btn:hover { transform: translateY(-1px); border-color: var(--color-border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }.btn:active { transform: translateY(0); box-shadow: none; }.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }.btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--color-primary) 60%, transparent); outline-offset: 2px; }.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); border-color: transparent; }.btn--primary:hover { background: var(--color-primary-strong); }.btn--ghost { background: transparent; }.btn--soft { background: var(--color-surface); }/* Link-like buttons inside nav */.nav-link--cta { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-height); padding: 0 var(--btn-pad-x); border-radius: var(--radius-1); background: var(--color-primary); color: var(--color-primary-contrast); font-weight: var(--fw-medium); font-size: var(--fs-2); border: 1px solid transparent; transition: background var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1); }.nav-link--cta:hover { background: var(--color-primary-strong); text-decoration: none; transform: translateY(-1px); }.input, select, textarea { width: 100%; border: var(--border-1); background: var(--color-elevated); color: var(--color-text); border-radius: var(--radius-1); padding: 0 var(--input-pad-x); height: var(--input-height); font-size: var(--fs-2); outline: none; transition: border-color var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), background var(--duration-2) var(--ease-1); }textarea { min-height: 120px; padding: var(--space-3); height: auto; }.input:focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent); }.marketing-shell { display: flex; flex-direction: column; }.marketing-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-elevated); border-bottom: var(--border-1); box-shadow: var(--shadow-1); }.marketing-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; min-height: 64px; }.marketing-nav { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }.marketing-header__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }.nav-link { font-size: var(--fs-2); color: var(--color-text); padding: 6px 8px; border-radius: var(--radius-1); transition: background var(--duration-2) var(--ease-1), color var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1); }.nav-link:hover { background: var(--color-surface); text-decoration: none; transform: translateY(-1px); }.nav-link.active { color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 10%, transparent); }.marketing-main { flex: 1; padding: var(--space-6) 0; }.marketing-footer { border-top: var(--border-1); background: var(--color-surface); }.marketing-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; }.marketing-footer__links { display: flex; gap: var(--space-3); justify-content: center; }.footer-link { font-size: var(--fs-2); color: var(--color-text-muted); transition: color var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1); }.footer-link:hover { color: var(--color-text); text-decoration: none; transform: translateY(-1px); }.dashboard-shell { display: flex; flex-direction: column; }.dashboard-topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-elevated); border-bottom: var(--border-1); box-shadow: var(--shadow-1); }.dashboard-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-4); }.dashboard-topbar__user { display: flex; align-items: center; gap: var(--space-3); }.user-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--color-surface); border: var(--border-1); }.user-pill__name { font-size: var(--fs-2); font-weight: var(--fw-medium); }.user-pill__role { font-size: var(--fs-1); color: var(--color-text-muted); }.dashboard-body { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: calc(100vh - 64px); }.dashboard-sidebar { background: var(--color-surface); border-right: var(--border-1); padding: var(--space-4) var(--space-3); }.dashboard-main { padding: var(--space-5); background: var(--color-bg); }.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-4); }.sidebar-section__title { font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-2); }.sidebar-link { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border-radius: var(--radius-1); font-size: var(--fs-2); color: var(--color-text); transition: background var(--duration-2) var(--ease-1), color var(--duration-2) var(--ease-1), transform var(--duration-1) var(--ease-1); }.sidebar-link:hover { background: var(--color-elevated); text-decoration: none; transform: translateY(-1px); }.sidebar-link.active { background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); }.card { background: var(--color-elevated); border: var(--border-1); border-radius: var(--radius-2); padding: var(--space-4); box-shadow: var(--shadow-1); transition: transform var(--duration-2) var(--ease-1), box-shadow var(--duration-2) var(--ease-1), border-color var(--duration-2) var(--ease-1), background var(--duration-2) var(--ease-1); }.card--soft { background: var(--color-surface); }.card:hover { transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.32); border-color: var(--color-border-strong); }.table { width: 100%; border-collapse: collapse; background: var(--color-elevated); border: var(--border-1); border-radius: var(--radius-2); overflow: hidden; }.table th, .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; font-size: var(--fs-2); }.table th { background: var(--color-surface); font-weight: var(--fw-semibold); }.table tr:last-child td { border-bottom: none; }.table tbody tr:hover { background: color-mix( in oklab, var(--color-primary) 6%, var(--color-elevated) ); }@media (max-width: 1100px) { .marketing-header__inner { grid-template-columns: 1fr; justify-items: start; } .marketing-nav { justify-content: flex-start; } .marketing-header__actions { justify-content: flex-start; } .marketing-footer__inner { grid-template-columns: 1fr; justify-items: start; } }@media (max-width: 980px) { .dashboard-body { grid-template-columns: 1fr; } .dashboard-sidebar { border-right: none; border-bottom: var(--border-1); } }@media (max-width: 520px) { .dashboard-main { padding: var(--space-4); } .marketing-main { padding: var(--space-5) 0; } }@keyframes app-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }