/* ============================================================================= GFG design tokens — Grupo Firmas Globales brand system. Shared by every page; promoted out of the page-scoped Report stylesheet so the whole app speaks one visual language. Brand (manual de identidad): dark teal #28333b PANTONE 7546 C primary surface / ink turquoise #71E4D1 PANTONE 332 C accent — STRUCTURE ONLY, never body text light gray #E6E6E5 PANTONE 663 C white #FFFFFF Type: Montserrat (headings + all figures), Larsseit (body copy). Dark-mode note: MudBlazor 9 does NOT put a dark class on ; it rewrites the --mud-palette-* variables in :root. `.mud-theme-dark` is only the Color.Dark utility. So our own tokens switch on the .gfg-light / .gfg-dark class that MainLayout applies to MudLayout. ============================================================================= */ /* ---------------------------------------------------------------- Larsseit -- */ @font-face { font-family: 'Larsseit'; src: url('../fonts/Larsseit.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Larsseit'; src: url('../fonts/Larsseit-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Larsseit'; src: url('../fonts/Larsseit-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------ Invariant constants -- */ .gfg { --gfg-teal: #28333b; --gfg-turq: #71e4d1; --gfg-gray: #e6e6e5; --gfg-font-head: 'Montserrat', Arial, Helvetica, sans-serif; --gfg-font-body: 'Larsseit', 'Helvetica Neue', Arial, sans-serif; --gfg-r-sm: 8px; --gfg-r-md: 12px; --gfg-r-lg: 16px; --gfg-content-max: 1680px; --gfg-rail-w: 72px; --gfg-ease: cubic-bezier(.2, .7, .3, 1); } /* ------------------------------------------------------------------ Light -- */ .gfg-light { --teal-950: #1b232a; --teal-800: #28333b; --teal-700: #34434d; --teal-600: #3f515c; --teal-500: #5a6d78; --turq: #71e4d1; --turq-deep: #2fae9a; --turq-glow: rgba(113, 228, 209, .5); --canvas: #f6f9f8; --surface: #ffffff; --paper: #fbfdfc; --mist: #eef4f3; --mist-2: #e2ecea; --mist-line: #d3e2df; --hair: #e2e9e8; --ink: #28333b; --muted: #5c6b73; /* 4.9:1 on white — WCAG AA */ --faint: #8a979d; --pos: #17936a; --pos-soft: #e3f4ee; --mod: #c2410c; /* SPEC-009 §12: accessible orange, replaces the rejected amber */ --mod-soft: #fbead9; --neg: #c0392b; --neg-soft: #fae8e5; --flat-soft: #eef1f1; --shadow-1: 0 1px 2px rgba(40, 51, 59, .05); --shadow-2: 0 1px 2px rgba(40, 51, 59, .05), 0 10px 28px -20px rgba(40, 51, 59, .45); --shadow-3: 0 2px 6px rgba(40, 51, 59, .08), 0 24px 48px -24px rgba(40, 51, 59, .5); } /* ------------------------------------------------------------------- Dark -- */ .gfg-dark { --teal-950: #0b1116; --teal-800: #18232a; --teal-700: #22303a; --teal-600: #2c3e49; --teal-500: #3d5461; --turq: #71e4d1; --turq-deep: #8ff0cf; --turq-glow: rgba(113, 228, 209, .35); --canvas: #10181d; --surface: #18232a; --paper: #141d23; --mist: #1e2b33; --mist-2: #243139; --mist-line: #2c3b44; --hair: rgba(255, 255, 255, .10); --ink: #e8efee; --muted: #9aaab0; /* 4.6:1 on canvas — WCAG AA */ --faint: #71838b; --pos: #4ed8a6; --pos-soft: rgba(78, 216, 166, .14); --mod: #f59e4b; --mod-soft: rgba(245, 158, 75, .16); --neg: #ff8a7a; --neg-soft: rgba(255, 138, 122, .16); --flat-soft: rgba(255, 255, 255, .08); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -20px rgba(0, 0, 0, .8); --shadow-3: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -24px rgba(0, 0, 0, .9); } /* The report is exported with window.print(). Paper is always white, so the dark token set reverts to the light values when printing rather than dumping ink over a whole sheet. */ @media print { .gfg-dark { --teal-950: #1b232a; --teal-800: #28333b; --teal-700: #34434d; --teal-600: #3f515c; --teal-500: #5a6d78; --turq-deep: #2fae9a; --canvas: #ffffff; --surface: #ffffff; --paper: #fbfdfc; --mist: #eef4f3; --mist-2: #e2ecea; --mist-line: #d3e2df; --hair: #e2e9e8; --ink: #28333b; --muted: #5c6b73; --faint: #8a979d; --pos: #17936a; --pos-soft: #e3f4ee; --mod: #c2410c; --mod-soft: #fbead9; --neg: #c0392b; --neg-soft: #fae8e5; --flat-soft: #eef1f1; } } /* --------------------------------------------------------------- Utilities -- */ /* Muted body text. Replaces the misuse of Color.Secondary (brand turquoise, ~1.6:1 on white) for subtitles across every page. */ .gfg .text-muted { color: var(--muted) !important; } .gfg .text-faint { color: var(--faint) !important; } /* Every figure in the app lines up in a column. */ .gfg .num, .gfg .report-table, .gfg .kpi-value, .gfg .mud-input-slot { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* Uppercase micro-label used above values and as nav section headings. */ .gfg .eyebrow { font-family: var(--gfg-font-head); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---------------------------------------------------------------- Surfaces -- */ .gfg .mud-main-content { background: var(--canvas); min-height: 100vh; } /* Cards read as paper: hairline border, shadow only on interaction. */ .gfg .mud-paper:not(.mud-drawer):not(.mud-appbar):not(.mud-popover) { border: 1px solid var(--hair); box-shadow: var(--shadow-1) !important; background-color: var(--surface); } /* ------------------------------------------------------------------ Motion -- */ @keyframes gfg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .gfg .rise { animation: gfg-rise .32s var(--gfg-ease) both; animation-delay: calc(var(--i, 0) * 40ms); } @media (prefers-reduced-motion: reduce) { .gfg .rise { animation: none; } .gfg * { transition-duration: .01ms !important; } }