/*
  Monster Films — visual language tokens (PROTOTYPE, ticket 12 "The project's visual language").

  Source: monsterfilms.com.br, read 2026-10-02 through its CSS (/_next/static/chunks/e64df7efdae79691.css)
  and captures of /, /projects, /about, /contact, /ai-projects. Each token is tagged:
    [site]     the value the site itself uses;
    [derived]  not on the site, which is a showcase and carries no table, status or form; derived from
               the [site] tokens named beside it.
  Fonts: Anybody is OFL (Google Fonts). The site's pixel face is IT Gridbit (Indotype Foundry), a
  commercial font whose demo is personal-use only (1001fonts.com, read 2026-10-02); Silkscreen (OFL)
  stands in for it here until Monster's licence is known.
*/
@import url("/assets/fonts.css");

:root {
  /* canvas and surfaces: the site is black with white overlays, never grey fills */
  --mf-canvas: #000;                              /* [site] bg-black */
  --mf-surface-1: rgb(255 255 255 / .04);         /* [derived] half the site's hover panel */
  --mf-surface-2: rgb(255 255 255 / .08);         /* [derived] row hover */
  --mf-surface-3: rgb(255 255 255 / .1);          /* [site] the active project row's panel */
  --mf-line: rgb(255 255 255 / .2);               /* [site] border-white/20 */
  --mf-line-soft: rgb(255 255 255 / .1);          /* [site] #ffffff1a */
  --mf-scanline: rgb(255 255 255 / .022);         /* [derived] the hero's scanline texture, toned for reading */

  /* text */
  --mf-text: #fff;                                /* [site] text-white */
  --mf-text-2: rgb(255 255 255 / .7);             /* [site] text-white/70 */
  --mf-text-3: rgb(255 255 255 / .5);             /* [derived] 5.3:1 on black; the floor for small text */
  --mf-text-dim: rgb(255 255 255 / .35);          /* [site] the inactive project rows; only for text >= 18px or disabled */
  --mf-logo: #e5e5e5;                             /* [site] logo fill, neutral-200 */
  --mf-label: #e5e5e5;                            /* [site] uppercase labels "SINCE 2012", "NEW BUSINESS" */

  /* accent: the site's one colour, used on text, lines and the play glyph, never as a large fill */
  --mf-yellow: #ffff06;                           /* [site] --primary (text-primary, bg-primary) */
  --mf-yellow-hover: #fff566;                     /* [site] group-hover fill */
  --mf-on-yellow: #000;                           /* [derived] text on a yellow tag */

  /* status: the site has white, yellow and one red; the painel web needs four states and keeps to them.
     Status never rests on colour alone: every state has a word and a pixel glyph. */
  --mf-ok: #fff;                                  /* [derived] Ativo is the normal state, so it is plain white */
  --mf-soon: var(--mf-yellow);                    /* [derived] "vence em até 7 dias": yellow means now */
  --mf-bad: #ff6568;                              /* [site] red-400, the site's only red: Expirado */
  --mf-bad-line: rgb(255 101 104 / .45);          /* [derived] */
  --mf-off: rgb(255 255 255 / .5);                /* [derived] Bloqueado reads as switched off, like the site's dimmed rows */

  /* type */
  --mf-sans: "Anybody", "Anybody Fallback", Arial, sans-serif;     /* [site] --font-anybody */
  --mf-pixel: "Silkscreen", monospace;            /* stand-in for [site] --font-gridbit (.font-it) */
  --mf-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* [site] --font-mono */
  --mf-display: 64px;                             /* [derived] the site's display runs to 128px (text-9xl); a tool page stops at 64 */
  --mf-title: 30px;                               /* [site] text-3xl */
  --mf-body: 14px;                                /* [site] text-sm */
  --mf-small: 12px;                               /* [site] text-xs */
  --mf-label-size: 11px;                          /* [derived] text-xs less 1px, uppercase, tracked */
  --mf-track-label: .25em;                        /* [site] tracking-[0.25em] */
  --mf-track-pixel: .1em;                         /* [site] .font-it at 14px: 1.4px */
  --mf-track-head: .2em;                          /* [site] tracking-[0.2em] */
  --mf-leading-display: .9;                       /* [site] leading-[0.9] */

  /* shape and space */
  --mf-radius: 0;                                 /* [site] every button and panel is square */
  --mf-space: 4px;                                /* [site] --spacing .25rem */
  --mf-gutter: 48px;                              /* [derived] the site's 80px side margin at 1920, scaled to 1280 */
  --mf-row: 40px;                                 /* [derived] 12 licenças fit a 1280×800 screen */

  /* motion */
  --mf-ease: cubic-bezier(0, 0, .2, 1);           /* [site] --ease-out */
  --mf-dur: 300ms;                                /* [site] duration-300 */
  --mf-focus: 2px solid var(--mf-yellow);         /* [derived] the site's focus-visible:text-primary, as a ring */
}

