/**
 * FinIT-2 és First IT arculat 0.5.0 – betű, márkaváltós változók és komponens-osztályok egy fájlban.
 * Márka: <html data-brand="group|finit|firstit"> (alapértelmezés: group). Forrás: finit_and_first_brands.
 */

/* Betű: Montserrat (SIL OFL) */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../../fonts/montserrat-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../../fonts/montserrat-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../../fonts/montserrat-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../../fonts/montserrat-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../../fonts/montserrat-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../../fonts/montserrat-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../../fonts/montserrat-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../../fonts/montserrat-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../../fonts/montserrat-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../../fonts/montserrat-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Változók */

:root {
  --ff-color-blue-50: #f2f5fe;
  --ff-color-blue-100: #e4ebff;
  --ff-color-blue-200: #c9d7fd;
  --ff-color-blue-300: #a6bcfd;
  --ff-color-blue-400: #809dfb;
  --ff-color-blue-500: #4e6cf8;
  --ff-color-blue-600: #4161e7;
  --ff-color-blue-700: #3c53c0;
  --ff-color-blue-800: #2d3f94;
  --ff-color-blue-900: #27356a;
  --ff-color-blue-950: #131e4b;
  --ff-color-red-50: #f8efed;
  --ff-color-red-100: #f6dfdc;
  --ff-color-red-200: #f2c6c1;
  --ff-color-red-300: #eaa098;
  --ff-color-red-400: #e37269;
  --ff-color-red-500: #d34d47;
  --ff-color-red-600: #c53e3a;
  --ff-color-red-700: #97312d;
  --ff-color-red-800: #762522;
  --ff-color-red-900: #5b1d1a;
  --ff-color-red-950: #401311;
  --ff-color-navy-50: #f5f7fa;
  --ff-color-navy-100: #eceef4;
  --ff-color-navy-200: #dde1ea;
  --ff-color-navy-300: #c5cbd7;
  --ff-color-navy-400: #a0a8b8;
  --ff-color-navy-500: #788093;
  --ff-color-navy-600: #525b6f;
  --ff-color-navy-700: #323d55;
  --ff-color-navy-800: #2d3242;
  --ff-color-navy-900: #252833;
  --ff-color-navy-950: #181a23;
  --ff-color-mist: #d3d9f8; /** Halványkék kiegészítő szín (rgb 211 217 248): halvány háttér, kiemelés és ikon sötét felületen. Grafit szöveggel 10,5:1. */
  --ff-color-sky-50: #edf7fe;
  --ff-color-sky-100: #d9efff;
  --ff-color-sky-200: #b9e1fe;
  --ff-color-sky-300: #8ed0ff;
  --ff-color-sky-400: #59bbfb;
  --ff-color-sky-500: #3ca2e0;
  --ff-color-sky-600: #1c82bb;
  --ff-color-sky-700: #056798;
  --ff-color-sky-800: #015077;
  --ff-color-sky-900: #003c5c;
  --ff-color-sky-950: #012c44;
  --ff-color-violet-50: #f5f4fe;
  --ff-color-violet-100: #ebe8fe;
  --ff-color-violet-200: #dbd4ff;
  --ff-color-violet-300: #c9bdfe;
  --ff-color-violet-400: #b5a0fe;
  --ff-color-violet-500: #9f7dff;
  --ff-color-violet-600: #825cde;
  --ff-color-violet-700: #6745b6;
  --ff-color-violet-800: #503292;
  --ff-color-violet-900: #3c266f;
  --ff-color-violet-950: #2c1b54;
  --ff-color-white: #ffffff;
  --ff-color-logo-finit: #4e6cf8;
  --ff-color-logo-first: #d34d47;
  --ff-color-logo-it: #e6e6e6; /** Az „IT” színe sötét háttéren (a cégtábla szerint). */
  --ff-color-logo-it-on-light: #a0a8b8; /** Az „IT” színe világos háttéren: szürke, mint a régi FinIT-logón. */
  --ff-color-logo-mono: #a1a8b7; /** Az egyszínű logó színe világos háttéren; sötét háttéren a fehér változat a használandó. */
  --ff-color-status-success: #11a179;
  --ff-color-status-warning: #f9f673;
  --ff-color-status-serious: #f09f58;
  --ff-color-status-critical: #c53e3a;
  --ff-color-status-success-strong: #008360;
  --ff-color-status-warning-strong: #7d7900;
  --ff-color-status-serious-strong: #aa5f04;
  --ff-color-status-critical-strong: #c53e3a;
  --ff-color-data-blue: #4161e7;
  --ff-color-data-teal: #09a6a0;
  --ff-color-data-violet: #6e3ead;
  --ff-color-data-sky: #2a9fcd;
  --ff-color-data-green: #2a904b;
  --ff-color-data-orchid: #c46dbd;
  --ff-color-data-steel: #005b90;
  --ff-color-data-mint: #017e5a;
  --ff-color-data-petrol: #23a2b2;
  --ff-color-data-lavender: #7571ba;
  --ff-color-data-dark-blue: #4d70f7;
  --ff-color-data-dark-teal: #1dbcb5;
  --ff-color-data-dark-violet: #9163d5;
  --ff-color-data-dark-sky: #41b0e0;
  --ff-color-data-dark-green: #2b904b;
  --ff-color-data-dark-orchid: #b45ead;
  --ff-color-data-dark-steel: #59a2dc;
  --ff-color-data-dark-mint: #3dbc8e;
  --ff-color-data-dark-petrol: #018d9d;
  --ff-color-data-dark-lavender: #9794e0;
  --ff-color-data-dark-red: #d44e48;
  --ff-color-surface-page: #f5f7fa;
  --ff-color-surface-raised: #ffffff;
  --ff-color-surface-inverse: #252833;
  --ff-color-surface-inverse-deep: #181a23;
  --ff-color-surface-brand-deep: #27356a; /** Sötétkék kiemelő felület és gomb (pl. másodlagos sáv, sötétkék gomb). */
  --ff-color-text-primary: #252833;
  --ff-color-text-secondary: #525b6f;
  --ff-color-text-on-inverse: #f5f7fa;
  --ff-color-text-on-inverse-secondary: #a0a8b8;
  --ff-color-text-on-brand: #ffffff;
  --ff-color-text-link: #4161e7;
  --ff-color-border-default: #dde1ea;
  --ff-color-border-strong: #c5cbd7;
  --ff-color-focus: #8ed0ff;
  --ff-color-chart-1: #4161e7;
  --ff-color-chart-2: #09a6a0;
  --ff-color-chart-3: #6e3ead;
  --ff-color-chart-4: #2a9fcd;
  --ff-color-chart-5: #2a904b;
  --ff-color-chart-6: #c46dbd;
  --ff-color-chart-7: #005b90;
  --ff-color-chart-8: #017e5a;
  --ff-color-chart-9: #23a2b2;
  --ff-color-chart-10: #7571ba;
  --ff-color-chart-dark-1: #4d70f7;
  --ff-color-chart-dark-2: #1dbcb5;
  --ff-color-chart-dark-3: #9163d5;
  --ff-color-chart-dark-4: #41b0e0;
  --ff-color-chart-dark-5: #2b904b;
  --ff-color-chart-dark-6: #b45ead;
  --ff-color-chart-dark-7: #59a2dc;
  --ff-color-chart-dark-8: #3dbc8e;
  --ff-color-chart-dark-9: #018d9d;
  --ff-color-chart-dark-10: #9794e0;
  --ff-space-0: 0px;
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-space-20: 80px;
  --ff-space-24: 96px;
  --ff-radius-sm: 6px;
  --ff-radius-md: 10px;
  --ff-radius-lg: 18px;
  --ff-radius-xl: 28px;
  --ff-radius-full: 9999px;
  --ff-motion-duration-fast: 150ms;
  --ff-motion-duration-normal: 250ms;
  --ff-motion-duration-slow: 500ms;
  --ff-motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ff-motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ff-font-family-sans: Montserrat, 'Segoe UI', system-ui, sans-serif; /** Weboldal, extensionök, e-mail aláírás. */
  --ff-font-family-office-heading: Montserrat; /** Word- és PowerPoint-címsorok. A gépekre telepíteni kell (pl. Intune-nal). */
  --ff-font-family-office-body: Aptos; /** Word- és PowerPoint-törzsszöveg. Az M365 alapbetűje, minden gépen elérhető. */
  --ff-font-family-powerbi: 'Segoe UI'; /** A Power BI szolgáltatás nem támogat egyedi betűtípust. */
  --ff-font-weight-regular: 400;
  --ff-font-weight-medium: 500;
  --ff-font-weight-semibold: 600;
  --ff-font-weight-bold: 700;
  --ff-font-weight-extrabold: 800;
  --ff-font-size-xs: 12px;
  --ff-font-size-sm: 14px;
  --ff-font-size-md: 16px;
  --ff-font-size-lg: 18px;
  --ff-font-size-xl: 20px;
  --ff-font-size-2xl: 24px;
  --ff-font-size-3xl: 30px;
  --ff-font-size-4xl: 38px;
  --ff-font-size-5xl: 48px;
  --ff-font-size-6xl: 64px;
  --ff-font-line-height-tight: 1.15;
  --ff-font-line-height-snug: 1.35;
  --ff-font-line-height-normal: 1.6;
  --ff-brand-color-primary: #4161e7;
  --ff-brand-color-primary-hover: #3c53c0;
  --ff-brand-color-primary-on-dark: #809dfb; /** A márka fő színe sötét felületen (link, kiemelés); a navy.800-on legalább 4,5:1. */
  --ff-brand-color-secondary: #c53e3a;
  --ff-brand-color-accent: #d34d47;
  --ff-brand-color-accent-2: #d3d9f8;
  --ff-brand-color-tint: #d3d9f8; /** A márka halvány háttere: kiemelő doboz, sáv, kártya (FinIT-2: jégkék, First IT: púder, cégcsoport: halványkék). */
}

