/* ========================================================================== Asign Portal — Design Tokens -------------------------------------------------------------------------- Single source of truth for colour, spacing, radius, type and elevation. Mirrors the Figma "Asign" variable collection 1:1 (file 9Y0U8GdxqSiq5IgnBOAovY). Figma token name -> CSS custom property: color/primary -> --color-primary space/16 -> --space-16 radius/lg -> --radius-lg Figma is the source of truth. When a value changes in Figma, change it here. Engineering-only primitives Figma variables don't cover (z-index, motion, font stacks) are grouped at the bottom and clearly labelled. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOUR — Brand ---------------------------------------------------------------------- */ --color-primary: #005fa8; /* Primary Blue — main brand colour */ --color-primary-hover: #004c86; /* Primary, hovered */ --color-primary-dark: #003965; /* Primary, pressed / deep */ --color-accent: #883e8b; /* Purple (accent) */ --color-navy: #21325c; /* Dark Blue / Navy */ --color-navy-ink: #222d3a; /* Charcoal-navy ink */ --color-secondary: #8ebde4; /* Light Blue */ --color-secondary-hover: #3295e7; /* Light Blue, hovered */ --color-sage: #b8cbae; /* Sage Green */ /* COLOUR — Tints (soft backgrounds) */ --color-tint-blue: #deeffa; /* Light-blue tint */ --color-tint-blue-soft: #e8f2fa; /* Light-blue tint, softer */ --color-tint-purple: #f4e8f5; /* Purple tint */ /* COLOUR — Signature gradient (Primary Blue -> Purple, approved) */ --color-gradient-start: #005fa8; --color-gradient-end: #883e8b; --gradient-brand: linear-gradient(150deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%); /* COLOUR — Text */ --color-text: #212529; /* Default body / heading ink */ --color-text-muted: #6c757d; /* Secondary / helper text */ --color-on-primary: #ffffff; /* Text/icon on primary & dark fills */ /* COLOUR — Surfaces */ --color-surface: #ffffff; /* Cards, panels */ --color-surface-alt: #f7f9fb; /* App background / subtle fills */ /* COLOUR — Borders */ --color-border: #dee2e6; /* Default hairline */ --color-border-strong: #ced4da; /* Stronger divider / input border */ /* COLOUR — Status */ --color-danger: #dc3545; --color-warning: #ffc107; --color-success: #2e7d32; --color-info: #0dcaf0; /* ---------------------------------------------------------------------- SPACING — 8-pt scale (Figma space/*). Value == pixels. ---------------------------------------------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; /* ---------------------------------------------------------------------- RADIUS (Figma radius/*) ---------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---------------------------------------------------------------------- ELEVATION (Figma Elevation/*). Navy #21325c drop shadows. ---------------------------------------------------------------------- */ --elevation-sm: 0 2px 6px rgba(33, 50, 92, 0.08); --elevation-md: 0 8px 24px rgba(33, 50, 92, 0.10); --elevation-lg: 0 20px 48px rgba(33, 50, 92, 0.14); /* ---------------------------------------------------------------------- TYPOGRAPHY — families & weights Derived from the Figma text styles: Manrope (headings + UI body), Quicksand (action items: buttons/links). Domine is an Asign brand serif for long-form marketing body — NOT used in the portal UI per Figma; kept here only as an available stack. ---------------------------------------------------------------------- */ --font-sans: "Manrope", "Arial", system-ui, sans-serif; /* headings + body */ --font-action: "Quicksand", "Manrope", system-ui, sans-serif; /* buttons + links */ --font-serif: "Domine", "Georgia", serif; /* marketing body only */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* TYPE SCALE — the 9 Figma text styles (size / line-height / tracking). Use via the .text-* classes in typography.css. */ --text-display-size: 30px; --text-display-lh: 38px; --text-display-ls: -0.2px; --text-h1-size: 24px; --text-h1-lh: 32px; --text-h1-ls: -0.2px; --text-h2-size: 20px; --text-h2-lh: 28px; --text-h2-ls: 0; --text-body-lg-size: 16px; --text-body-lg-lh: 26px; --text-body-size: 15px; --text-body-lh: 22px; --text-body-sm-size: 13px; --text-body-sm-lh: 18px; --text-label-size: 13px; --text-label-lh: 16px; --text-label-ls: 0.2px; --text-action-size: 15px; --text-action-lh: 20px; --text-action-ls: 0.2px; --text-link-size: 14px; --text-link-lh: 20px; /* ====================================================================== ENGINEERING PRIMITIVES (not Figma variables — portal conventions) ====================================================================== */ /* Z-INDEX scale */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-overlay: 1040; --z-modal: 1050; --z-toast: 1080; /* MOTION */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 120ms; --duration-base: 200ms; /* FOCUS RING (accessibility — the product's reason to exist) */ --focus-ring: 0 0 0 3px rgba(0, 95, 168, 0.35); --focus-ring-offset: 2px; } /* ============================================================================ DARK MODE (CYA-293) ---------------------------------------------------------------------------- Only the structural tokens flip (text / surfaces / borders / tint backgrounds / elevation) — brand colours (primary/accent/navy/secondary/ sage) and status colours (danger/warning/success/info) stay the same in both themes; they're saturated enough to read fine on a dark surface too. Two identical blocks, on purpose: the @media-guarded one applies when the OS prefers dark and the user hasn't explicitly forced light (System, the default); the [data-theme="dark"] one applies when the user has explicitly forced Dark regardless of the OS setting. See resources/views/layouts/app.blade.php for how the attribute is set. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-text: #e8eaed; --color-text-muted: #98a2b3; --color-navy: #dbe6f7; /* headings/titles use --color-navy for ink, not fill — lightened here for legibility on dark surfaces. The one background use (.avatar--navy) is pinned back to the original navy hex below so that avatar variant stays put like the other invariant brand-coloured ones. */ --color-surface: #1b2432; --color-surface-alt: #121826; --color-border: #2c3648; --color-border-strong: #3c4759; --color-tint-blue: #17324a; --color-tint-blue-soft: #15293c; --color-tint-purple: #2e1f36; --elevation-sm: 0 2px 6px rgba(0, 0, 0, 0.32); --elevation-md: 0 8px 24px rgba(0, 0, 0, 0.40); --elevation-lg: 0 20px 48px rgba(0, 0, 0, 0.48); } } :root[data-theme="dark"] { --color-text: #e8eaed; --color-text-muted: #98a2b3; --color-navy: #dbe6f7; --color-surface: #1b2432; --color-surface-alt: #121826; --color-border: #2c3648; --color-border-strong: #3c4759; --color-tint-blue: #17324a; --color-tint-blue-soft: #15293c; --color-tint-purple: #2e1f36; --elevation-sm: 0 2px 6px rgba(0, 0, 0, 0.32); --elevation-md: 0 8px 24px rgba(0, 0, 0, 0.40); --elevation-lg: 0 20px 48px rgba(0, 0, 0, 0.48); }