/*
  System layer. The tokens above are the site's language, a showcase's. A system is read and scanned all
  day, so it takes the same palette, faces and shapes and changes how text behaves (Marcos, 2026-10-02:
  usability first, personalisation second). Grounded in two dark products where the brand is an accent on
  a readable table (Mobbin, read 2026-10-02): Sweatpals "Members" (sentence case, the brand colour only
  on the selected filter tile) and Emergent "Recent Tasks" (uppercase only in the table head).
*/
:root {
  --sys-text: 14px;           /* every cell, field and button */
  --sys-text-2: 13px;         /* secondary lines under a cell */
  --sys-title: 24px;          /* page title, sentence case, 600; the 64px display is for brand moments only */
  --sys-head: 11px;           /* table head and section eyebrow: the only uppercase, tracked .08em */
  --sys-track-head: .08em;
  --sys-row: 52px;            /* two-line cells (date + relative) without crowding */
  --sys-control: 36px;        /* buttons and inputs */
  --sys-num: "tnum" 1;        /* Anybody has tabular figures: dates and counts line up and read as text */
  --sys-surface: #0a0a0a;     /* [derived] one lifted plane for the table, so rows read against the canvas */
}
/*
  Surface hierarchy: planes are told apart by fill, not by border, from the shell to the last state
  (Marcos, 2026-10-02). Steps after Radix Colors' scale (1–2 backgrounds, 3–5 component backgrounds
  normal/hover/selected; radix-ui.com/colors via context7, read 2026-10-02) and measured on real products
  (Mobbin, read 2026-10-02): Dropbox Dash's shell #1d1818 with its content sheet #252221 set in by 8px;
  Sweatpals' black canvas, #111 panels, #2a2a2a inner blocks; Deel "Home" #1b1b1b → #282828 → #3a3a3a;
  Railway's log as a darker well. Translated onto the site's black, s2 being its own neutral-900.
*/
:root {
  --sys-s0: #000;       /* canvas behind the login; the darkest plane */
  --sys-s1: #0e0e0e;    /* the content area under the top bar, edge to edge */
  --sys-s2: #171717;    /* panels, cards, modals on the sheet ([site] neutral-900) */
  --sys-s3: #212121;    /* components on a panel: table head band, buttons, menus */
  --sys-s4: #2b2b2b;    /* hover, selected, pressed */
  --sys-well: #070707;  /* inset inside a panel: fields, search, the timeline's bed */
  --sys-well-hover: #171717;  /* the well under a hovered row: lit, still below the row's s3 */
  --sys-hair: rgb(255 255 255 / .06);  /* row separators only; borders are not the hierarchy */
  --sys-hair-strong: rgb(255 255 255 / .12);  /* a divider inside the bar */
  --sys-bar: #161616;   /* the top bar: its own plane, a step above the content it sits over */
  --sys-bar-h: 56px;
  --sys-shadow-overlay: 0 16px 48px rgb(0 0 0 / .65);  /* menus and modals float above the planes */
}
.sys { background: var(--mf-canvas); color: var(--mf-text); font: 400 var(--sys-text)/1.45 var(--mf-sans); -webkit-font-smoothing: antialiased; font-feature-settings: var(--sys-num); }
.sys :focus-visible { outline: var(--mf-focus); outline-offset: 2px; }
.sys-head { font: 500 var(--sys-head)/1.2 var(--mf-sans); letter-spacing: var(--sys-track-head); text-transform: uppercase; color: var(--mf-text-3); }

@keyframes mf-flicker { 0%, 100% { opacity: 1 } 46% { opacity: 1 } 48% { opacity: .35 } 50% { opacity: 1 } 52% { opacity: .6 } 54% { opacity: 1 } }

/* base */
.mf { background: var(--mf-canvas); color: var(--mf-text); font: 400 var(--mf-body)/1.45 var(--mf-sans); -webkit-font-smoothing: antialiased; }
.mf::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, var(--mf-scanline) 0 1px, transparent 1px 3px); }
.mf :focus-visible { outline: var(--mf-focus); outline-offset: 2px; }
.mf-label { font: 400 var(--mf-label-size)/1.2 var(--mf-sans); letter-spacing: var(--mf-track-label); text-transform: uppercase; color: var(--mf-label); }
.mf-pixel { font-family: var(--mf-pixel); letter-spacing: var(--mf-track-pixel); }
.mf-mono { font-family: var(--mf-mono); font-size: 13px; letter-spacing: .02em; }
.mf-pix { width: 14px; height: 14px; flex: none; shape-rendering: crispEdges; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .mf * { animation: none !important; transition: none !important; } }