[data-brand="group"] {
  --ff-color-blue-50: #f2f5fe;
  --ff-color-blue-100: #e4ebff;
  --ff-color-blue-200: #c9d7fd;
  --ff-color-blue-300: #a6bcfd;
  --ff-color-blue-400: #809dfb;
  --ff-color-blue-500: #4e6cf8;
  --ff-color-blue-600: #4161e7;
  --ff-color-blue-700: #3c53c0;
  --ff-color-blue-800: #2d3f94;
  --ff-color-blue-900: #27356a;
  --ff-color-blue-950: #131e4b;
  --ff-color-red-50: #f8efed;
  --ff-color-red-100: #f6dfdc;
  --ff-color-red-200: #f2c6c1;
  --ff-color-red-300: #eaa098;
  --ff-color-red-400: #e37269;
  --ff-color-red-500: #d34d47;
  --ff-color-red-600: #c53e3a;
  --ff-color-red-700: #97312d;
  --ff-color-red-800: #762522;
  --ff-color-red-900: #5b1d1a;
  --ff-color-red-950: #401311;
  --ff-color-navy-50: #f5f7fa;
  --ff-color-navy-100: #eceef4;
  --ff-color-navy-200: #dde1ea;
  --ff-color-navy-300: #c5cbd7;
  --ff-color-navy-400: #a0a8b8;
  --ff-color-navy-500: #788093;
  --ff-color-navy-600: #525b6f;
  --ff-color-navy-700: #323d55;
  --ff-color-navy-800: #2d3242;
  --ff-color-navy-900: #252833;
  --ff-color-navy-950: #181a23;
  --ff-color-mist: #d3d9f8; /** Halványkék kiegészítő szín (rgb 211 217 248): halvány háttér, kiemelés és ikon sötét felületen. Grafit szöveggel 10,5:1. */
  --ff-color-sky-50: #edf7fe;
  --ff-color-sky-100: #d9efff;
  --ff-color-sky-200: #b9e1fe;
  --ff-color-sky-300: #8ed0ff;
  --ff-color-sky-400: #59bbfb;
  --ff-color-sky-500: #3ca2e0;
  --ff-color-sky-600: #1c82bb;
  --ff-color-sky-700: #056798;
  --ff-color-sky-800: #015077;
  --ff-color-sky-900: #003c5c;
  --ff-color-sky-950: #012c44;
  --ff-color-violet-50: #f5f4fe;
  --ff-color-violet-100: #ebe8fe;
  --ff-color-violet-200: #dbd4ff;
  --ff-color-violet-300: #c9bdfe;
  --ff-color-violet-400: #b5a0fe;
  --ff-color-violet-500: #9f7dff;
  --ff-color-violet-600: #825cde;
  --ff-color-violet-700: #6745b6;
  --ff-color-violet-800: #503292;
  --ff-color-violet-900: #3c266f;
  --ff-color-violet-950: #2c1b54;
  --ff-color-white: #ffffff;
  --ff-color-logo-finit: #4e6cf8;
  --ff-color-logo-first: #d34d47;
  --ff-color-logo-it: #e6e6e6; /** Az „IT” színe sötét háttéren (a cégtábla szerint). */
  --ff-color-logo-it-on-light: #a0a8b8; /** Az „IT” színe világos háttéren: szürke, mint a régi FinIT-logón. */
  --ff-color-logo-mono: #a1a8b7; /** Az egyszínű logó színe világos háttéren; sötét háttéren a fehér változat a használandó. */
  --ff-color-status-success: #11a179;
  --ff-color-status-warning: #f9f673;
  --ff-color-status-serious: #f09f58;
  --ff-color-status-critical: #c53e3a;
  --ff-color-status-success-strong: #008360;
  --ff-color-status-warning-strong: #7d7900;
  --ff-color-status-serious-strong: #aa5f04;
  --ff-color-status-critical-strong: #c53e3a;
  --ff-color-data-blue: #4161e7;
  --ff-color-data-teal: #09a6a0;
  --ff-color-data-violet: #6e3ead;
  --ff-color-data-sky: #2a9fcd;
  --ff-color-data-green: #2a904b;
  --ff-color-data-orchid: #c46dbd;
  --ff-color-data-steel: #005b90;
  --ff-color-data-mint: #017e5a;
  --ff-color-data-petrol: #23a2b2;
  --ff-color-data-lavender: #7571ba;
  --ff-color-data-dark-blue: #4d70f7;
  --ff-color-data-dark-teal: #1dbcb5;
  --ff-color-data-dark-violet: #9163d5;
  --ff-color-data-dark-sky: #41b0e0;
  --ff-color-data-dark-green: #2b904b;
  --ff-color-data-dark-orchid: #b45ead;
  --ff-color-data-dark-steel: #59a2dc;
  --ff-color-data-dark-mint: #3dbc8e;
  --ff-color-data-dark-petrol: #018d9d;
  --ff-color-data-dark-lavender: #9794e0;
  --ff-color-data-dark-red: #d44e48;
  --ff-color-surface-page: #f5f7fa;
  --ff-color-surface-raised: #ffffff;
  --ff-color-surface-inverse: #252833;
  --ff-color-surface-inverse-deep: #181a23;
  --ff-color-surface-brand-deep: #27356a; /** Sötétkék kiemelő felület és gomb (pl. másodlagos sáv, sötétkék gomb). */
  --ff-color-text-primary: #252833;
  --ff-color-text-secondary: #525b6f;
  --ff-color-text-on-inverse: #f5f7fa;
  --ff-color-text-on-inverse-secondary: #a0a8b8;
  --ff-color-text-on-brand: #ffffff;
  --ff-color-text-link: #4161e7;
  --ff-color-border-default: #dde1ea;
  --ff-color-border-strong: #c5cbd7;
  --ff-color-focus: #8ed0ff;
  --ff-color-chart-1: #4161e7;
  --ff-color-chart-2: #09a6a0;
  --ff-color-chart-3: #6e3ead;
  --ff-color-chart-4: #2a9fcd;
  --ff-color-chart-5: #2a904b;
  --ff-color-chart-6: #c46dbd;
  --ff-color-chart-7: #005b90;
  --ff-color-chart-8: #017e5a;
  --ff-color-chart-9: #23a2b2;
  --ff-color-chart-10: #7571ba;
  --ff-color-chart-dark-1: #4d70f7;
  --ff-color-chart-dark-2: #1dbcb5;
  --ff-color-chart-dark-3: #9163d5;
  --ff-color-chart-dark-4: #41b0e0;
  --ff-color-chart-dark-5: #2b904b;
  --ff-color-chart-dark-6: #b45ead;
  --ff-color-chart-dark-7: #59a2dc;
  --ff-color-chart-dark-8: #3dbc8e;
  --ff-color-chart-dark-9: #018d9d;
  --ff-color-chart-dark-10: #9794e0;
  --ff-space-0: 0px;
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-space-20: 80px;
  --ff-space-24: 96px;
  --ff-radius-sm: 6px;
  --ff-radius-md: 10px;
  --ff-radius-lg: 18px;
  --ff-radius-xl: 28px;
  --ff-radius-full: 9999px;
  --ff-motion-duration-fast: 150ms;
  --ff-motion-duration-normal: 250ms;
  --ff-motion-duration-slow: 500ms;
  --ff-motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ff-motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ff-font-family-sans: Montserrat, 'Segoe UI', system-ui, sans-serif; /** Weboldal, extensionök, e-mail aláírás. */
  --ff-font-family-office-heading: Montserrat; /** Word- és PowerPoint-címsorok. A gépekre telepíteni kell (pl. Intune-nal). */
  --ff-font-family-office-body: Aptos; /** Word- és PowerPoint-törzsszöveg. Az M365 alapbetűje, minden gépen elérhető. */
  --ff-font-family-powerbi: 'Segoe UI'; /** A Power BI szolgáltatás nem támogat egyedi betűtípust. */
  --ff-font-weight-regular: 400;
  --ff-font-weight-medium: 500;
  --ff-font-weight-semibold: 600;
  --ff-font-weight-bold: 700;
  --ff-font-weight-extrabold: 800;
  --ff-font-size-xs: 12px;
  --ff-font-size-sm: 14px;
  --ff-font-size-md: 16px;
  --ff-font-size-lg: 18px;
  --ff-font-size-xl: 20px;
  --ff-font-size-2xl: 24px;
  --ff-font-size-3xl: 30px;
  --ff-font-size-4xl: 38px;
  --ff-font-size-5xl: 48px;
  --ff-font-size-6xl: 64px;
  --ff-font-line-height-tight: 1.15;
  --ff-font-line-height-snug: 1.35;
  --ff-font-line-height-normal: 1.6;
  --ff-brand-color-primary: #4161e7;
  --ff-brand-color-primary-hover: #3c53c0;
  --ff-brand-color-primary-on-dark: #809dfb; /** A márka fő színe sötét felületen (link, kiemelés); a navy.800-on legalább 4,5:1. */
  --ff-brand-color-secondary: #c53e3a;
  --ff-brand-color-accent: #d34d47;
  --ff-brand-color-accent-2: #d3d9f8;
  --ff-brand-color-tint: #d3d9f8; /** A márka halvány háttere: kiemelő doboz, sáv, kártya (FinIT-2: jégkék, First IT: púder, cégcsoport: halványkék). */
}

[data-brand="finit"] {
  --ff-color-blue-50: #f2f5fe;
  --ff-color-blue-100: #e4ebff;
  --ff-color-blue-200: #c9d7fd;
  --ff-color-blue-300: #a6bcfd;
  --ff-color-blue-400: #809dfb;
  --ff-color-blue-500: #4e6cf8;
  --ff-color-blue-600: #4161e7;
  --ff-color-blue-700: #3c53c0;
  --ff-color-blue-800: #2d3f94;
  --ff-color-blue-900: #27356a;
  --ff-color-blue-950: #131e4b;
  --ff-color-red-50: #f8efed;
  --ff-color-red-100: #f6dfdc;
  --ff-color-red-200: #f2c6c1;
  --ff-color-red-300: #eaa098;
  --ff-color-red-400: #e37269;
  --ff-color-red-500: #d34d47;
  --ff-color-red-600: #c53e3a;
  --ff-color-red-700: #97312d;
  --ff-color-red-800: #762522;
  --ff-color-red-900: #5b1d1a;
  --ff-color-red-950: #401311;
  --ff-color-navy-50: #f5f7fa;
  --ff-color-navy-100: #eceef4;
  --ff-color-navy-200: #dde1ea;
  --ff-color-navy-300: #c5cbd7;
  --ff-color-navy-400: #a0a8b8;
  --ff-color-navy-500: #788093;
  --ff-color-navy-600: #525b6f;
  --ff-color-navy-700: #323d55;
  --ff-color-navy-800: #2d3242;
  --ff-color-navy-900: #252833;
  --ff-color-navy-950: #181a23;
  --ff-color-mist: #d3d9f8; /** Halványkék kiegészítő szín (rgb 211 217 248): halvány háttér, kiemelés és ikon sötét felületen. Grafit szöveggel 10,5:1. */
  --ff-color-sky-50: #edf7fe;
  --ff-color-sky-100: #d9efff;
  --ff-color-sky-200: #b9e1fe;
  --ff-color-sky-300: #8ed0ff;
  --ff-color-sky-400: #59bbfb;
  --ff-color-sky-500: #3ca2e0;
  --ff-color-sky-600: #1c82bb;
  --ff-color-sky-700: #056798;
  --ff-color-sky-800: #015077;
  --ff-color-sky-900: #003c5c;
  --ff-color-sky-950: #012c44;
  --ff-color-violet-50: #f5f4fe;
  --ff-color-violet-100: #ebe8fe;
  --ff-color-violet-200: #dbd4ff;
  --ff-color-violet-300: #c9bdfe;
  --ff-color-violet-400: #b5a0fe;
  --ff-color-violet-500: #9f7dff;
  --ff-color-violet-600: #825cde;
  --ff-color-violet-700: #6745b6;
  --ff-color-violet-800: #503292;
  --ff-color-violet-900: #3c266f;
  --ff-color-violet-950: #2c1b54;
  --ff-color-white: #ffffff;
  --ff-color-logo-finit: #4e6cf8;
  --ff-color-logo-first: #d34d47;
  --ff-color-logo-it: #e6e6e6; /** Az „IT” színe sötét háttéren (a cégtábla szerint). */
  --ff-color-logo-it-on-light: #a0a8b8; /** Az „IT” színe világos háttéren: szürke, mint a régi FinIT-logón. */
  --ff-color-logo-mono: #a1a8b7; /** Az egyszínű logó színe világos háttéren; sötét háttéren a fehér változat a használandó. */
  --ff-color-status-success: #11a179;
  --ff-color-status-warning: #f9f673;
  --ff-color-status-serious: #f09f58;
  --ff-color-status-critical: #c53e3a;
  --ff-color-status-success-strong: #008360;
  --ff-color-status-warning-strong: #7d7900;
  --ff-color-status-serious-strong: #aa5f04;
  --ff-color-status-critical-strong: #c53e3a;
  --ff-color-data-blue: #4161e7;
  --ff-color-data-teal: #09a6a0;
  --ff-color-data-violet: #6e3ead;
  --ff-color-data-sky: #2a9fcd;
  --ff-color-data-green: #2a904b;
  --ff-color-data-orchid: #c46dbd;
  --ff-color-data-steel: #005b90;
  --ff-color-data-mint: #017e5a;
  --ff-color-data-petrol: #23a2b2;
  --ff-color-data-lavender: #7571ba;
  --ff-color-data-dark-blue: #4d70f7;
  --ff-color-data-dark-teal: #1dbcb5;
  --ff-color-data-dark-violet: #9163d5;
  --ff-color-data-dark-sky: #41b0e0;
  --ff-color-data-dark-green: #2b904b;
  --ff-color-data-dark-orchid: #b45ead;
  --ff-color-data-dark-steel: #59a2dc;
  --ff-color-data-dark-mint: #3dbc8e;
  --ff-color-data-dark-petrol: #018d9d;
  --ff-color-data-dark-lavender: #9794e0;
  --ff-color-data-dark-red: #d44e48;
  --ff-color-surface-page: #f5f7fa;
  --ff-color-surface-raised: #ffffff;
  --ff-color-surface-inverse: #252833;
  --ff-color-surface-inverse-deep: #181a23;
  --ff-color-surface-brand-deep: #27356a; /** Sötétkék kiemelő felület és gomb (pl. másodlagos sáv, sötétkék gomb). */
  --ff-color-text-primary: #252833;
  --ff-color-text-secondary: #525b6f;
  --ff-color-text-on-inverse: #f5f7fa;
  --ff-color-text-on-inverse-secondary: #a0a8b8;
  --ff-color-text-on-brand: #ffffff;
  --ff-color-text-link: #4161e7;
  --ff-color-border-default: #dde1ea;
  --ff-color-border-strong: #c5cbd7;
  --ff-color-focus: #8ed0ff;
  --ff-color-chart-1: #4161e7;
  --ff-color-chart-2: #09a6a0;
  --ff-color-chart-3: #6e3ead;
  --ff-color-chart-4: #2a9fcd;
  --ff-color-chart-5: #2a904b;
  --ff-color-chart-6: #c46dbd;
  --ff-color-chart-7: #005b90;
  --ff-color-chart-8: #017e5a;
  --ff-color-chart-9: #23a2b2;
  --ff-color-chart-10: #7571ba;
  --ff-color-chart-dark-1: #4d70f7;
  --ff-color-chart-dark-2: #1dbcb5;
  --ff-color-chart-dark-3: #9163d5;
  --ff-color-chart-dark-4: #41b0e0;
  --ff-color-chart-dark-5: #2b904b;
  --ff-color-chart-dark-6: #b45ead;
  --ff-color-chart-dark-7: #59a2dc;
  --ff-color-chart-dark-8: #3dbc8e;
  --ff-color-chart-dark-9: #018d9d;
  --ff-color-chart-dark-10: #9794e0;
  --ff-space-0: 0px;
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-space-20: 80px;
  --ff-space-24: 96px;
  --ff-radius-sm: 6px;
  --ff-radius-md: 10px;
  --ff-radius-lg: 18px;
  --ff-radius-xl: 28px;
  --ff-radius-full: 9999px;
  --ff-motion-duration-fast: 150ms;
  --ff-motion-duration-normal: 250ms;
  --ff-motion-duration-slow: 500ms;
  --ff-motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ff-motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ff-font-family-sans: Montserrat, 'Segoe UI', system-ui, sans-serif; /** Weboldal, extensionök, e-mail aláírás. */
  --ff-font-family-office-heading: Montserrat; /** Word- és PowerPoint-címsorok. A gépekre telepíteni kell (pl. Intune-nal). */
  --ff-font-family-office-body: Aptos; /** Word- és PowerPoint-törzsszöveg. Az M365 alapbetűje, minden gépen elérhető. */
  --ff-font-family-powerbi: 'Segoe UI'; /** A Power BI szolgáltatás nem támogat egyedi betűtípust. */
  --ff-font-weight-regular: 400;
  --ff-font-weight-medium: 500;
  --ff-font-weight-semibold: 600;
  --ff-font-weight-bold: 700;
  --ff-font-weight-extrabold: 800;
  --ff-font-size-xs: 12px;
  --ff-font-size-sm: 14px;
  --ff-font-size-md: 16px;
  --ff-font-size-lg: 18px;
  --ff-font-size-xl: 20px;
  --ff-font-size-2xl: 24px;
  --ff-font-size-3xl: 30px;
  --ff-font-size-4xl: 38px;
  --ff-font-size-5xl: 48px;
  --ff-font-size-6xl: 64px;
  --ff-font-line-height-tight: 1.15;
  --ff-font-line-height-snug: 1.35;
  --ff-font-line-height-normal: 1.6;
  --ff-brand-color-primary: #4161e7;
  --ff-brand-color-primary-hover: #3c53c0;
  --ff-brand-color-primary-on-dark: #809dfb; /** A márka fő színe sötét felületen (link, kiemelés); a navy.800-on legalább 4,5:1. */
  --ff-brand-color-secondary: #252833;
  --ff-brand-color-accent: #59bbfb;
  --ff-brand-color-accent-2: #d3d9f8;
  --ff-brand-color-tint: #e4ebff; /** A márka halvány háttere: kiemelő doboz, sáv, kártya (FinIT-2: jégkék, First IT: púder, cégcsoport: halványkék). */
}

