/* ============================================================ SG System Solutions — CANONICAL DESIGN TOKENS (brand package copy) Identical to the design system's tokens.css. Import this file from the site, the app's telas.css, slides, or any future piece: (or @import url('tokens.css')) The Brandbook in this folder imports it too — exactly ONE vocabulary (--primary-* / --accent-* / --warm-* / --ink-*). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,300..800;1,400..600&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Space+Mono:wght@400;700&display=swap'); :root { /* ========== COLOR ========== */ /* Neutral ramp — cool slate that harmonizes with the blue brand */ --ink-950: #0a0f1f; --ink-900: #121829; --ink-800: #1c2336; --ink-700: #2b3346; --ink-600: #3d465c; --ink-500: #586176; --ink-400: #7a8398; --ink-300: #a2aabb; --ink-200: #cad0db; --ink-150: #dadee6; --ink-100: #e7eaf0; --ink-75: #eef0f5; --ink-50: #f4f6f9; --paper: #fbfcfe; /* cool off-white page */ --paper-raised: #ffffff; /* cards, sheets */ --paper-sunken: #f1f4f9; /* wells, code blocks */ /* Primary — brand blue. Ramp bottoms out at the institutional navy. */ --primary-50: #eef3fc; --primary-100: #d8e3f7; --primary-200: #b6c9ef; --primary-300: #88a5e3; --primary-400: #6a8fdb; --primary-500: #4e7cd2; /* brand blue — the "SG" in the wordmark */ --primary-600: #3a62bf; --primary-700: #2c4a9c; --primary-800: #1e3578; --primary-900: #001a63; /* azul institucional */ /* Accent — brand purple (gradient end / "System" + symbol tip) */ --accent-50: #f4ecfb; --accent-100: #e7d6f6; --accent-200: #d0aeed; --accent-300: #b585e3; --accent-400: #9d5ddd; --accent-500: #843ad3; /* brand purple */ --accent-600: #7330c9; /* symbol purple */ --accent-700: #5d24a6; /* Contrast accent — warm amber. The one warm note in a cool palette. */ /* Use SPARINGLY: a single highlighted metric, one data series, a "new" tag. */ --warm-50: #fff6e6; --warm-100: #ffe7b8; --warm-200: #ffd784; --warm-300: #ffcf6b; --warm-400: #ffbe3f; --warm-500: #ffb020; /* contrast accent */ --warm-600: #db8f0a; --warm-700: #a86c06; --highlight: var(--warm-500); /* semantic alias for the warm contrast accent */ /* Brand support hues (gradient midpoints) */ --brand-cyan: #359ad1; /* gradient start / symbol blue tip */ --brand-indigo: #665ed2; /* gradient midpoint */ --brand-blue-deep: var(--primary-900); /* alias for the institutional navy */ /* Brand gradients — accents only, never full-screen wallpaper */ --brand-gradient: linear-gradient(115deg, #359ad1 0%, #665ed2 48%, #843ad3 100%); /* @kind other */ --brand-gradient-symbol: linear-gradient(160deg, #8f2cd3 0%, #339dd1 100%); /* @kind other */ /* State hues */ --success-50: #e7f6ee; --success-100: #c6ebd6; --success-500: #1d9e62; --success-600: #168050; --success-700: #11643f; --warning-50: #fcf2db; --warning-100: #f7e2b0; --warning-500: #df9209; --warning-600: #b8780a; --warning-700: #8c5b08; --danger-50: #fbe9ea; --danger-100: #f6ccce; --danger-500: #db3b4b; --danger-600: #be2c3c; --danger-700: #971f2c; --info-50: var(--primary-50); --info-500: var(--primary-500); --info-600: var(--primary-600); /* ---- Semantic color aliases — prefer these in product code ---- */ /* Text */ --text-strong: var(--ink-950); --text-body: var(--ink-800); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-on-primary:#ffffff; --text-on-accent: #ffffff; --text-link: var(--primary-600); /* Surfaces */ --surface-page: var(--paper); --surface-card: var(--paper-raised); --surface-sunken: var(--paper-sunken); --surface-inverse: var(--primary-900); /* institutional navy */ --surface-hover: var(--ink-50); --surface-active: var(--ink-75); --surface-primary-soft: var(--primary-50); --surface-accent-soft: var(--accent-50); /* Borders */ --border-subtle: var(--ink-100); --border-default: var(--ink-150); --border-strong: var(--ink-300); --border-focus: var(--primary-500); --border-inverse: rgba(255, 255, 255, 0.16); /* Interactive (primary) */ --action-primary: var(--primary-500); --action-primary-hover: var(--primary-600); --action-primary-active: var(--primary-700); /* Focus ring */ --focus-ring: color-mix(in srgb, var(--primary-500) 40%, transparent); /* Data-viz sequence — brand blues/purples + the warm accent for contrast */ --viz-1: var(--primary-500); --viz-2: var(--accent-500); --viz-3: var(--warm-500); --viz-4: var(--brand-cyan); --viz-5: var(--brand-indigo); --viz-6: var(--success-500); /* ========== TYPOGRAPHY ========== */ /* Families — Exo 2 is the primary brand font (the wordmark typeface) */ --font-display: 'Exo 2', 'Segoe UI', system-ui, sans-serif; /* headings, wordmark, UI titles */ --font-sans: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body & UI */ --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif; /* serif display accent (marketing hero) */ --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* technical labels & code */ /* Type scale (px-based, 1.0 = 16px reference) */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base:15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 84px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.45; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* uppercase eyebrows / labels */ /* Font role aliases */ --font-eyebrow: var(--font-mono); --font-metric: var(--font-mono); --font-heading: var(--font-display); --font-hero: var(--font-editorial); /* ========== SPACING & RADII ========== */ /* Base unit: 4px. Technical, tight rhythm. */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 128px; /* Radii — tight, instrument-like */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 999px; /* Border widths */ --border-w: 1px; --border-w-thick: 1.5px; /* Layout */ --container-max: 1200px; --gutter: 24px; /* ========== ELEVATION & MOTION ========== */ /* Shadows — tinted with ink, never pure black */ --shadow-xs: 0 1px 1px rgba(12, 14, 18, 0.04), 0 1px 2px rgba(12, 14, 18, 0.06); --shadow-sm: 0 1px 2px rgba(12, 14, 18, 0.05), 0 2px 4px rgba(12, 14, 18, 0.06); --shadow-md: 0 2px 4px rgba(12, 14, 18, 0.06), 0 6px 14px rgba(12, 14, 18, 0.08); --shadow-lg: 0 4px 8px rgba(12, 14, 18, 0.07), 0 14px 30px rgba(12, 14, 18, 0.10); --shadow-xl: 0 8px 16px rgba(12, 14, 18, 0.08), 0 28px 56px rgba(12, 14, 18, 0.14); --shadow-inset: inset 0 1px 2px rgba(12, 14, 18, 0.07); /* Focus ring (compose with box-shadow) */ --ring-focus: 0 0 0 3px var(--focus-ring); /* Motion — durations */ --dur-instant: 80ms; /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* Motion — easing. Crisp out, gentle settle. No bounce. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */ }