/* ============================================================ AguTéc — Design Tokens (from AguTec Design System) Lato + JetBrains Mono loaded via Google Fonts in each page . ============================================================ */ :root { /* ===== BRAND PALETTE ===== */ --agutec-blue: #0079C1; --deep-blue: #005A91; --electric-blue: #68BFFF; --circuit-sky: #5EC8F2; --gold: #FFC72C; --gold-deep: #E5A800; --white: #FFFFFF; /* ===== INK / NAVY NEUTRALS ===== */ --ink-900: #18212E; --ink-800: #1F2933; --ink-700: #2C3A4B; --ink-600: #3D4F63; --ink-500: #54677C; --ink-400: #7C8DA0; --ink-300: #A7B4C2; --ink-200: #CDD6E0; --ink-100: #E5EAF0; --ink-50: #F5F7FA; /* ===== SEMANTIC STATUS ===== */ --success: #1E9E6A; --success-bg: #E6F4EE; --warning: #FFC72C; --warning-bg: #FFF6DD; --danger: #D64545; --danger-bg: #FBEAEA; --info: #0079C1; --info-bg: #E3F0F8; /* ===== SEMANTIC SURFACE / TEXT (light) ===== */ --bg: var(--ink-50); --surface: var(--white); --surface-2: #FBFCFD; --surface-sunken: #EEF2F6; --fg: var(--ink-900); --fg-2: #44515F; --fg-3: var(--ink-500); --fg-on-brand: var(--white); --border: var(--ink-100); --border-strong: var(--ink-200); --link: var(--agutec-blue); --link-hover: var(--deep-blue); --focus-ring: color-mix(in srgb, var(--agutec-blue) 45%, transparent); /* ===== TYPOGRAPHY ===== */ --font-sans: "Lato", "Trebuchet MS", Verdana, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-display: 700 clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem)/1.04 var(--font-sans); --text-h1: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/1.1 var(--font-sans); --text-h2: 700 clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem)/1.16 var(--font-sans); --text-h3: 700 1.5rem/1.25 var(--font-sans); --text-h4: 700 1.25rem/1.3 var(--font-sans); --text-h5: 700 1.0625rem/1.4 var(--font-sans); --text-body-lg: 400 1.1875rem/1.65 var(--font-sans); --text-body: 400 1rem/1.6 var(--font-sans); --text-body-sm: 400 0.875rem/1.55 var(--font-sans); --text-caption: 400 0.75rem/1.45 var(--font-sans); --text-code: 400 0.875rem/1.6 var(--font-mono); --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-overline: 0.14em; --w-light: 300; --w-regular: 400; --w-bold: 700; --w-black: 900; /* ===== SPACING (4px base) ===== */ --space-0:0; --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; --space-32:128px; /* ===== RADII ===== */ --radius-xs:3px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px; /* ===== SHADOW ===== */ --shadow-xs: 0 1px 2px rgba(24,33,46,.06); --shadow-sm: 0 1px 3px rgba(24,33,46,.08), 0 1px 2px rgba(24,33,46,.04); --shadow-md: 0 4px 12px rgba(24,33,46,.08), 0 2px 4px rgba(24,33,46,.05); --shadow-lg: 0 12px 28px rgba(24,33,46,.12), 0 4px 8px rgba(24,33,46,.06); --shadow-xl: 0 24px 56px rgba(24,33,46,.16); --shadow-focus: 0 0 0 3px var(--focus-ring); /* ===== MOTION ===== */ --ease-standard: cubic-bezier(0.4,0,0.2,1); --ease-out: cubic-bezier(0.16,1,0.3,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; /* ===== LAYOUT ===== */ --container: 1200px; --container-narrow: 760px; } .on-dark { --bg: var(--ink-900); --surface: var(--ink-800); --surface-2: #243140; --surface-sunken: #121A24; --fg: var(--white); --fg-2: var(--ink-300); --fg-3: var(--ink-400); --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --link: var(--electric-blue); --link-hover: var(--circuit-sky); }