[data-brand="firstit"] {
  --ff-color-blue-50: #f2f5fe;
  --ff-color-blue-100: #e4ebff;
  --ff-color-blue-200: #c9d7fd;
  --ff-color-blue-300: #a6bcfd;
  --ff-color-blue-400: #809dfb;
  --ff-color-blue-500: #4e6cf8;
  --ff-color-blue-600: #4161e7;
  --ff-color-blue-700: #3c53c0;
  --ff-color-blue-800: #2d3f94;
  --ff-color-blue-900: #27356a;
  --ff-color-blue-950: #131e4b;
  --ff-color-red-50: #f8efed;
  --ff-color-red-100: #f6dfdc;
  --ff-color-red-200: #f2c6c1;
  --ff-color-red-300: #eaa098;
  --ff-color-red-400: #e37269;
  --ff-color-red-500: #d34d47;
  --ff-color-red-600: #c53e3a;
  --ff-color-red-700: #97312d;
  --ff-color-red-800: #762522;
  --ff-color-red-900: #5b1d1a;
  --ff-color-red-950: #401311;
  --ff-color-navy-50: #f5f7fa;
  --ff-color-navy-100: #eceef4;
  --ff-color-navy-200: #dde1ea;
  --ff-color-navy-300: #c5cbd7;
  --ff-color-navy-400: #a0a8b8;
  --ff-color-navy-500: #788093;
  --ff-color-navy-600: #525b6f;
  --ff-color-navy-700: #323d55;
  --ff-color-navy-800: #2d3242;
  --ff-color-navy-900: #252833;
  --ff-color-navy-950: #181a23;
  --ff-color-mist: #d3d9f8; /** Halványkék kiegészítő szín (rgb 211 217 248): halvány háttér, kiemelés és ikon sötét felületen. Grafit szöveggel 10,5:1. */
  --ff-color-sky-50: #edf7fe;
  --ff-color-sky-100: #d9efff;
  --ff-color-sky-200: #b9e1fe;
  --ff-color-sky-300: #8ed0ff;
  --ff-color-sky-400: #59bbfb;
  --ff-color-sky-500: #3ca2e0;
  --ff-color-sky-600: #1c82bb;
  --ff-color-sky-700: #056798;
  --ff-color-sky-800: #015077;
  --ff-color-sky-900: #003c5c;
  --ff-color-sky-950: #012c44;
  --ff-color-violet-50: #f5f4fe;
  --ff-color-violet-100: #ebe8fe;
  --ff-color-violet-200: #dbd4ff;
  --ff-color-violet-300: #c9bdfe;
  --ff-color-violet-400: #b5a0fe;
  --ff-color-violet-500: #9f7dff;
  --ff-color-violet-600: #825cde;
  --ff-color-violet-700: #6745b6;
  --ff-color-violet-800: #503292;
  --ff-color-violet-900: #3c266f;
  --ff-color-violet-950: #2c1b54;
  --ff-color-white: #ffffff;
  --ff-color-logo-finit: #4e6cf8;
  --ff-color-logo-first: #d34d47;
  --ff-color-logo-it: #e6e6e6; /** Az „IT” színe sötét háttéren (a cégtábla szerint). */
  --ff-color-logo-it-on-light: #a0a8b8; /** Az „IT” színe világos háttéren: szürke, mint a régi FinIT-logón. */
  --ff-color-logo-mono: #a1a8b7; /** Az egyszínű logó színe világos háttéren; sötét háttéren a fehér változat a használandó. */
  --ff-color-status-success: #11a179;
  --ff-color-status-warning: #f9f673;
  --ff-color-status-serious: #f09f58;
  --ff-color-status-critical: #c53e3a;
  --ff-color-status-success-strong: #008360;
  --ff-color-status-warning-strong: #7d7900;
  --ff-color-status-serious-strong: #aa5f04;
  --ff-color-status-critical-strong: #c53e3a;
  --ff-color-data-blue: #4161e7;
  --ff-color-data-teal: #09a6a0;
  --ff-color-data-violet: #6e3ead;
  --ff-color-data-sky: #2a9fcd;
  --ff-color-data-green: #2a904b;
  --ff-color-data-orchid: #c46dbd;
  --ff-color-data-steel: #005b90;
  --ff-color-data-mint: #017e5a;
  --ff-color-data-petrol: #23a2b2;
  --ff-color-data-lavender: #7571ba;
  --ff-color-data-dark-blue: #4d70f7;
  --ff-color-data-dark-teal: #1dbcb5;
  --ff-color-data-dark-violet: #9163d5;
  --ff-color-data-dark-sky: #41b0e0;
  --ff-color-data-dark-green: #2b904b;
  --ff-color-data-dark-orchid: #b45ead;
  --ff-color-data-dark-steel: #59a2dc;
  --ff-color-data-dark-mint: #3dbc8e;
  --ff-color-data-dark-petrol: #018d9d;
  --ff-color-data-dark-lavender: #9794e0;
  --ff-color-data-dark-red: #d44e48;
  --ff-color-surface-page: #f5f7fa;
  --ff-color-surface-raised: #ffffff;
  --ff-color-surface-inverse: #252833;
  --ff-color-surface-inverse-deep: #181a23;
  --ff-color-surface-brand-deep: #27356a; /** Sötétkék kiemelő felület és gomb (pl. másodlagos sáv, sötétkék gomb). */
  --ff-color-text-primary: #252833;
  --ff-color-text-secondary: #525b6f;
  --ff-color-text-on-inverse: #f5f7fa;
  --ff-color-text-on-inverse-secondary: #a0a8b8;
  --ff-color-text-on-brand: #ffffff;
  --ff-color-text-link: #c53e3a;
  --ff-color-border-default: #dde1ea;
  --ff-color-border-strong: #c5cbd7;
  --ff-color-focus: #8ed0ff;
  --ff-color-chart-1: #c53e3a;
  --ff-color-chart-2: #09a6a0;
  --ff-color-chart-3: #6e3ead;
  --ff-color-chart-4: #2a9fcd;
  --ff-color-chart-5: #2a904b;
  --ff-color-chart-6: #c46dbd;
  --ff-color-chart-7: #005b90;
  --ff-color-chart-8: #017e5a;
  --ff-color-chart-9: #23a2b2;
  --ff-color-chart-10: #7571ba;
  --ff-color-chart-dark-1: #d44e48;
  --ff-color-chart-dark-2: #1dbcb5;
  --ff-color-chart-dark-3: #9163d5;
  --ff-color-chart-dark-4: #41b0e0;
  --ff-color-chart-dark-5: #2b904b;
  --ff-color-chart-dark-6: #b45ead;
  --ff-color-chart-dark-7: #59a2dc;
  --ff-color-chart-dark-8: #3dbc8e;
  --ff-color-chart-dark-9: #018d9d;
  --ff-color-chart-dark-10: #9794e0;
  --ff-space-0: 0px;
  --ff-space-1: 4px;
  --ff-space-2: 8px;
  --ff-space-3: 12px;
  --ff-space-4: 16px;
  --ff-space-5: 20px;
  --ff-space-6: 24px;
  --ff-space-8: 32px;
  --ff-space-10: 40px;
  --ff-space-12: 48px;
  --ff-space-16: 64px;
  --ff-space-20: 80px;
  --ff-space-24: 96px;
  --ff-radius-sm: 6px;
  --ff-radius-md: 10px;
  --ff-radius-lg: 18px;
  --ff-radius-xl: 28px;
  --ff-radius-full: 9999px;
  --ff-motion-duration-fast: 150ms;
  --ff-motion-duration-normal: 250ms;
  --ff-motion-duration-slow: 500ms;
  --ff-motion-easing-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ff-motion-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ff-font-family-sans: Montserrat, 'Segoe UI', system-ui, sans-serif; /** Weboldal, extensionök, e-mail aláírás. */
  --ff-font-family-office-heading: Montserrat; /** Word- és PowerPoint-címsorok. A gépekre telepíteni kell (pl. Intune-nal). */
  --ff-font-family-office-body: Aptos; /** Word- és PowerPoint-törzsszöveg. Az M365 alapbetűje, minden gépen elérhető. */
  --ff-font-family-powerbi: 'Segoe UI'; /** A Power BI szolgáltatás nem támogat egyedi betűtípust. */
  --ff-font-weight-regular: 400;
  --ff-font-weight-medium: 500;
  --ff-font-weight-semibold: 600;
  --ff-font-weight-bold: 700;
  --ff-font-weight-extrabold: 800;
  --ff-font-size-xs: 12px;
  --ff-font-size-sm: 14px;
  --ff-font-size-md: 16px;
  --ff-font-size-lg: 18px;
  --ff-font-size-xl: 20px;
  --ff-font-size-2xl: 24px;
  --ff-font-size-3xl: 30px;
  --ff-font-size-4xl: 38px;
  --ff-font-size-5xl: 48px;
  --ff-font-size-6xl: 64px;
  --ff-font-line-height-tight: 1.15;
  --ff-font-line-height-snug: 1.35;
  --ff-font-line-height-normal: 1.6;
  --ff-brand-color-primary: #c53e3a;
  --ff-brand-color-primary-hover: #97312d;
  --ff-brand-color-primary-on-dark: #eaa098; /** A márka fő színe sötét felületen (link, kiemelés); a navy.800-on legalább 4,5:1. */
  --ff-brand-color-secondary: #252833;
  --ff-brand-color-accent: #d34d47;
  --ff-brand-color-accent-2: #f2c6c1;
  --ff-brand-color-tint: #f6dfdc; /** A márka halvány háttere: kiemelő doboz, sáv, kártya (FinIT-2: jégkék, First IT: púder, cégcsoport: halványkék). */
}


/* Komponens-osztályok */

/* Kijelölés és görgetősáv */
/* A márka színe a szövegkijelölésben és a görgetősávban; a data-brand váltásra ez is vált */
::selection {
  background: color-mix(in srgb, var(--ff-brand-color-primary) 24%, var(--ff-color-white));
  color: var(--ff-color-text-primary);
}
html {
  scrollbar-color: var(--ff-brand-color-primary) var(--ff-color-navy-100);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ff-color-navy-100); }
::-webkit-scrollbar-thumb {
  border: 3px solid var(--ff-color-navy-100);
  border-radius: var(--ff-radius-full);
  background: var(--ff-brand-color-primary);
}
::-webkit-scrollbar-thumb:hover { background: var(--ff-brand-color-primary-hover); }

/* Gomb */
.ff-btn {
  --_bg: var(--ff-brand-color-primary);
  --_bg-hover: var(--ff-brand-color-primary-hover);
  --_fg: var(--ff-color-text-on-brand);
  --_border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ff-space-2);
  min-height: 44px;
  padding: var(--ff-space-2) var(--ff-space-6);
  border: 1.5px solid var(--_border);
  border-radius: var(--ff-radius-full);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ff-font-family-sans);
  font-size: var(--ff-font-size-md);
  font-weight: var(--ff-font-weight-bold);
  line-height: var(--ff-font-line-height-tight);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ff-motion-duration-fast) var(--ff-motion-easing-out),
    border-color var(--ff-motion-duration-fast) var(--ff-motion-easing-out),
    transform var(--ff-motion-duration-fast) var(--ff-motion-easing-out);
}
.ff-btn:hover { background: var(--_bg-hover); }
.ff-btn:active { transform: translateY(1px); }
.ff-btn:focus-visible { outline: 3px solid var(--ff-color-focus); outline-offset: 2px; }
.ff-btn:disabled,
.ff-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ff-btn:disabled:hover,
.ff-btn[aria-disabled='true']:hover { background: var(--_bg); }

.ff-btn--secondary {
  --_bg: transparent;
  --_bg-hover: color-mix(in srgb, var(--ff-brand-color-primary) 8%, transparent);
  --_fg: var(--ff-brand-color-primary);
  --_border: currentColor;
}
.ff-btn--ghost {
  --_bg: transparent;
  --_bg-hover: color-mix(in srgb, var(--ff-brand-color-primary) 8%, transparent);
  --_fg: var(--ff-brand-color-primary);
}
.ff-btn--deep {
  --_bg: var(--ff-color-surface-brand-deep);
  --_bg-hover: var(--ff-color-blue-800);
  --_fg: var(--ff-color-white);
}
.ff-btn--inverse {
  --_bg: var(--ff-color-white);
  --_bg-hover: var(--ff-color-navy-100);
  --_fg: var(--ff-color-navy-900);
}
.ff-btn--small { min-height: 34px; padding: var(--ff-space-1) var(--ff-space-4); font-size: var(--ff-font-size-sm); }
.ff-btn--block { display: flex; width: 100%; }

/* Beviteli mező */
.ff-field { display: grid; gap: var(--ff-space-1); font-family: var(--ff-font-family-sans); }
.ff-field__label { font-size: var(--ff-font-size-sm); font-weight: var(--ff-font-weight-semibold); color: var(--ff-color-text-primary); }
.ff-field__message { font-size: var(--ff-font-size-xs); color: var(--ff-color-text-secondary); }
.ff-field__message--error { color: var(--ff-color-status-critical); }

.ff-input,
.ff-select,
.ff-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--ff-space-2) var(--ff-space-3);
  border: 1px solid var(--ff-color-border-strong);
  border-radius: var(--ff-radius-md);
  background: var(--ff-color-surface-raised);
  color: var(--ff-color-text-primary);
  font: inherit;
  font-size: var(--ff-font-size-md);
  transition:
    border-color var(--ff-motion-duration-fast) var(--ff-motion-easing-out),
    box-shadow var(--ff-motion-duration-fast) var(--ff-motion-easing-out);
}
.ff-textarea { min-height: 120px; resize: vertical; }
.ff-input::placeholder,
.ff-textarea::placeholder { color: var(--ff-color-navy-500); }
.ff-input:hover,
.ff-select:hover,
.ff-textarea:hover { border-color: var(--ff-color-text-secondary); }
.ff-input:focus,
.ff-select:focus,
.ff-textarea:focus {
  outline: none;
  border-color: var(--ff-brand-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-brand-color-primary) 22%, transparent);
}
.ff-input[aria-invalid='true'],
.ff-select[aria-invalid='true'],
.ff-textarea[aria-invalid='true'] { border-color: var(--ff-color-status-critical); }
.ff-input:disabled,
.ff-select:disabled,
.ff-textarea:disabled { background: var(--ff-color-surface-page); color: var(--ff-color-text-secondary); cursor: not-allowed; }

/* Jelölőnégyzet és rádiógomb */
.ff-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-2);
  font-family: var(--ff-font-family-sans);
  font-size: var(--ff-font-size-md);
  color: var(--ff-color-text-primary);
  cursor: pointer;
}
.ff-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ff-brand-color-primary);
  cursor: pointer;
}
.ff-choice input:focus-visible { outline: 3px solid var(--ff-color-focus); outline-offset: 2px; }
.ff-choice:has(input:disabled) { color: var(--ff-color-text-secondary); cursor: not-allowed; }

/* Link */
.ff-link {
  color: var(--ff-color-text-link);
  font-weight: var(--ff-font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ff-link:hover { text-decoration-thickness: 2px; }
.ff-link:focus-visible { outline: 3px solid var(--ff-color-focus); outline-offset: 2px; border-radius: var(--ff-radius-sm); }

/* Kártya */
.ff-card {
  padding: var(--ff-space-6);
  border: 1px solid var(--ff-color-border-default);
  border-radius: var(--ff-radius-lg);
  background: var(--ff-color-surface-raised);
  color: var(--ff-color-text-primary);
  font-family: var(--ff-font-family-sans);
}
.ff-card--inverse {
  border-color: transparent;
  background: var(--ff-color-surface-inverse);
  color: var(--ff-color-text-on-inverse);
}
.ff-card--accent { border-top: 4px solid var(--ff-brand-color-primary); }

/* Címke */
.ff-badge {
  --_tone: var(--ff-brand-color-primary);
  --_mark: var(--_tone);
  --_tint: 12%;
  display: inline-flex;
  align-items: center;
  gap: var(--ff-space-2);
  padding: 2px var(--ff-space-3);
  border-radius: var(--ff-radius-full);
  background: color-mix(in srgb, var(--_tone) var(--_tint), var(--ff-color-surface-raised));
  color: var(--ff-color-text-primary);
  font-family: var(--ff-font-family-sans);
  font-size: var(--ff-font-size-xs);
  font-weight: var(--ff-font-weight-semibold);
}
/* A szín mellett mindig ott a felirat: az állapot nem csak színnel jelzett */
.ff-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--_mark); }
/* A citrom és a narancs világos: a háttér belőlük, a pötty és a szegély az erős változatból */
.ff-badge--success { --_tone: var(--ff-color-status-success); --_mark: var(--ff-color-status-success-strong); }
.ff-badge--warning { --_tone: var(--ff-color-status-warning); --_mark: var(--ff-color-status-warning-strong); --_tint: 65%; }
.ff-badge--serious { --_tone: var(--ff-color-status-serious); --_mark: var(--ff-color-status-serious-strong); --_tint: 30%; }
.ff-badge--critical { --_tone: var(--ff-color-status-critical); --_mark: var(--ff-color-status-critical-strong); }

/* Értesítés */
.ff-alert {
  --_tone: var(--ff-brand-color-primary);
  --_mark: var(--_tone);
  --_tint: 8%;
  padding: var(--ff-space-4) var(--ff-space-5);
  border-left: 4px solid var(--_mark);
  border-radius: var(--ff-radius-md);
  background: color-mix(in srgb, var(--_tone) var(--_tint), var(--ff-color-surface-raised));
  color: var(--ff-color-text-primary);
  font-family: var(--ff-font-family-sans);
  font-size: var(--ff-font-size-sm);
  line-height: var(--ff-font-line-height-normal);
}
.ff-alert__title { display: block; margin-bottom: var(--ff-space-1); font-weight: var(--ff-font-weight-bold); }
.ff-alert--success { --_tone: var(--ff-color-status-success); --_mark: var(--ff-color-status-success-strong); }
.ff-alert--warning { --_tone: var(--ff-color-status-warning); --_mark: var(--ff-color-status-warning-strong); --_tint: 50%; }
.ff-alert--serious { --_tone: var(--ff-color-status-serious); --_mark: var(--ff-color-status-serious-strong); --_tint: 20%; }
.ff-alert--critical { --_tone: var(--ff-color-status-critical); --_mark: var(--ff-color-status-critical-strong); }

/* Táblázat */
.ff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-font-family-sans);
  font-size: var(--ff-font-size-sm);
  color: var(--ff-color-text-primary);
}
.ff-table th {
  padding: var(--ff-space-2) var(--ff-space-3);
  border-bottom: 2px solid var(--ff-color-border-strong);
  color: var(--ff-color-text-secondary);
  font-size: var(--ff-font-size-xs);
  font-weight: var(--ff-font-weight-bold);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.ff-table td { padding: var(--ff-space-3); border-bottom: 1px solid var(--ff-color-border-default); }
.ff-table tbody tr:nth-child(even) td { background: var(--ff-color-surface-page); }
.ff-table tbody tr:hover td { background: color-mix(in srgb, var(--ff-brand-color-primary) 6%, var(--ff-color-surface-raised)); }
.ff-table tbody tr[aria-selected='true'] td { background: color-mix(in srgb, var(--ff-brand-color-primary) 12%, var(--ff-color-surface-raised)); }
.ff-table .ff-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Szövegstílusok */
.ff-text-display { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-6xl); font-weight: var(--ff-font-weight-regular); line-height: var(--ff-font-line-height-tight); letter-spacing: 0; text-transform: uppercase; }
.ff-text-h1 { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-5xl); font-weight: var(--ff-font-weight-regular); line-height: var(--ff-font-line-height-tight); letter-spacing: -0.01em; }
.ff-text-h2 { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-4xl); font-weight: var(--ff-font-weight-regular); line-height: var(--ff-font-line-height-tight); letter-spacing: -0.01em; }
.ff-text-h3 { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-2xl); font-weight: var(--ff-font-weight-regular); line-height: var(--ff-font-line-height-snug); }
.ff-text-lead { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-xl); font-weight: var(--ff-font-weight-regular); line-height: var(--ff-font-line-height-normal); color: var(--ff-color-text-secondary); }
.ff-text-body { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-md); font-weight: var(--ff-font-weight-regular); line-height: var(--ff-font-line-height-normal); }
.ff-text-small { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-sm); line-height: var(--ff-font-line-height-normal); color: var(--ff-color-text-secondary); }
.ff-text-eyebrow { font-family: var(--ff-font-family-sans); font-size: var(--ff-font-size-xs); font-weight: var(--ff-font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-brand-color-primary); }